培训第一章XAML介绍属性设置设置方式:1: 特性设置2: 使用属性元素属性继承XAML中的颜色和画刷Content属性资源定义和访问共享机制 画刷 外观 文字等Style使用与继承Style是属性集合,也属于资源,多用于对象元素主题与渐变使用Windows Phone预定了很多资源,通过StaticResource来用这些资源资源包括:颜色,画刷,字体名称,字体大小,边距等培训第二章 UI控件基础控件控件继承图布局控件Grid 支持网格布局自定义行列数Grid.RowDefinitions 定义行Grid.ColumnDefinitions 定义列Auto表示此行根据内容自动调整*代表取余下的长度Canvas 绝对布局的容器控件使用Canvas.Left和Canvas.TopCanvas.Zindex处理叠加处理StackPanel使多个子控件按照横向或者纵向排列Orientation(排列方向)HorizontalVertical三个Panel的区别Border控件绘制边框扮演容器控件角色Image控件显示本地或者远程图片可以对图片进行裁剪,MaskShape控件用于绘制几何图形主要包括的控件Ellipse(椭圆)Polygon(多边形)Control控件按钮和选择控件按钮:Button与用户交互Button可以做如下风格内嵌图片背景色设置背景画刷设置背景为图片画刷HyperlinkButton用来作为超链接按钮支持页面导航设置链接属性:NavigateUri="Http://";NavigateUri="/MainPage.xaml";RepeatButton按下时,不断的触发Click事件选择控件:CheckBox(选择框控件)为用户提供选项,一般用于多选支持三态:选中,中间态,未选中注意:要使中间态有效需要设置如下: IsThreeState="true"ReadioButton用户选择控件,用于单选分组方式有两种1:不同的分组,放到不同的容器2:通过GruoupName属性Slider(滑杆控件)以拖动方式在指定范围内进行属性Orientation指定水平或者垂直属性Maximum和Minimum用于定义文本控件TextBlock强大的文本标签lnlines(内联属性)是LineBreak和Run对象的集合一个内联中,可以有多个LineBreakLineBreak表示换行Run可以对文本设置不同的字体颜色TextBox普通的文本采集控件支持换行TextWrapping="Wrap"InputScope限定输入内容PasswordBox密码采集控件属性PasswordChanItem控件Pivot控件(枢轴控件)虚拟出比手机宽度更宽的空间水平方式组织多个屏幕内容Pivot包含Pivotltem类型的子项Pivotltem里面可以是不同的控件Panorama控件(全景控件)虚拟出比手机宽度更宽的空间水平方式组织多个屏幕内容Panorama包含PanoramaItem类型ScrollViewer当子控件尺寸超出其大小时,可以进行拖动浏览滚动条属性(默认只能垂直滚动)HorizontalScrollBarVisibilityVerticalScrollBarVisibilityPropressBar(进度条)进度条控件有两种类型进度递增几个小点不断循环当知道具体的进度时,采用第一种,当进度不明确时,可采用第二种ToolKit控件ToolKit介绍与使用微软Siverlight团队开发的一个产品,为了丰富windows phone的UI控件导航效果(翻页特效)ListPicker列表选择控件相当于Windows中的ComboBox控件ListPickerItem:集合项PhoneTextBox高级的TextBox支持:Hint提示Actionlcon(动作图标)字数限制提示TiltEffect(控件倾斜)替代用户按下(pressed)和未按下(unpressed)三个主要属性TiltableltemsIsTiltEnabledSupressTile使用方法s1: 全局倾斜2: 应用到某个控件上3: 静止倾斜4: 添加更多的控件到TiltableItems中 HubTile轮询磁贴可以使用图片,标题,消息和通知支持反转事件响应 事件 简介路由事件事件的传递从顶层控件传递到PhoneApplicationFrame一些常见的事件:PropertyChanged----属性更改Click---单击页面导航相关事件应用程序状态变化通知事件触摸原生触摸程序级别提供比较低层的触控编程接口注册Touch.FrameReported事件事件信息存放在TouchFrameEvent参数属性:Timestamp:获取事件高级触摸Manipulation手势识别
<Grid x:Name="LayoutRoot" Background="Transparent"><!--<Grid Margin="10,0,0,0"><Grid.RowDefinitions><RowDefinition Height="130" /><RowDefinition Height="130" /><RowDefinition Height="*" /><RowDefinition Height="130" /><RowDefinition Height="130" /></Grid.RowDefinitions><Grid x:Name="RowOne" Grid.Row="0"><Grid.ColumnDefinitions><ColumnDefinition Width="120" /><ColumnDefinition Width="120" /><ColumnDefinition Width="120" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Button Grid.Column="0"Content="日历"Style="{StaticResource gb}" /><Button Grid.Column="1"Content="系统"Style="{StaticResource gb}" /><Button Grid.Column="2"Content="网络"Style="{StaticResource gb}" /><Button Grid.Column="3"Content="短信"Style="{StaticResource gb}" /></Grid><Grid Grid.Row="1"><Button Width="120"HorizontalAlignment="Left"Content="视频"Style="{StaticResource gb}" /><Button Width="120"HorizontalAlignment="Right"Content="录音"Style="{StaticResource gb}" /></Grid><Grid Grid.Row="2"><Button Width="400"Content="商店"FontSize="60"Style="{StaticResource gb}" /></Grid><Grid Grid.Row="3"><Button HorizontalAlignment="Left"Content="帮助"Style="{StaticResource gb}" /><Button HorizontalAlignment="Right"Content="设置"Style="{StaticResource gb}" /></Grid><Grid Grid.Row="4"><Grid.ColumnDefinitions><ColumnDefinition Width="120" /><ColumnDefinition Width="120" /><ColumnDefinition Width="120" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Button Grid.Column="0"Content="阅读"Style="{StaticResource gb}" /><Button Grid.Column="1"Content="UC"Style="{StaticResource gb}" /><Button Grid.Column="2"Content="QQ"Style="{StaticResource gb}" /><Button Grid.Column="3"Content="升级"Style="{StaticResource gb}" /></Grid></Grid>--><!--<Canvas Width="100"Height="100"Background="Brown"Left="150"Top="150"ZIndex="3" /><Canvas Width="200"Height="200"Background="Blue"Left="100"Top="100"ZIndex="2" /><Canvas Width="300"Height="300"Background="Chartreuse"Left="50"Top="50"ZIndex="1" />--><!-- 靠没达到理想的效果 --><!--<StackPanel Orientation="Vertical"><Button Height="150" Content="确定" /><Grid Height="300" Background="Brown"><StackPanel Orientation="Horizontal"><Button Height="100" Content="登录" /><Button Height="100" Content="退出" /></StackPanel></Grid></StackPanel>--><!--<Border Width="400"Height="200"Margin="28,150,28,275"Background="Red"BorderBrush="Green"BorderThickness="50,0,50,0"CornerRadius="100"><Button Content="Button" /></Border>--><!--<Image Width="339"Height="244"HorizontalAlignment="Center"Source="./Windows-Phone-8.jpg" />--><!--<Grid x:Name="ContentPanel"Grid.Row="1"Margin="12,0,12,0"><StackPanel Grid.Row="0" Margin="12,17,0,28"><Ellipse Width="200"Height="200"Fill="Green" /><Rectangle Width="200"Height="50"Fill="Red" /></StackPanel></Grid>--><!-- button --><!--<Button Name="button1"Width="321"Height="89"Margin="87,-5,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"><Button.Content><Image Width="218" Source="Windows-Phone-8.jpg" /></Button.Content></Button><Button Name="button2"Width="321"Height="72"Margin="87,82,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Background="#FFB81BD4"BorderBrush="CadetBlue"Content="Button" /><Button Name="button3"Width="321"Height="72"Margin="87,153,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Content="Button"><Button.Background><LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"><GradientStop Offset="0" Color="BlueViolet" /><GradientStop Offset="1" Color="CadetBlue" /></LinearGradientBrush></Button.Background></Button><Button Name="button4"Height="72"Margin="87,225,48,0"VerticalAlignment="Top"Content="Button"><Button.Background><ImageBrush ImageSource="Windows-Phone-8.jpg" /></Button.Background></Button><HyperlinkButton Name="htperlinkButton1"Width="321"Height="66"Margin="87,391,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Background="Brown"Content="www.baidu.com"NavigateUri="Http://www.baidu.com"TargetName="devdiv" /><HyperlinkButton Name="hyperlinkButton2"Width="321"Height="59"Margin="87,309,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Background="Chartreuse"Content="MainPage"NavigateUri="MainPage.xaml" /><RepeatButton Name="repeatButton"Width="321"Height="81"Margin="87,462,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Background="DarkBlue"Click="repeaBtn_Click"Content="0"Delay="400" />--><!-- CheckBox --><!--<CheckBox Name="mychkBox"Width="190"VerticalAlignment="Top"Background="Brown"Checked="chkBox_Checked"Foreground="Chartreuse"IsThreeState="True"Unchecked="chkBox_Unchecked"><CheckBox.RenderTransform><CompositeTransform ScaleX="1.5" ScaleY="1.5" /></CheckBox.RenderTransform></CheckBox><RadioButton Name="radioButton1"Width="220"Height="72"Margin="145,225,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Background="Blue"Content="男" /><RadioButton Name="radioButton2"Width="220"Height="72"Margin="245,225,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Background="Blue"Content="女" />--><!-- Slider --><!--<TextBlock Name="sliderText" /><Slider Name="slider"Width="407"Height="115"Margin="49,482,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"LargeChange="2"Maximum="100"Minimum="0"SmallChange="0.1"ValueChanged="slider_ValueChanged" /><Slider Name="slider2"Width="59"Height="325"Margin="6,0,0,55"HorizontalAlignment="Left"VerticalAlignment="Bottom"Background="Brown"BorderBrush="Chartreuse"Foreground="Black"Orientation="Vertical"ValueChanged="slider_ValueChanged" />--><!-- TextBlock --><!--<StackPanel Width="456"Height="607"HorizontalAlignment="Left"VerticalAlignment="Top"><TextBlock Width="253"Height="114"Margin="87,0,0,0"HorizontalAlignment="Left"TextWrapping="Wrap"><TextBlock.Inlines><Run FontSize="30"FontStyle="Italic"FontWeight="Thin"Foreground="#ff1fdb3c"Text="Windows Phone 8" /><LineBreak /><Run FontSize="30"Foreground="Blue"Text="开发" /><Run FontSize="50"Foreground="Chartreuse"Text="体验" /></TextBlock.Inlines></TextBlock><TextBox Width="410"Height="221"Margin="87,0,0,0"HorizontalAlignment="Left"VerticalAlignment="Center"InputScope="Text"Text="TextBox"TextWrapping="Wrap" /><PasswordBox Width="410"Height="93"Margin="36,0,0,0"HorizontalAlignment="Left"PasswordChar="*" /></StackPanel>--><!-- pivot --><!--<phone:Pivot Title="Pivot控件"><phone:Pivot.Background><ImageBrush ImageSource="Windows-Phone-8.jpg" /></phone:Pivot.Background><phone:PivotItem Header="文本"><TextBox Width="436"Height="589"Margin="10,10,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Background="BlueViolet"Foreground="CadetBlue"Text=" W Indows Phone 8是微软公司6月21日最新发布的一款手机操作系统,是Windows Phone系统的最新版本,也是目前Windows Phone的第三个大型版本。Windows Phone 8采用和Windows 8相同的针对移动平台精简优化NT内核并内置诺基亚地图。"TextWrapping="Wrap" /></phone:PivotItem><phone:PivotItem Header="图片"><ScrollViewer Name="scrollViewer1"Width="446"Height="597"HorizontalAlignment="Left"VerticalAlignment="Top"Background="Chartreuse"HorizontalScrollBarVisibility="Auto"VerticalScrollBarVisibility="Auto"><Image Name="img"Width="800"Height="600"Source="Windows-Phone-8.jpg" /></ScrollViewer></phone:PivotItem></phone:Pivot>--><!--<phone:Panorama Title="Panorama控件"><phone:Panorama.Background><ImageBrush ImageSource="Windows-Phone-8.jpg" /></phone:Panorama.Background><phone:PanoramaItem Header="文本"><TextBox Width="436"Height="468"Margin="0,0,0,15"HorizontalAlignment="Left"VerticalAlignment="Bottom"Background="Brown"Foreground="CadetBlue"Text="WIndows Phone 8是微软公司6月21日最新发布的一款手机操作系统,是Windows Phone系统的最新版本,也是目前Windows Phone的第三个大型版本。Windows Phone 8采用和Windows 8相同的针对移动平台精简优化NT内核并内置诺基亚地图。"TextWrapping="Wrap" /></phone:PanoramaItem><phone:PanoramaItem Header="图片"><ScrollViewer Name="scrollViewer1"Width="446"Height="600"HorizontalAlignment="Left"VerticalAlignment="Top"Background="Chocolate"HorizontalScrollBarVisibility="Auto"VerticalScrollBarVisibility="Auto"><Image Name="img"Width="800"Height="600"Source="Windows-Phone-8.jpg"Stretch="Fill" /></ScrollViewer></phone:PanoramaItem></phone:Panorama>--><!--<ScrollViewer Name="scrollViewer1"Width="362"Height="362"Margin="41,67,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Background="DarkKhaki"HorizontalScrollBarVisibility="Auto"VerticalScrollBarVisibility="Auto"><Image Name="img"Width="500"Height="400"Source="Windows-Phone-8.jpg"Stretch="Fill" /></ScrollViewer>--><!-- 进度条 ProgressBar --><!--<ProgressBar Name="progressBar2"Width="431"Height="34"Margin="25,317,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"IsIndeterminate="True" /><ProgressBar Name="progressbar1"Width="431"Height="20"Margin="25,204,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Value="50" />--><!-- ToolKit --><!--<Grid x:Name="ContentPanel"Grid.Row="1"Margin="12,0,12,0"><toolKit:PhoneTextBox Margin="-10,96,10,435"ActionIcon="Windows-Phone-8.jpg"ActionIconTapped="Search_ActionIconTapped"Hint="请输入搜索内容"HintStyle="{StaticResource HintCustomStyle}"LengthIndicatorVisible="True"MaxLength="10" /><toolKit:ListPicker><toolKit:ListPickerItem Content="睡觉" /><toolKit:ListPickerItem Content="上班" /><toolKit:ListPickerItem Content="下班" /></toolKit:ListPicker><Button Name="button"Width="251"Margin="80,206,0,342"HorizontalAlignment="Left"Background="Red"Content="斜"Foreground="White" /></Grid>--><!--<Grid.RowDefinitions><RowDefinition Height="*" /><RowDefinition Height="*" /><RowDefinition Height="*" /><RowDefinition Height="*" /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><toolKit:HubTile Title="艺术"Grid.Row="0"Grid.Column="0"Width="218"Height="172"Margin="5,10,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Background="BurlyWood"DisplayNotification="true"Message="多彩贵州 舞蹈大赛决赛在贵州电视台演播厅举行。图为女子集体民族民间舞比赛中。黔中早报 罗禹 摄"Notification="5"Source="/images/00.jpg"Tap="hubTile_Tap" /><toolKit:HubTile Title="奥运"Grid.Row="0"Grid.Column="1"Width="218"Height="172"HorizontalAlignment="Left"VerticalAlignment="Top"Background="BurlyWood"DisplayNotification="True"Message="英国伦敦,2012奥运会闭幕式现场。"Notification="6"Source="/images/01.jpg"Tap="hubTile_Tap" /><toolKit:HubTile Title="风情"Grid.Row="1"Grid.Column="0"Width="218"Height="172"Margin="5,10,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Background="CadetBlue"DisplayNotification="True"Message="印度孟买,印度教信徒们在叠罗汉,组成人体金字塔。叠罗汉是印度教徒的传统活动,以庆祝神明克利须那神"Notification="8"Source="/images/10.jpg"Tap="hubTile_Tap" /><toolKit:HubTile Title="少儿"Grid.Row="1"Grid.Column="1"Width="218"Height="172"Margin="5,10,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Background="Chocolate"DisplayNotification="true"Message="在安徽省亳州市文帝东路亳州体操训练基地体操馆内,孩子们正在教练的指导下强化训练。"Notification="10"Source="/images/11.jpg"Tap="hubTile_Tap" /><toolKit:HubTile Title="国际"Grid.Row="2"Grid.Column="0"Width="218"Height="172"Margin="5,10,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Background="Coral"DisplayNotification="true"Message="一名男子正在参拜位于东京的靖国神社。当天是日本二战投降67周年。"Notification="1"Source="/images/20.jpg"Tap="hubTile_Tap" /><toolKit:HubTile Title="新闻"Grid.Row="2"Grid.Column="1"Width="218"Height="172"Margin="5,10,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Background="BurlyWood"DisplayNotification="true"Message="载有14人的香港保钓船启丰二号成功登上钓鱼岛,并将五星红旗插在钓鱼岛上。"Notification="9"Source="/images/21.jpg"Tap="hubTile_Tap" /><toolKit:HubTile Title="环保"Grid.Row="3"Grid.Column="0"Width="218"Height="172"Margin="5,10,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Background="Coral"DisplayNotification="True"Message="陈光标和《甄嬛传》中槿汐的扮演者孙茜将现场的铅酸电池电动车砸碎,断然拒绝铅污染。"Notification="4"Source="/images/30.jpg"Tap="hubTile_Tap" /><toolKit:HubTile Title="电影"Grid.Row="3"Grid.Column="1"Width="218"Height="172"Margin="5,10,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Background="Chartreuse"DisplayNotification="True"Message="第69届威尼斯电影节开幕。意大利女星玛里尼-瓦勒丽亚走红毯。"Notification="7"Source="/images/31.jpg"Tap="hubTile_Tap" />--><!--<Grid x:Name="ContentPanel"Grid.Row="1"Margin="12,0,12,0"><StackPanel><TextBlock Name="textBlick1" TextWrapping="Wrap" /><TextBlock Name="textBlick2" TextWrapping="Wrap" /><TextBlock Name="textBlick3" TextWrapping="Wrap" /><TextBlock Name="textBlick4" TextWrapping="Wrap" /><TextBlock Name="textBlick5" TextWrapping="Wrap" /><TextBlock Name="textBlick6" TextWrapping="Wrap" /></StackPanel><Button Height="100"VerticalAlignment="Center"Background="Blue"Content="点击" /></Grid>--><Grid x:Name="ContentPanel"Grid.Row="1"Margin="12,0,12,0"><TextBlock Name="txtBlk"VerticalAlignment="Top"Text="" /><Button Name="btn"Width="169"Height="132"Margin="133,136,0,0"HorizontalAlignment="Left"VerticalAlignment="Top"Content="拖我啊!"ManipulationCompleted="btn_ManipulationCompleted"ManipulationDelta="btn_ManipulationDelta"ManipulationStarted="btn_ManipulationStarted"><Button.RenderTransform><TranslateTransform x:Name="translatedTransform" /></Button.RenderTransform></Button></Grid></Grid>
//private void repeaBtn_Click(object sender, RoutedEventArgs e)//{//int count = Convert.ToInt32(repeatButton.Content);//repeatButton.Content = ++count;//}/*private void chkBox_Checked(object sender, RoutedEventArgs e){if (mychkBox.IsChecked == true){MessageBox.Show("选择");}}private void chkBox_Unchecked(object sender, RoutedEventArgs e){if (mychkBox.IsChecked == false){MessageBox.Show("未选");}}*//*private void slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e){Slider slidertemp = (Slider) sender;this.sliderText.Text = slidertemp.Value.ToString();}*//*private void Search_ActionIconTapped(object sendeer, EventArgs e){MessageBox.Show("开始搜索!");}*//*private void hubTile_Tap(object sender, System.Windows.Input.GestureEventArgs e){HubTile tile = (HubTile) sender;MessageBox.Show(tile.Message, tile.Title, MessageBoxButton.OK);}*//*private void TouchFrameReported(object sender, TouchFrameEventArgs e){//传入null表明获取到的触控点信息是以屏幕左上角为原点的TouchPoint mainPoint = e.GetPrimaryTouchPoint(null);if (mainPoint != null){textBlick1.Text = "主触控点的行为,Action: "+mainPoint.Action.ToString();textBlick2.Text = "主触控点位置,Position: X" + mainPoint.Position.X.ToString()+"Y:"+mainPoint.Position.Y.ToString();textBlick3.Text = "主触控点的范围,Size.Width:"+mainPoint.Size.Width.ToString()+",Size.Height:"+mainPoint.Size.Height.ToString();textBlick4.Text = "主触控点设置ID,TouchDevice.Id:"+mainPoint.TouchDevice.Id.ToString();textBlick5.Text = "主触控点点中哪 个UIElement元素:" + (mainPoint.TouchDevice.DirectlyOver as FrameworkElement).Name.ToString();}TouchPointCollection points = e.GetTouchPoints(null);int i = 0;textBlick6.Text = "";if (points != null){//列举触控点的集合foreach (var point in points){i++;textBlick6.Text += "Position" + i + "X:" + point.Position.X.ToString() + " Y" + i + " " +point.Position.Y.ToString() + " " + point.Action.ToString() + "\n";}}}*/private void btn_ManipulationStarted(object sender, ManipulationStartedEventArgs e){txtBlk.Text = "btn_ManipulationStarted";}private void btn_ManipulationDelta(object sender, ManipulationDeltaEventArgs e){//使控件跟着触控点走this.translatedTransform.X += e.DeltaManipulation.Translation.X;this.translatedTransform.Y += e.DeltaManipulation.Translation.Y;txtBlk.Text = "btn_ManipulationDelta"+"\n"+" Translation X:"+e.DeltaManipulation.Translation.X+" Y:"+e.DeltaManipulation.Translation.Y+"\n"+"Cumulative X:"+e.CumulativeManipulation.Translation.X+" Y:"+e.CumulativeManipulation.Translation.Y+" LinearVelocity X:"+e.Velocities.LinearVelocity.X+" Y:"+e.Velocities.LinearVelocity.Y+" IsInertial:"+e.IsInertial;}private void btn_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e){txtBlk.Text = "btn_ManipulationCompleted "+"\n"+" TotalManipulation.Translation.X:"+e.TotalManipulation.Translation.X+" Y:"+e.TotalManipulation.Translation.Y+"\n"+"FinalVelocities: X:"+e.FinalVelocities.LinearVelocity.X+" Y:"+e.FinalVelocities.LinearVelocity.Y+" IsInertial:"+e.IsInertial;}