构建横向布局的WP7应用程序

最新推荐文章于 2021-07-17 09:08:42 发布

congshi5551

最新推荐文章于 2021-07-17 09:08:42 发布

阅读量95

点赞数

最新的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需要有三行两列来容纳这些内容。

"LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">

         "Auto"/>
         "Auto"/>
         "*"/>


         "Auto" />
         "0" x:Name="LandscapeColumn" />

　　前两个Height属性都设为“Auto”的RowDefinition元素表示它们只会占据所容纳内容需要的高度，第三个RowDefinition元素的Height属性设为“*”，表示高度不限，要多少占多少。

　　第一个ColumnDefinition元素的Width属性设为“Auto”，表示它的宽度会根据所容纳内容自动进行调整，第二个ColumnDefinition元素的Width属性设为“0”，这是因为在纵向模式时这一列(LandscapeColumn)是不显示的。

　　为了同时支持横向和纵向模式，应用程序必须声明它支持，然后再处理方向变化事件：

SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;

this.OrientationChanged += new EventHandler(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.Width = GridLength.Auto;

　　}

　　// In portrait mode, the totals grid goes below the number pad at the

　　// bottom of the screen which is row 0, column 2.

　　else

　　{

　　LandscapeColumn.Width = new GridLength(0);

　　Grid.SetRow(TotalsGrid, 2);

　　Grid.SetColumn(TotalsGrid, 0);

　　LayoutRoot.ColumnDefinitions.Width = new GridLength(0);

　　}

　　}

最后横向模式的显示效果如下：

　　图 4 横向模式显示效果

按钮处理程序

　　数字按钮是通过xaml配置文件将所有项目放在3x4的小格子中实现的，每个数字按钮使用“button”命名，其中x表示该按钮对应的数字。当一个按钮按下时，将这个按钮代表的数字添加到账单数量上，我们可以在Visual Studio 2010中手工添加处理代码，也可以使用C#匿名委托功能实现更多的功能。

private void InitButtonHandlers()

　　{

　　for (int i = 0; i <= 9; i++)

　　{

　　string btnName = "button" + i.ToString();

　　System.Windows.Controls.Button btn =

　　(System.Windows.Controls.Button)this.LayoutRoot.FindName(btnName);

　　int j = i; // avoid local variable capture

　　btn.Click += new RoutedEventHandler(

　　(object sender, RoutedEventArgs e) => { TryUpdateBillAmount(textBlockBill.Text + j.ToString()); }

　　);

　　}

　　}

通过这个循环语句使用名字找到所有按钮，然后分别添加处理程序，下面是最有趣的代码部分：

　　图 5 按钮事件处理程序

　　这串代码为每个按钮实例定义了一个按钮处理程序，方法定义以(object sender, RoutedEventArgs e)参数列表开头，紧接着是Lambda语法符号==>，然后就是方法实现{ TryUpdateBillAmount(textBlockBill.Text + j.ToString()); }。

　　每按一下按钮，代码就获得当前的字符串值，追加这个数字到末尾，然后调用TryUpdateBillAmount方法确定是否要更新结果值。

　　注意其中的int j = i; // avoid local variable capture，局部变量i被看作是一个外部变量，这意味着i可以在堆上获得地址空间，而不是在栈上，不会包含每个循环的值(如果你在委托中使用i，在这个例子中，你获得的值将总是10)，为了解决这个问题，我们在循环中声明了一个局部变量j，并捕获它的值。