第一章已经简单介绍过这个容器，这一节详细介绍。
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章。分析完毕。