WPF入门10 - WPF布局之Grid面板

Gird面板是WPF中功能最强大的布局容器。很多实用其他布局控件能完成的功能，用Grid面板也能实现。Grid面板也是将窗口分割成更小区域的理想工具。实际上，由于Grid面板十分常用，因此在Visual Studio中为窗口添加新的XAML文档时，会自动添加Grid标签作为顶级容器，并嵌套在Window根元素中。

Grid面板将元素分割到不可见的行列网格中。尽管可在一个单元格中放置多个元素，但在每个单元格中放置一个元素通常更合理。当然，在Grid单元格中的元素本身也可能是另一个容器，该容器组织它所包含的一组控件。

需要两个步骤来创建基于Grid面板的布局。首先，选择希望使用的行和列的数量。然后，为每个包含的元素指定恰当的行和列，从而在合适的位置放置元素。

Grid面板通过使用对象Grid.ColumnDefinitions和Grid.RowDefinitions集合来创建网格和行。

<Window x:Class="GridLayout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Margin="5" Grid.Row="0" Grid.Column="0">1,1</Button>
        <Button Margin="5" Grid.Row="0" Grid.Column="1">1,2</Button>
        <Button Margin="5" Grid.Row="0" Grid.Column="2">1,3</Button>
        <Button Margin="5" Grid.Row="1" Grid.Column="0">2,1</Button>
        <Button Margin="5" Grid.Row="1" Grid.Column="1">2,2</Button>
        <Button Margin="5" Grid.Row="1" Grid.Column="2">2,3</Button>
    </Grid>
</Window>

每个元素必须被明确地放在对应的单元格中。可在单元格中放置多个元素，或让单元格保持为空。此处存在例外情况。如果不指定Grid.Row属性，面板会假定该属性的值为0.对于Grid.Column属性也是如此。因此，在Grid面板的第一个单元格中放置元素时可不指定这两个属性。

一、调整行和列

Grid面板可更改每一行和每一列的尺寸设置方式。
绝对设置尺寸方式。【Width="100"】
自动设置尺寸方式。【Width="Auto"】
按比例设置尺寸方式。【Width=""】【Width="2"】

二、布局舍入

<Grid UseLayoutRounding="True">

WPF会确保布局容器中的所有内容对齐到最近的像素边界，从而消除了所有模糊问题。

三、跨越行和列

使用两个附加属性使元素跨越多个单元格，这两个附加属性是RowSpan和ColumnSpan。这两个属性使用元素将会占有的行数和列数进行设置。

<Button Margin="5" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2">1,1</Button>
<Button Margin="5" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2">1,1</Button>

四、分割窗口

每个Windows用户都见过分割条——能将窗口的一部分与另一部分分离的可拖动分割器。例如，当使用Windowes资源管理器时，会看到一系列文件夹(在左边)和一系列文件(在右边)。可拖动它们之间的分割条来确定每部分占据窗口的比例。

在WPF中，分隔条由GridSplitter类表示，它是Grid面板的功能之一。通过为Grid面板添加GridSplitter对象，用户就可以改变行和列的尺寸。

GridSplitter对象必须放在Grid单元格中。可与已经存在的内容一并放到单元格中，这时需要调整边距设置，并将预留行或列的Height或Width属性的值设置为Auto。

GridSplitter对象总是改变整行或整列的尺寸(而非改变单个单元格的尺寸)。为使GridSplitter对象的外观和行为保持一致，需要拉伸GridSplitter对象使其穿越整行或整列，而不是将其限制在单元格中。为此，可使用前面介绍过的RowSpan或ColumnSpan属性。

GridSplitter对象很小不易看见。为了使其更可用，需要哦为其设置最小尺寸。对于竖直分隔条，需要将VerticalAlignment属性设置为Stretch(使分隔条填满区域的整个高度)，并将Width设置为固定值。对于水平分隔条，需要设置HorizontalAlignment属性来拉伸，并将Height属性设置为固定值。

GridSplitter对齐方式还决定了分隔条是水平的（用于改变行的尺寸）还是竖直的（用于改变列的尺寸）。对于水平分隔条，需要将VerticalAlignment属性设置为Center（这也是默认值），以指明拖动分隔条改变上面行和下面行的尺寸。对于竖直分隔条，需要将HorizontalAlignment属性设置为Center，以改变分隔条两侧列的尺寸。

五、共享尺寸组

Grid面板包含一个行列集合，可以明确地按比例确定行和列的尺寸，或根据其子元素确定行和列的尺寸。还有另一种确定一行或一列尺寸的方法——与其他行和列的尺寸相匹配。这是通过称为“共享尺寸组”的特性实现的。

共享尺寸组的目标是保持用户界面独立部分的一致性。

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

六、UniformGrid面板

UniformGrid面板不需要(甚至不支持)预先定义的列和行。相反，通过简单地设置Rows和Columns属性来设置其尺寸。每个单元格始终具有相同的大小，因为可用的空间被均分。最后，元素根据定义的顺序被放置到适当的单元格中。UniformGrid面板中没有Row和Column附加属性，也没有空白单元格。

<Window x:Class="GridLayout.UniformGridWindows"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="UniformGridWindows" Height="300" Width="300">
    <UniformGrid Rows="2" Columns="2">
        <Button>Top Left</Button>
        <Button>Top Right</Button>
        <Button>Bottom Left</Button>
        <Button>Bottom Right</Button>
    </UniformGrid>
</Window>

可以快速的构建视频分隔。