WPF:(三) Grid布局

一：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>

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

二：Grid行和列

<span style="font-size:14px;"><Window x:Class="WpfTutorialSamples.Panels.TabularGrid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TabularGrid" Height="300" Width="300">
    <Grid>
                <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="2*" />
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="1*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                        <RowDefinition Height="2*" />
                        <RowDefinition Height="1*" />
                        <RowDefinition Height="1*" />
                </Grid.RowDefinitions>
                <Button>Button 1</Button>
                <Button Grid.Column="1">Button 2</Button>
                <Button Grid.Column="2">Button 3</Button>
                <Button Grid.Row="1">Button 4</Button>
                <Button Grid.Column="1" Grid.Row="1">Button 5</Button>
                <Button Grid.Column="2" Grid.Row="1">Button 6</Button>
                <Button Grid.Row="2">Button 7</Button>
                <Button Grid.Column="1" Grid.Row="2">Button 8</Button>
                <Button Grid.Column="2" Grid.Row="2">Button 9</Button>
        </Grid>
</Window></span>

一共9个按钮，排布在三行三列的表格中。我们又使用到了带“”号的宽度，这次还加了一个数字。第一行的高度是2，第一列的宽度的也是2*。它表示它们所占的空间两倍于1的行和列（1和*是一样的）。

我使用了附加属性Grid.Row和Grid.Column将控件放入对应的网格里，同样的，在第一行或者第一列的控件可以省略这两个属性。如果不省略，那么定义成0也是一样的。省略的好处是你不需要在打字了，当然如果为了整体好看，也可以加上，完全看你的选择。

三：Grid单元格

目前为止，我们只使用了带*号的宽和高，它指定了一行或者一列应该占据整个空间的比例。其实还有其他方法指定列宽和行高：绝对像素和自动宽高。下面的例子混合了这三种方法：

<span style="font-size:14px;"><Window x:Class="WpfTutorialSamples.Panels.GridUnits"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridUnits" Height="200" Width="400">
        <Grid>
                <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="100" />
                </Grid.ColumnDefinitions>
                <Button>Button 1</Button>
                <Button Grid.Column="1">Button 2 with long text</Button>
                <Button Grid.Column="2">Button 3</Button>
        </Grid>
</Window></span>

该例中第一个按钮是*号宽度，第二个自动宽度，第三个是固定的100宽度。

结果可以看到，第二个按钮只占据了文本全部显示所需要的宽度。第三个按钮固定了100个像素的宽。第一个按钮则占据了剩余的空间。

在Grid里面，带*号宽度的列，会自动占据那些没有被绝对宽度或者自动宽度所占据的空间。通过改变窗口大小，这个就很明显了。


第一个截屏中，Grid保证了后面两个按钮的空间，而第一个按钮则被挤压到不足以显示其文本。第二个截屏中，后面两个按钮尺寸保存不变，而第一个按钮则被显著拉大。

这个在设计一个对话框时非常有用。譬如，设想要创建一个简单的联系方式，用户需要输入名字、邮箱地址和一条说明。前两个字段往往设置成一个固定高度，而说明这个字段则需要留出尽可能多的空间来输入一段长文本。下一章，我们就来尝试建立一个联系方式，使用Grid及其各种宽高的列和宽。