减小字体
增大字体- ·上一篇文章：asp和asp.net共享session的解决办法
- ·下一篇文章：.net实践:RSClientPrint打印本地报表
.NET实战:构建横向布局的WP7应用程序
：2010-06-23 20:44:00
【Visual Studio 2010 Demo大赛专稿】最新的Windows Phone 7构建工具除了免费的Express SKU外，也支持Visual Studio 2010了，本文就以我开发的一个小费计算器为例，为大家介绍一下如何在Visual Studio 2010环境下，构建一个支持横向布局的Windows Phone 7应用程序。首先来看看纵向布局时的样子：
图 1 纵向布局的小费计算器
布局
从上图可以看出，程序布局分为三部分，包括了数字键，小费比例调整键和账单金额汇总信息。
图 2 程序布局：从上到下分为三部分
每个网格都对应Grid.Row属性的一行，注意第一个ge子对应第0行，第二个ge子对应第1行，第三个ge子对应第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>
<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);
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);
}
}
{
// 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);
}
}
最后横向模式的显示效果如下：
图 4 横向模式显示效果
按钮处理程序
数字按钮是通过xaml配置文件将所有项目放在3x4的小ge子中实现的，每个数字按钮使用“button[x]”命名，其中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()); }
);
}
}
{
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，并捕获它的值。
用模拟器进行调试
调试也很简单，只需要在Visual Studio 2010中按F5即可，默认情况下，模拟器就是你的目标。
图 6 调试时，默认的目标就是模拟器
如果你有一部Windows Phone 7手机，通过USB将它与你的计算机连接，然后就可以将目标改为Windows Phone 7设备。
图 7 调整调试目标为Windows Phone 7设备
现在就可以使用Visual Studio的调式器和模拟器测试应用程序了，例如，想要测试横向模式时，只需选择你要旋转的方向：
图 8 选择横向进行测试
小结
本文使用到的都是Silverlight和C#常见的技术，通过这个例子，我只想告诉大家，其实你之前掌握的Silverlight和C#技术一样可以用于Windows Phone 7应用程序的开发，本文的全部代码可从http://code.msdn.microsoft.com/winphone7tipcalcsamp下载。
！
.NET实战:构建横向布局的WP7应用程序
