Windows 8布局控件教程

核心提示： 在Windows Store应用设计中，布局控件是控制对象位置和尺寸的，Windows 8布局控件教程，由于Windows Store应用不仅仅面向桌面操作系统，而且还需要适应移动设备的部署，例如，定义行高50像素，所以在设计时，往往需要考虑到不同的分辨率或者硬件屏幕尺寸标准下应用布局的适配性

 在Windows Store应用设计中，布局控件是控制对象位置和尺寸的，由于Windows Store应用不仅仅面向桌面操作系统，而且还需要适应移动设备的部署，所以在设计时，往往需要考虑到不同的分辨率或者硬件屏幕尺寸标准下应用布局的适配性，最大程度的保持设计灵活性是应用设计原则重要环节之一。根据功能性不同，Windows 8为开发人员提供丰富的布局控件，以达到应用布局设计需求。其中包括：

Grid

Canvas

StackPanel

WrapGrid

VariableSized WrapGrid

Virtualizing StackPanel

从MSDN开发文档中可以看出，以上布局控件皆派生自Panel类，而Panel类可以装载不同类型的控件作为子控件。

而熟悉Silverlight，WPF和Windows Phone的开发人员会发现一些布局控件是相同的。下面我们快速浏览这些布局控件的效果以及使用方法，

Grid

Grid是类似于HTML表格的一种布局控件，由于其灵活性高，所以在应用设计中经常被使用到。一个Grid控件包含一个Row（行）和Column（列）的集合。开发人员可以将不同的对象控件布置在不同的行列中，达到位置控制的效果。

基本代码：

<Grid x:Name="myGrid"></Grid>

表格定义代码：

<Grid x:Name="myGrid">

<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>

在以上代码中，Grid.RowDefinitions和Grid.ColumnDefinitions集合使用RowDefinition和ColumnDefinition定义两行两列的Grid，这里使用附加属性RowDefinitions描述行列集合。

后台代码声明行和列集合 ：

Grid.RowDefinitions = new List<RowDefinitions>();

Grid.ColumnDefinitions = new List<ColumnDefinitions>();
完成表格的定义，将控件对象放在指定的表格位置，例如在第一行第一列添加一个TextBlock文本框，代码如下：

<Grid x:Name="myGrid">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock x:Name="tbName" Grid.Row="1" Grid.Column="1" />
</Grid>

从代码中可以看出，因为在TextBlock中，没有实现Row和Column的属性，所以放置控件对象到表格是通过附加属性Grid.Row和Grid.Column实现的。通过附加属性和依赖属性的概念，可以理解通过Grid可以存取其所有的子控件。

在完成控件的位置控制后，下面来看看尺寸控制，Grid有三种常见尺寸控制方法：

1. 绝对尺寸控制, 该方法是直接设置固定的宽度和高度值，其局限性比较大，例如，定义行高50像素，列宽150像素的表格，代码如下：

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>