WPF教程（二十八）Grid

Grid面板也许是最复杂的面板类型了。Grip可以包含多行多列。你可以定义每一行的高度和每一列的宽度，通过一个像素值、可用空间的百分比或者自动分配这三种方式。自动分配会根据内容自动调整行高和列宽。Grip一般用于其他面板无法实现的情形，譬如如你需要很多列而且需要联合其他面板。

在Grid中的所有控件都会被最大化，同时一个叠一个放置。这是Grid最基本的形式。

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
                <Button>Button 1</Button>
                <Button>Button 2</Button>
        </Grid>
</Window>

如上所示，第二个按钮占据了顶部的位置，于是就看不到第一个按钮了。这个场景基本不会用到，因此我们来划分区域，这正是Grid擅长的。我们使用ColumnDefinitions和RowDefinitions来实现。

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
                <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button>Button 1</Button>
                <Button Grid.Column="1">Button 2</Button>
        </Grid>
</Window>

在这个例子，我们将空间划分成相等的两列，宽度使用一个“*”。第二个按钮中，我使用了一个附加属性来使其置于第二列（0是第一列，1是第二列）。也可以把这个附加属性加在第一个按钮上，但是，第一个按钮被自动分配到第一列去了。

两个按钮占据了整个可用空间，这是Grid在排列其子控件时默认的形式。这是通过设置HorizontalAlignment和VerticalAlignment来实现的。

某些场景下，你希望控件只占据其所需的空间，或者控制它们在Gird中的位置。最简单的办法就是给你要操作的控件设置HorizontalAlignment和VerticalAlignment。以下是上例的升级版：

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
                <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>               
                <Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
                <Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>
        </Grid>
</Window>

从截屏可以看到，在第一列中，第一个按钮被放置到顶部并居中的位置；在地儿列中，第二个按钮被放置到靠右并居中的位置。