先来一张网格布局的图（照着BILIBILI 某个视频敲的）
image.png
Grid
网格布局，从上图我们可以看，一般可以用来划分大块的区域
行定义 Grid.RowDefinitions
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition />
</Grid.RowDefinitions>
</Grid>
这是一个占位两行网格，第一格高度为 100（这里一般指的是相素PX）
Height属性
- 默认不设值的时候，会按行数平均分
- Auto 自动，会根据内容自动计算需要的高度
- 0.8* 按比例分配（第一个默认的情况，其实就是都是 1*）
列定义 Grid.ColumnDefinitions
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
</Grid>
两列的网格布局实现，第一列的宽度为200
Width属性同上Height
网格划分
真实的空间，不单单只划分列或者行，还可以两者组合
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.8*"/>
<RowDefinition/>
<RowDefinition />
</Grid.RowDefinitions>
<!-- 此外添加网格里的内容填充-->
</Grid>
上面代码的布局
网格内容关联及合并单元格
指定关联单元格
- 指定第几列 Grid.Column
- 指定第几行 Grid.Row
比如，我们如何将第一行，第二个单元格背景改为蓝色
<!-- 指定 填充的颜色为 Grid.Column="1"( 第二列)，行为默认0（第1行 Grid.Row="0"）-->
<Border Background="#0396FF" Margin="10" Grid.Column="1"/>
小插曲(以下内容是错误的，这里展示自己的一个思维过程 )：
一开始以为某一列的内容，直接在当前ColumnDefinition 的标签里填充，类型于HTML 元素，一层包一层
<ColumnDefinition >
<Button>
</ColumnDefinition >
这样不就可以不用另外指定了。
BUT！ Too young,too simple,sometimes naive
正常我们一般写GUI都是这样，但我们现在是网格，网格定位必须有行有列，上面的写法只能单独指定行里的内容或者列里的内容
合并单元格
- 列合并 Grid.ColumnSpan
- 行合并 Grid.RowSpan
<Border Background="#623AA2" Grid.Row="1" Grid.ColumnSpan="3" Margin="10"/>
综合例子
顶图的例子代码如下
<Window x:Class="WPFGridLayout.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFGridLayout"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<!-- 最外层Grid -->
<Grid>
<!-- 分为二行-->
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition />
</Grid.RowDefinitions>
<!-- 设置第一行背景 -->
<Border Background="#28C76F"/>
<!--将第二行分为两列 -->
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Background="#92FFC0" Grid.Column="0" Margin="0,10,10,10"/>
<!--将第二列 再 用 Grid划分 -->
<Grid Grid.Column="1">
<!-- 分为 5 列 -->
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!-- 分为3行 -->
<Grid.RowDefinitions>
<RowDefinition Height="0.8*"/>
<RowDefinition/>
<RowDefinition />
</Grid.RowDefinitions>
<!-- 设置第一行5列的背景 -->
<Border Background="#F8D800" Margin="10"/>
<Border Background="#0396FF" Margin="10" Grid.Column="1"/>
<Border Background="#EA5455" Margin="10" Grid.Column="2"/>
<Border Background="#7367F0" Margin="10" Grid.Column="3"/>
<Border Background="#32CCBC" Margin="10" Grid.Column="4"/>
<!-- 将第二行(ROW=1)，第0列开始的三列合并为一个背景 -->
<Border Background="#623AA2" Grid.Row="1" Grid.ColumnSpan="3" Margin="10"/>
<!-- 将第二行(ROW=1)，第3列开始的两列合并为一个背景 -->
<Border Background="#F55555" Grid.Row="1" Grid.Column="3" Grid.ColumnSpan="3" Margin="10"/>
<Border Background="#52E5E7" Grid.Row="2" Grid.ColumnSpan="3" Margin="10"/>
<Border Background="#79F1A4" Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="3" Margin="10"/>
</Grid>
</Grid>
</Grid>
</Window>
我们可以发现，我们的标签最后有 三层 </Grid>，所以Grid 是可以无限套娃（嵌套，一层套一层）。
另：
Border
貌似是个装饰产物，可以用以设置控件的背景，目前还不是很了解
