Grid网格

XAML中的五个布局元素为Grid：网格、DockPanel：泊靠式面、StackPanel栈式面板、WrapPanel：自动折叠行面板、Canvas：画布。

Grid顾名思义就是网格。他将子控件放在一个个定义好的格子里面，整齐匹配。

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="79*"/>
            <ColumnDefinition Width="136*"/>
            <ColumnDefinition Width="205*"/>
            <ColumnDefinition Width="97*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="37*"/>
            <RowDefinition Height="54*"/>
            <RowDefinition Height="109*"/>
            <RowDefinition Height="119*"/>
        </Grid.RowDefinitions>
</Grid>

使用Grid先要向ColumnDefinitions和RowDefinitions属性中添加一定数量的ColumnDefinitions和RowDefinitions元素。

Grid元素可以嵌套使用。在不使用Grid.Row和Grid.Coumn属性时，默认在第一格。Row和Coumn分别对应纵横位置，使用索引值0开始，所取的值大于格子数量会显示在最后一个格子里。Grid.RowSpan和Grid.ColumnSpan属性设置占用纵横格子的个数，及是合并都少个格子。

<Button Grid.Column="1" Content="我在第二列" />
<Button Grid.Row="1" Content="我在第二行" />
<Button Grid.Column="2" Grid.Row="1" Grid.ColumnSpan="2" Content="我横向占两个格子" />
<Button Grid.Column="1" Grid.Row="2" Grid.RowSpan="2" Content="我纵向占两个格子" />

格子的宽高取值有三种，一是固定的大小，二是Auto根据子控件自动计算大小，三是比例，比例就是在固定值的后面加 * 号若不写值则是其他剩余区域

<DockPanel Grid.Column="2" Grid.Row="2" Grid.ColumnSpan="2" Grid.RowSpan="2">
<Button DockPanel.Dock="Left" Content="ButtonLeft"></Button>
<Button DockPanel.Dock="Top" Content="ButtonTop"></Button>
<Button DockPanel.Dock="Right" Content="ButtonRight"></Button>
<Button DockPanel.Dock="Bottom" Content="ButtonBottom"></Button>
<Button  Content="ButtonTop"></Button>
</DockPanel>

布局元素之间可以嵌套使用。