WPF Grid Layout

先来一张网格布局的图（照着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
貌似是个装饰产物，可以用以设置控件的背景，目前还不是很了解