跳转到路径导航栏
跳转到正文内容

VS2010实战:构建横向布局的WP7应用程序

http://www.sina.com.cn  2010年06月21日 08:12  IT168.com

  最新的Windows Phone 7构建工具除了免费的Express SKU外,也支持Visual Studio 2010了,本文就以我开发的一个小费计算器为例,为大家介绍一下如何在Visual Studio 2010环境下,构建一个支持横向布局的Windows Phone 7应用程序。首先来看看纵向布局时的样子:

 VS2010实战:构建横向布局的WP7应用程序

图 1 纵向布局的小费计算器

  布 局

  从上图可以看出,程序布局分为三部分,包括了数字键,小费比例调整键和账单金额汇总信息。

 VS2010实战:构建横向布局的WP7应用程序

图 2 程序布局:从上到下分为三部分

  每个网格都对应Grid.Row属性的一行,注意第一个格子对应第0行,第二个格子对应第1行,第三个格子对应第2行。

  当用户旋转手 机时,我们希望程序布局也进行调整,以匹配新的维度,实现起来其实也很简单,首先在LayoutRoot添加一列,作为汇总数字显示区域。

 VS2010实战:构建横向布局的WP7应用程序

图 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 EventHandler<OrientationChangedEventArgs>(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 the screen which is row 0, column 2

else

{

LandscapeColumn.Width
= new GridLength(0);

Grid.SetRow(TotalsGrid,
2);

Grid.SetColumn(TotalsGrid,
0);

LayoutRoot.ColumnDefinitions[
1].Width = new GridLength(0);

}

}

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

 VS2010实战:构建横向布局的WP7应用程序

图 4 横向模式显示效果

上一页 1 2 下一页

网友评论

登录名: 密码: 快速注册新用户
Powered By Google

新浪简介About Sina广告服务联系我们招聘信息网站律师SINA English会员注册产品答疑┊Copyright © 1996-2010 SINA Corporation, All Rights Reserved

新浪公司 版权所有