WPF笔记(2.4 Grid)——Layout

原文:WPF笔记(2.4 Grid)——Layout

第一章已经简单介绍过这个容器，这一节详细介绍。
Grid一般是用表格(Grid.Row 和Grid.Column )的，比StackPanel更细致一些，但是，这么玩很麻烦，先横着竖着定义一大堆，然后把元素指定其表格位置，即插入数据，和我们平常习惯的HTML表格不太一样，甚至更麻烦了。
原因如下：Html空单元格要放占位符，这样会放很多；Grid玩法则是用什么元素就指定单元格位置，不用的单元格默认是空，不用指定。另外，Grid单元格中的多个控件可以按照Z轴堆叠，这个顺序是由控件在xaml上的出现顺序决定的。

Grid列宽的定义：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="50" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="2*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

第一种，固定长度——宽度不够，会裁剪，不好用。单位pixel。
第二种，自动长度——自动匹配列中最长元素的宽度。
第三种，比例长度——*表示占用剩余的全部宽度；两行都是*，将平分剩余宽度；像上面的一个2*，一个*，表示前者2/3宽度。

单元格合并，1.4已经介绍过，这里强调一点，虽然一个控件A跨越2个单元格，但是并未改变原来Grid的所有单元格，也就是说，这是两个对象Grid和控件A，互相不影响。那么，另一个控件B仍然可以使用这两个单元格中的一个，最后根据A与B的先后出现顺序会有重叠效果。这是不同于html单元格合并概念的。这段话是我自己想的，多精辟啊，一针见血。终于对xaml有点感觉了。

接下来讲的是多个Grid共享宽度组的技术。smaple讲的是把grid放入ScrollViewer中，但是一旦滚动ScollBar，grid的Title会跟着一起滚动，为了做到滚动时Title定住不动，要做两个Grid：一个放Title；另一个放主体，并嵌套进ScrollViewer中。这样滚动问题解决了，另一个问题又出现了，就是两个Grid的字段对不齐，于是要使用shared-size组。

    <DockPanel Grid.IsSharedSizeScope="True">
        <Grid DockPanel.Dock="Top">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
                <ColumnDefinition Width="Auto" />

//省略若干行代码

            <Border Grid.Column="0" Grid.Row="0" BorderThickness="1"
                    Background="LightGray" BorderBrush="Gray">
                <TextBlock>Title</TextBlock>
            </Border>
            <Border Grid.Column="1" Grid.Row="0" BorderThickness="1"
                    Background="LightGray" BorderBrush="Gray">
                <TextBlock>Location</TextBlock>
            </Border>
            <Border Grid.Column="2" Grid.Row="0" BorderThickness="1"
                    Grid.ColumnSpan="2"
                    Background="LightGray" BorderBrush="Gray">
                <TextBlock>Rank</TextBlock>
            </Border>

            <FrameworkElement Grid.Column="3"
               Width="{DynamicResource {x:Static SystemParameters.ScrollWidthKey}}" />

        </Grid>

        <ScrollViewer>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
                </Grid.ColumnDefinitions>

//省略若干行代码

            </Grid>
        </ScrollViewer>
    </DockPanel>

首先，在DockPanel 设置共享：Grid.IsSharedSizeScope="True"。这样做的目的是使得DockPanel外的同名列不受影响。
DockPanel中两个容器，Grid和ScrollViewer，前者设置标题，后者内嵌Grid，装载内容行(红色字体)。
先说Grid，有4列，接着，设置第二列第三列为Shared-size Group，第一列宽度为*(自适用)；第四列的增加是因为width=*对SharedSize无效，所以增加这一列为ScrollBar占位：
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
                <ColumnDefinition Width="Auto" />

Rank跨占了2列，为了兼容多生成的第四列，
            <Border Grid.Column="2" Grid.Row="0" BorderThickness="1"
                    Grid.ColumnSpan="2"
                    Background="LightGray" BorderBrush="Gray">
                <TextBlock>Rank</TextBlock>
            </Border>
接着，设置Grid第4列为滚动条宽度 ，于是因为Rank跨占了2列，所以Rank宽度为自己最大宽度+滚动条宽度，这样就保证了后面的都对齐了，从而前面第一列也对齐了：
          <FrameworkElement Grid.Column="3"
               Width="{DynamicResource {x:Static SystemParameters.ScrollWidthKey}}" />

再说ScrollViewer容器，在内嵌的Grid中设置Shared-size Group与第一个Grid中的列相对应：
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />

注：这里用到了DynamicResource ，而不是StaticResource，具体技术见第6章。

分析完毕。