W04合理布局，是程序界面构造的起点，Grid控件会助你一臂之力

Grid网格

一、概述

程序的一个窗口，就像一片空旷的土地，你拿这片空地干什么？是盖房？还是种地？不管干什么，我们所要做的第一件事通常都是规划和布局，Grid（网格）控件就是WPF中基本的布局工具，它将程序窗口的用户区用虚拟或真实的网格线划分成由若干行和若干列组成的矩形区域，在这些矩形的区域里，我们可以放置其它的控件，从而构造出合理的布局。

二、具体来讲，我们可以通过Grid控件的以下属性来定义网格

1. RowDifinitions行定义集合，用它来包含若干个行定义

<Grid.RowDefinitions>…</Grid.RowDefinitions>

2. RowDefinition行定义，定义某一行的特征<RowDefinition/>，每一个标签定义一行。其属性有：

（1）Height行高，语法格式为Height="xxx"

（2）MaxHeight最大行高

（3）MinHeight最小行高

<RowDefinition Height="xxx"/>

3. ColumnDifinitions列定义集合，用它来包含若干列

<ColumnDifinitions>…</ ColumnDifinitions>

4. ColumnDefinition列定义，定义某一列的特征，每一个标签定义一列。其属性有：

（1）Width列宽

（2）MaxWidth最大列宽

（3）MinWidth最小列宽

<ColumnDefinition Width="100"/>

5. ShowGridLines="True" Grid面板网格线默认被设计成不可见的，但可将Grid.ShowGridLines属性设置为True，使得网格线得以显示，从而更清晰的观察Grid面板，方便调试，可以更准确地控制Grid面板如何选择列宽和行高。

三、行高和列宽的定义方式

1.定义语法

（1）行高定义——用属性Height="xxx"中的xxx来定义

<RowDefinition Height="xxx"/>

（2）列宽定义——用属性Width="xxx"中的xxx来定义

<ColumnDefinition Width="100"/>

2.定义方式

Grid的行高和列宽可采用固定、自动、按比列三种方式定义

（1）第一种，固定行高或列宽，——xxx值为一个确定的数字，使用设备无关单位准确地设置尺寸，就是给一个实际的数字，但通常将此值指定为整数。这是最无用的策略，因为这种策略不够灵活，难以适应内容大小和容器大小的改变，而且难以处理本地化。

（2）第二种，自动行高或列宽，——xxx值为Auto，就是自动取放置在网格中的控件的高度为行的高度，或取控件的宽度为列的宽度。所需的最小值，每行和每列的尺寸刚好满足需要，这是最有用的尺寸设置方式。

（3）第三种，按比例设置行高或列宽，——xxx值为*或N*（其中N为整数），所有*前面的整数之和Z表示将一行的全部高度或一列的全部宽度分成Z分，每一行所占的高度即是Z分之几；例如：网格若有两行，两行的高度都是*，那么两行将平分整个高度；一个2*，一个*，则前者占剩余全部宽度的2/3，后者占1/3；依此类推，这是对所有行和列的标准设置。

通常，为了获得最大的灵活性，可混合使用这三种尺寸设置方式。例如，创建几个自动设置尺寸的行，然后通过按比例设置尺寸的方式让最后的一行或两行充满剩余的空间，这通常是很有用的。

例（1）：设置100设备无关单位的绝对宽度：

<ColumnDefinition Width="100"></ColumnDefinition>

例（2）使用自动尺寸设置方式，需要使用Auto值

<ColumnDefinition Width="Auto"></ColumnDefinition>

例（3）使用按比例尺寸设置方式，需要使用星号(*)

<ColumnDefinition Width="*"></ColumnDefinition>

四、举个例子，我们可以通过以下代码构造出一个三行三列的网格

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition/>

<ColumnDefinition/>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition/>

<RowDefinition/>

<RowDefinition/>

</Grid.RowDefinitions>

</Grid>

五、附加属性，合理放置其它控件

网格画好了，那其它控件该如何放置呢？这就要用到Grid控件的两个附加属性。所谓附加属性就是网格附加在放置于其内部的控件上的属性，用以表示该控件在整个网格中的位置。“附加属性”不好理解？其实很简单，附加属性就像我们看电影时或坐火车时的座位号一样，你买票之前，你是没有座位的，你买了票了，票上就写明了座位号，你对号入座就可以了。以下是几个附加属性。

1. Grid.Row="xxx"，其中xxx为控件所在行的索引号，第一行为0，第二行为1，以此类推。

2. Grid.Column="xxx"，其中xxx为控件所在列的索引号，第一列为0，第二列为1，以此类推。

3. Grid.RowSpan="2"我要占两行

4. Grid.ColumnSpan=“3”我要占三列

好了，规划好了+布局，你就可以摆放控件，构造你漂亮的用户界面了。