Windows Phone 开发学习笔记（三）Hello Windows Phone之深藏不露

如果说程序是一个人，那么界面就是他的相貌。虽说不要以貌取人，但多数时候相貌好总有点优势。开发Windows Phone应用时，更改单个控件的样式是很简单的：只要选中控件，打开属性窗口就能调整。而且通过字面意思就能了解绝大多数属性的作用，还能在设计视图实时查看属性改变对显示效果的影响。不过布局用到的控件，如Grid、StackPanel等，不方便查看，所以，理解如何进行界面布局，还要求助XAML源代码。上一篇文章的Hello Windows Phone程序中，MainPage.xaml有45行代码，掐头去尾算注释才15行，如下所示：

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"></StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Content="HelloWp" Height="79" HorizontalAlignment="Left" Margin="85,35,0,0" Name="ShowMessage" VerticalAlignment="Top" Width="297" Click="ShowMessage_Click" />
<TextBlock Height="284" HorizontalAlignment="Left" Margin="51,135,0,0" Name="HelloText" Text="" VerticalAlignment="Top" Width="363" />
</Grid>
</Grid>

尽管如此，感觉还是挺乱的。此时到VS一显身手的时候了。鼠标移到Toolbox下方的Document Outline上，会显示如下窗口。显示了页面中所有控件之间的关系，让人一目了然。

看到上图，我的第一感觉是，整个页面就像一个包装好的手机盒。去掉包装（PhoneApplicationPage）后是手机盒（Grid-LayoutRoot），它有两层（RowDefinitions），第一层放的说明书（StackPanel-TitlePanel），第二层是放的手机（Grid-ContentPanel），手机上有一个按钮（Button-ShowMessage）和一个只会显示Hello Windows Phone的液晶屏（TextBlock-HelloText）。（这就是传说中的Windows Phone？功能也太简单了吧！）
看完Outline后再回到代码发现：

<Grid x:Name="LayoutRoot" Background="Transparent">
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"></StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Content="HelloWp" Height="79" HorizontalAlignment="Left" Margin="85,35,0,0" Name="ShowMessage" VerticalAlignment="Top" Width="297" Click="ShowMessage_Click" />
<TextBlock Height="284" HorizontalAlignment="Left" Margin="51,135,0,0" Name="HelloText" Text="" VerticalAlignment="Top" Width="363" />

注意第2行。虽然在上一篇文章中删除了两个TextBlock，但包含它们的StackPanel-TitlePanel依然存在。而在设计视图里是看不到StackPanel-TitlePanel的，所以不要太信任视图模式。有时候眼睛看到的不一定是真相。这几行代码都是一个类型，和自我介绍一样。类似“我是Button控件HelloWp，我身高79，总爱站左边……”之类的，没什么意思。比较感兴趣的是其中标注的部分和下面这几行代码：

<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

它们之间肯定与布局控件Grid有联系，是什么关系呢？
接下来就请Windows Phone百晓生：MSDN上场。打开之前提到的MSDN Windows Phone SDK技术资源库：
http://msdn.microsoft.com/zh-cn/library/ff402535(v=vs.92).aspx
搜索Grid，可以找到这个页面
http://msdn.microsoft.com/zh-cn/library/system.windows.controls.grid(v=vs.95).aspx
里面包括所有关于Grid控件的信息，并且给出了代码示例，特别详细。开发Windows Phone应用不利用MSDN文档，就好像买产品不看说明书一样。简单的功能摸索着还能用，一旦想用高级功能或者出了问题，就不知如何是好。
看过文档发现，其实Grid就是一个可以自定义行列的网格。开发人员可以用它把屏幕划分成不同的区域，从而方便地控制其他控件的位置。Hello Windows Phone中的控件都是自己随手画的，虽然实现了功能，但是不好看，接下来想通过调整布局来美化下页面，练习下Grid的使用（既然是联系Grid使用，那么只通过调整Grid来调整布局，不使用控件的Margin属性）。提到美化布局，我最先想到的就是传说中的黄金分割，因此打算把Button-ShowM和TextBlock-HelloText放在屏幕的黄金分割线上看看效果。

由于界面只有两个有用的控件，首先删除：

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"></StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>

然后调整Grid-LayoutRoot的RowDefinition。根据MSDN介绍，当选择“*”作为行或列的高度或宽度时，该行或列将得到一个剩余可用空间的加权比例分配。为得到黄金比例，将RowDefinition调整如下：

<Grid.RowDefinitions>
<RowDefinition Height="0.618*"/>
<RowDefinition Height="0.328*"/>
</Grid.RowDefinitions>

既然分割就分割到底，把第一行再黄金分割一下，让文本显示在第一行的黄金分割线处。因此需要在Grid-LayoutRoot里新建一个Grid-MessagePanel。将其分成两行，同时将TextBlock-HelloText放在里面。代码如下所示：

<Grid x:Name="MessagePanel" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="0.382*"/>
<RowDefinition Height="0.618*"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Center" Name="HelloText" VerticalAlignment="Top" FontSize="40" Grid.Row="1" />
</Grid>

最后将Button-HelloWP放在Grid-LayoutRoot的第二行：

<Button Content="HelloWp" HorizontalAlignment="Center" Name="ShowMessage" VerticalAlignment="Top" Click="ShowMessage_Click" Grid.Row="1" FontSize="30" />

调试运行，结果如下图所示，我感觉是比之前的舒服点……

以上是最简单的布局实验，其实称不上布局，只是排列而已。不过对WP的页面设计多点了解，之后参照Programming Windows Phone 7学习使用更多的控件。
最后是总结图：