Visual Studio 2010构建支持横向布局的Windows Phone 7应用程序.docVIP

Visual Studio 2010实战：构建支持横向布局的Windows Phone 7应用程序 必威体育精装版的Windows Phone 7构建工具除了免费的Express SKU外，也支持Visual Studio 2010了，本文就以我开发的一个小费计算器为例，为大家介绍一下如何在Visual Studio 2010环境下，构建一个支持横向布局的Windows Phone 7应用程序。首先来看看纵向布局时的样子： 图 1 纵向布局的小费计算器 布局 从上图可以看出，程序布局分为三部分，包括了数字键，小费比例调整键和账单金额汇总信息。 图 2 程序布局：从上到下分为三部分 每个网格都对应Grid.Row属性的一行，注意第一个格子对应第0行，第二个格子对应第1行，第三个格子对应第2行。 当用户旋转手机时，我们希望程序布局也进行调整，以匹配新的维度，实现起来其实也很简单，首先在LayoutRoot添加一列，作为汇总数字显示区域。 图 3 从纵向布局切换到横向布局的变化 当手机旋转到横向模式时，我们把TotalsGrid移到第二列，紧邻NumbersGrid，要实现这个效果，首先LayoutRoot需要有三行两列来容纳这些内容。 Grid x:Name=LayoutRoot Background={StaticResource PhoneBackgroundBrush} Grid.RowDefinitions RowDefinition Height=Auto/ RowDefinition Height=Auto/ RowDefinition Height=*/ /Grid.RowDefinitions Grid.ColumnDefinitions ColumnDefinition Width=Auto / ColumnDefinition Width=0 x:Name=LandscapeColumn / /Grid.ColumnDefinitions 前两个Height属性都设为“Auto”的RowDefinition元素表示它们只会占据所容纳内容需要的高度，第三个RowDefinition元素的Height属性设为“*”，表示高度不限，要多少占多少。 第一个ColumnDefinition元素的Width属性设为“Auto”，表示它的宽度会根据所容纳内容自动进行调整，第二个ColumnDefinition元素的Width属性设为“0”，这是因为在纵向模式时这一列（LandscapeColumn）是不显示的。 为了同时支持横向和纵向模式，应用程序必须声明它支持，然后再处理方向变化事件： SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape; this.OrientationChanged += new EventHandlerOrientationChangedEventArgs(MainPage_OrientationChanged); 当方向变化时，我们首先将TotalsGrid移到紧邻NumbersGrid的第二列中去，然后对列的属性做相应的修改： void MainPage_OrientationChanged(object sender, OrientationChangedEventArgs e) { // In landscape mode, the totals grid is moved to the right on the screen // which puts it in row 1, column 1. if ((e.Orientation PageOrientation.Landscape) != 0) { LandscapeColumn.Width = GridLength.Auto; Grid.SetRow(TotalsGrid, 1); Grid.SetColumn(TotalsGrid, 1); LayoutRoot.ColumnDefinitions[1].Width = GridLength.Auto; } // In portrait mode, the totals grid goes below the number pad at the // bottom of th