WPF高级教程（五）专题：Grid

前言

Grid是WPF中最强大的布局容器，值得我们专门使用一个专题来了解Grid的使用。

使用

行列定义

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
</Grid>

行列宽高设置

行列的宽高有三种设置方式，我们按照推荐使用的顺序进行说明：

• 自动尺寸设置（最常用，最推荐）

  <RowDefinition Height="Auto"></RowDefinition>
  

• 按比例设置（自适应性好）

  // 下面的高度是上面的二倍
  <RowDefinition Height="*"></RowDefinition>
  <RowDefinition Height="2*"></RowDefinition>
  

• 设置绝对宽高（死板，不灵活不推荐）

  <RowDefinition Height="30"></RowDefinition>
  

可以拖动的分割条 GridSplitter

GridSplitter 使得用户可以动态的调整Grid每行列的尺寸，比如电脑的资源管理器的左右布局。

使用GridSplitter有下面一些指导原则：

• 使用GridSplitter的时候建议预留一行或者一列来放置GridSplitter对象，预留的这行列的宽高设置成Auto
• 每个GridSplitter拖动的时候，改变的是整行或者整列的尺寸，不是说GridSplitter放在哪个格子中就只改这个各自的尺寸，这点有点类似于拖动excel行列线
• 结合上面的特性，在使用GridSplitter的时候，最好让他穿越整个行列，即设置RowSpan，如果不这样做，那么可拖动的范围只有行那一点，但是效果还是整行或者整列移动

属性说明：

• ShowPreview属性。这个属性决定了在拖动分割条的时候，尺寸是立即变化还是先显示一个虚线的预览
• DragIncrement属性可以让分割条的移动幅度更大，设置为30，从平滑的拖动，变为每30像素跳一下，类似于挡位的效果。
• Background属性可以设置分割条的填充方式以改变分割条的外观

设置GridSplitter的方式：

• 设置竖分割条需要将VerticalAlignment设置为Stretch，Width设置为一个固定值（让这个分割条有点宽度以可见），HorizontalAlignment设置为Center，由于这是属性的默认值，所以不用显式的指定
• 设置横向分割条需要将HorizontalAlignment设置为Stretch，Height设置为固定值，VerticalAlignment设置为Center，由于这是属性的默认值，所以不用显式的指定

举例说明：

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition MinWidth="100"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition MinWidth="50"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
    <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
    <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
    <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
    <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch"
                  HorizontalAlignment="Center" ShowsPreview="False"></GridSplitter>
</Grid>

两个Grid尺寸联动 共享尺寸组

如果两个Grid，其中一个Grid的一行或者一列尺寸改变的时候，另一个Grid的尺寸也得相应改变，就需要使用到共享尺寸组ShareSizeGroup

使用：

• 包含两个Grid的外层控件必须设置 IsSharedSizeScope以确定共享尺寸范围
• 共享的两个行列的宽高需要设置 SharedSizeGroup = “labelName”
• ShareSizeGroup是在行列定义的时候指定

举例说明：

<Grid Grid.IsSharedSizeScope="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"></RowDefinition>
        <RowDefinition Height="50"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" SharedSizeGroup="label1"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition MinWidth="50"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
        <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
        <GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Width="3" VerticalAlignment="Stretch"
                  HorizontalAlignment="Center" ShowsPreview="True" DragIncrement="30"></GridSplitter>
    </Grid>
    <Grid ShowGridLines="True" Grid.Row="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" SharedSizeGroup="label1"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition MinWidth="50"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="0" Grid.Column="2" Margin="3">Right</Button>
        <Button Grid.Row="1" Grid.Column="0" Margin="3">Left</Button>
        <Button Grid.Row="1" Grid.Column="2" Margin="3">Right</Button>
    </Grid>
</Grid>

注意事项和技巧

• 可以将Grid.ShowGridLine设置为True来让Grid显示分割线，从而方便开发的时候观察Grid面板的分割
• 布局舍入。比如将99像素的Grid分成两半，那么因为像素不能整分会导致模糊的问题。解决办法是：

  <Grid UseLayoutRounding="True">
  

  进行布局舍入，内容会被对齐到最近的像素边界，消除了模糊。
• 如果不给GridSplitter预留一行或者一列也可以使用，但是如果GridSplitter跟其他内容共享一个单元格，就要处理他们之间的相互关系使得其中的内容和GridSplitter不相互重叠