上一次我们介绍到了WrapPanel和DockPanel，而在WPF中，功能最强大的是GridPanel面板容器。

Grid面板是将元素分割到网格中，往往可以完成其他布局做不到的效果，在设置Grid网格时，需要给出创建网格的行和列，然后再放置控件元素时指定需要放置的行列号，下面我们主要根据六个方面介绍Grid面板

1、创建Grid面板与简单使用

首先我们新建一个WPF程序，在默认的Grid布局下使用属性元素的方法定义Grid的行和列，并且分别加入对应的行数和列数

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

然后我们加入一些组件，将这些组件放置在指定行和指定列上

<Button Content="LeftTop" Grid.Row="0" Grid.Column="0"/>
<Button Content="CenterTop" Grid.Row="0" Grid.Column="1"/>
<Button Content="RightTop" Grid.Row="0" Grid.Column="2"/>
<Button Content="LeftBottom" Grid.Row="1" Grid.Column="0"/>
<Button Content="CenterBottom" Grid.Row="1" Grid.Column="1"/>
<Button Content="RightBottom" Grid.Row="1" Grid.Column="2"/>

效果可见下图：

2、调整行和列

有时候我们需要调整Grid面板中行和列的大小，一般有三种方法：

1）直接设置行列的固定大小

在需要改变大小的行或者列，设置属性特性Width或者Height，我们以设置第一行第一列均为50像素为例：

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"> </RowDefinition>
            <RowDefinition> </RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Content="LeftTop" Grid.Row="0" Grid.Column="0"/>
        <Button Content="CenterTop" Grid.Row="0" Grid.Column="1"/>
        <Button Content="RightTop" Grid.Row="0" Grid.Column="2"/>
        <Button Content="LeftBottom" Grid.Row="1" Grid.Column="0"/>
        <Button Content="CenterBottom" Grid.Row="1" Grid.Column="1"/>
        <Button Content="RightBottom" Grid.Row="1" Grid.Column="2"/>
    </Grid>

2）自动设置尺寸大小

根据其包含子元素的大小来自动调整行列的宽度

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"> </RowDefinition>
            <RowDefinition> </RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Content="LeftTop" Grid.Row="0" Grid.Column="0"/>
        <Button Content="CenterTop" Grid.Row="0" Grid.Column="1"/>
        <Button Content="RightTop" Grid.Row="0" Grid.Column="2"/>
        <Button Content="LeftBottom" Grid.Row="1" Grid.Column="0"/>
        <Button Content="CenterBottom" Grid.Row="1" Grid.Column="1"/>
        <Button Content="RightBottom" Grid.Row="1" Grid.Column="2"/>
    </Grid>

3）按照比例设置

每行或者每列按照某中比例大小来确定尺寸，我们以第一行与第二行的高度比为1：5为例

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"> </RowDefinition>
            <RowDefinition Height="5*"> </RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Content="LeftTop" Grid.Row="0" Grid.Column="0"/>
        <Button Content="CenterTop" Grid.Row="0" Grid.Column="1"/>
        <Button Content="RightTop" Grid.Row="0" Grid.Column="2"/>
        <Button Content="LeftBottom" Grid.Row="1" Grid.Column="0"/>
        <Button Content="CenterBottom" Grid.Row="1" Grid.Column="1"/>
        <Button Content="RightBottom" Grid.Row="1" Grid.Column="2"/>
    </Grid>

3、布局舍入

当我们使用上面的比例设置行列大小时，假设窗口的高度为400像素，按照第一行和第二行为1：5的比例，那么第一行高度的像素为400/(1+5)=66.67，那么像素如果为小数，在第一行和第二行交界处会产生模糊的图像，此时我们就需要用到布局舍入这项功能。

我们将Grid的属性特性UseLayoutRounding为True，就可以解决边缘模糊的问题

4、跨越行和列

一般子元素是固定放在某行某列的，如果需要该元素跨越行列放置，占据多个行列放置，那么我们一般对Grid.ColumnSpan或者Grid.RowSpan进行设置，我们将第二行第二列的按钮跨2列显示：

    <Grid UseLayoutRounding="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"> </RowDefinition>
            <RowDefinition Height="5*"> </RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Content="LeftTop" Grid.Row="0" Grid.Column="0"/>
        <Button Content="CenterTop" Grid.Row="0" Grid.Column="1"/>
        <Button Content="RightTop" Grid.Row="0" Grid.Column="2"/>
        <Button Content="LeftBottom" Grid.Row="1" Grid.Column="0"/>
        <Button Content="CenterBottom" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"/>
        <!--<Button Content="RightBottom" Grid.Row="1" Grid.Column="2"/>-->
    </Grid>

5、分割窗口

如果需要将窗口分割为两个部分，通过中间的分割线来拖动调整两个子窗口的大小。

我们可以通过给Grid面板添加一个GridSplitter对象来实现这个功能。我们以第一列和第二列添加分割条为例。

我们多添加一列，将第二列空出来放置GridSplitter对象，然后对GridSplitter设置属性：

    <Grid UseLayoutRounding="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"> </RowDefinition>
            <RowDefinition Height="5*"> </RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Content="LeftTop" Grid.Row="0" Grid.Column="0"/>
        <Button Content="CenterTop" Grid.Row="0" Grid.Column="2"/>
        <Button Content="RightTop" Grid.Row="0" Grid.Column="3"/>
        <Button Content="LeftBottom" Grid.Row="1" Grid.Column="0"/>
        <Button Content="CenterBottom" Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="2"/>
        <GridSplitter Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch" HorizontalAlignment="Center"/>
        <!--<Button Content="RightBottom" Grid.Row="1" Grid.Column="2"/>-->
    </Grid>

下面是分割条拖动调整窗口大小的效果：

6、共享尺寸组

当两个组件需要有相同的尺寸时，我们可以利用组件的ShareSizeGroup属性进行操作，将两个组件的ShareSizeGroup设置为相同的字符串，那么这两个组件的尺寸就共享一组数据，其大小也就一致了

WPF学习笔记——6）Grid面板