4 开发工具介绍

页面导航与常用控件议程页面导航与常用控件本次课程内容：•页面框架•页面导航•页面跳转和倾斜效果•布局控件•常用控件•Windows Phone Toolkit 中的控件页面框架框架（Frame）和页面（Page ）•框架•顶级容器控件•PhoneApplicationFrame类•包含页面控件和系统元素，例如：系统托盘和应用程序栏•页面•填充框架的全部内容区域•从PhoneApplicationPage派生的类•包含一个标题•可选择的应用程序栏页面结构•SystemTray（Status Bar）•竖直时32像素•水平时72像素•Application Bar•收起时72像素•展开时依赖菜单项数目•PhoneApplicationPage•有效区域最大800像素•有效区域最小要去除Systemtray和ApplicationBar占据的空间页面导航导航框架•PhoneApplicationPage •承载内容•PhoneApplicationFrame •承载Page •NavigationService•提供页面之间导航的方法•NavigationContext•提供页面之间传递的数据页面导航•Windows Phone 上的XAML 应用程序使用基于页面导航的模型•与Web 页面模型类似•每个页面通过URI 标识•每个页面本质是无状态的private void HyperlinkButton_Click_1(object sender, RoutedEventArgs e){NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));}导航相关方法导航返回•应用程序可以控制导航返回到前一页面private void Button_Click_1(object sender, RoutedEventArgs e) {NavigationService.GoBack();}•通过返回键也会返回到前一页面•无需任何代码–内置行为•如果“返回前一页”是不符合逻辑的行为，可能需要重写返回键•例如，当显示一个弹出面板时•用户希望返回键是来关闭面板，而不是当前页面<phone:PhoneApplicationPagex:Class="PhoneApp1.MainPage"…shell:SystemTray.IsVisible="True"BackKeyPress="PhoneApplicationPage_BackKeyPress">In code:private void PhoneApplicationPage_BackKeyPress(object sender,ponentModel.CancelEventArgs e){e.Cancel= true; // 告诉系统，我们已经处理了// 隐藏弹出的窗体......}页面间传递数据•可以使用查询字符串在页面间传递字符串数据•目标页面中private void passParam_Click(object sender, RoutedEventArgs e){NavigationService.Navigate(new Uri ("/SecondPage.xaml?msg="+ textBox1.Text, UriKind .Relative));}protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e ){base .OnNavigatedTo(e);string querystringvalue = "";if (NavigationContext.QueryString.TryGetValue("msg", out querystringvalue))textBlock1.Text = querystringvalue;}页面间传递Object 对象•经常从一个页面传递数据Object 对象到另一个页面•例如，用户从列表中选择一项并且导航到相应的详细页面•一种解决方案是在App类中存储ViewModel(该项的数据)•整个应用程序中有效•查询字符串中传递所选项的ID// 导航到新页面NavigationService.Navigate(new Uri("/DetailsPage.xaml?selectedItem="+ (MainLongListSelector.SelectedItem as ItemViewModel).ID, UriKind.Relative));Backward & ForwardBackward•App首页不要调用GoBack，可用CanGoBack属性判断•返回键行为系统会处理，可拦截BackKeyPres s事件•取消导航行为只需将e.Cancel= trueif (NavigationService.CanGoBack)NavigationService.GoBack();Forward•虽然提供了GoForward方法，但不支持•CanGoForward属性始终为falseBackStack•BackStack•只读，返回导航入口点枚举IEnumerable •RemoveBackEntry•从BackStack中移除最近的导航入口点•如果没有入口点将产生InvalidOperationException •JournalEntryRemovedEventArgs•当调用RemoveBackEntry时触发•处理页面信息处理非线性导航•仔细设计应用程序导航策略!•如果想从‘third page’ 导航到‘main page’ 并且用户按下了返回键, 发生什么?•用户希望应用退出•应用实际导航回到了第三页•Windows Phone 7.0 解决方案是使用复杂的代码处理使返回导航正确，或者使用AppHub中的Non-Linear Navigation Recipe 库•Windows Phone APIs:•NavigationService.RemoveBackEntry()NavigationService.RemoveBackEntry()•当‘Third Page’ 导航回MainPage, 在查询字符串中设置一个标记NavigationService.Navigate(new Uri("/MainPage.xaml?homeFromThird=true", UriKind.Relative));•在MainPage的OnNavigatedTo() 中, 查询标记，如果存在，从导航历史栈中移除‘ Third Page’,‘SecondPage’ 和初始页面‘MainPage’protected override void OnNavigatedTo(NavigationEventArgs e){if(e.NavigationMode== System.Windows.Navigation.NavigationMode.New&& NavigationContext.QueryString.ContainsKey(“homeFromThird”)) {NavigationService.RemoveBackEntry(); // 移除ThirdPageNavigationService.RemoveBackEntry(); // 移除SecondPageNavigationService.RemoveBackEntry(); // 移除original MainPage}base.OnNavigatedTo(e);}页面跳转和倾斜效果页面跳转效果•可以使用简单的方法将页面跳转效果添加到内置的应用程序中•不同的跳转效果包括•Roll, Swivel, Rotate, Slide 和Turnstile•使用Windows Phone Toolkit 中的TransitionFrame控件，代替默认的PhoneApplicationFrame•在App.Xaml.cs中的InitializePhoneApplication() 方法中设置:页面中启用跳转效果•声明Windows Phone Toolkit 程序集的命名空间•在<phone:PhoneApplicationPage> 根元素中，添加想要的跳转效果倾斜效果•控件交互中添加额外的可视化反馈•不是简单的按下与未按下状态，添加倾斜效果的控件可以在操作过程中产生动态的效果•例如，按钮有一个微妙的3D效果，按下时在页面中产生动态的效果和抬起时恢复•在页面中为所有控件添加倾斜效果非常容易•也适用于单独的控件布局控件布局控件•Canvas •Grid •StackPanelCanvas<Canvas … ><ButtonCanvas.Left=200Canvas.Top=50Content=“Item1”Background=“Green"Width="150"Height=“50“ />…………</Canvas>Grid<Grid ><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition/><RowDefinition/></Grid.RowDefinitions><ButtonGrid.Row=“2“Grid.Column=“0"Content=“Item2”Background=“Green"Width=“200"StackPanel<StackPanel Orientation=“Portrait”><Button Content=“Item1” Background=“Green"Width=“200" Height="100" /><Button Content=“Item2” … />UI 控件在Windows Phone 8 SDK 中的新控件•LongListSelector•Flat lists•Grouped lists –带标题•Jump List•以前都包含在Silverlight Toolkit中•现在Pivot 和Panorama 内置在ROM中•WebBrowser控件目前基于Internet Explorer 10常用控件Border 控件•可以为UI 元素添加边框或背景•可以方便设置边框的样式，如圆角、虚线等•Border 中只能包含一个直接子元素•Demo Code<Border Background="Coral" CornerRadius="20" BorderBrush="Red"BorderThickness="5" Width="300" Height="100"><TextBlock FontSize="26" TextWrapping="Wrap" Height="70">用Border 为文本框添加背景及边框</TextBlock></Border>基础控件Windows Phone Toolkit 中的控件Windows Phone Toolkit•Microsoft Windows Phone 项目组的产品•之前叫做‘Silverlight Toolkit’•Windows Phone Toolkit 在官方控件集基础上增加了一些新功能•包括全部开源的代码、示例、文档和Windows Phone 设计时支持的控件•每三个月左右更新•修复Bug•新控件如何获取Windows Phone Toolkit••获取源代码，包括示例应用程序•仅需从NuGet安装该库NuGet•.NET 的包管理系统•简化合并了第三方库•开发者关注•免费，开源•NuGet客户端被包含在Visual Studio 2012中–包括Express 版本!•使用NuGet添加库，例如：Windows Phone Toolkit 项目ContextMenuDatePicker和TimePickerToggleSwitchWrapPanelListPicker•WP7 ComboBox•下拉列表主要呈现少量的数据项•全屏选择器主要呈现较长列表数据•Custom MessageBox•Rating control•AutoCompleteBox•ExpanderView•HubTile•…更多…•可以从中下载相关资源, 创建示例应用程序并部署到模拟器或设备•页面框架由Frame 构成•导航到页面是根据基本的URI (统一资源指示器)来完成•通常返回键导航到前一页面，但是可以被重写•URI 可以包含查询字符串来传递上下文字符串数据•常用的布局控件：Grid、StackPanel、Canvas•Windows Phone Toolkit 是微软在Visual Studio 的发布周期之外发布的一个附加工具和库••Toolkit 中包含页面跳转和倾斜效果，可以将它们作为常见的动画添加到应用程序中The information herein is for informational purposes only an represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATIONIN THIS PRESENTATION.。