Windows 8实例教程：布局控制

Windows 8实例教程：布局控制2014-07-03与传统应用类似，Windows store应用允许开发人员通过布局控件管理应用UI。本篇将讨论Windows8布局设计控制。

Windows 8布局控件

在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.RowDefinitions><RowDefinition /><RowDefinition /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions></Grid>

在以上代码中，Grid.RowDefinitions和Grid.ColumnDefinitions集合使用RowDefinition和ColumnDefinition定义两行两列的Grid，这里使用附加属性RowDefinitions描述行列集合。（附加属性（Attached Property）XAML重要概念,详细请参考 XAML实例教程系列）

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

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="0" Grid.Column="0" /></Grid>

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