UWP小书 - 网格布局

:::tip
本章涉及知识点：

Grid布局定义
Grid嵌套
:::

从本章开始，我们开始接触布局控件，涉及布局控件主要有三个，分别是Grid、StackPanel和RelativePanel，其余诸多的高级布局控件，大多是在这三者的基础上建立起来的。

本章我们先讲Grid控件。

Grid布局原理

Grid，中文称之为网格，实际上我们叫它表格也不无不可。就实际表现来看，它跟我们的Excel表，课程表这些表格几乎相同。所以用Grid来布局，我们就像是在玩填格子的游戏。

因此在Grid布局中，你可以让分处不同“格子”的两个元素无限逼近，但只要不设置Margin为负值，那么它们永远不会重叠。

借由此，你所见到的对得很齐的布局（比如计算器的按键区域），基本都是由Grid布局生成的。

如何创建Grid布局

既然Grid是表格，那么它就必然有两个属性：

行（Row）
列（Column）

设置行列，有了交叉，才会产生“格子”，有了格子，才有我们布局的基础。

本节课的第一个小目标，就让我们来画一个微软的LOGO吧，标准的田字格。

微软LOGO，两行两列，一个田字，我们可以按如下方式定义行列：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
</Grid>

这些标签都挺好懂的，直接翻译过来就能记住：

<网格>
    <网格的行定义集合>
        <行定义 />
        <行定义 />
    </网格的行定义集合>
    <网格的列定义集合>
        <列定义 />
        <列定义 />
    </网格的列定义集合>
</网格>

注意这里的Grid.xxx语法，这是上节课讲XAML时提到过的附加属性的一种。通过这种方式，在Grid内部定义行与列。这样，但凡在该Grid容器内的控件都可以通过行与列的坐标来定位自己的位置。

画一个微软LOGO

我们现在定义好了一个两行两列的网格，按照咱们的设想，接下来分别给这四个格子注入不同的颜色就可以了。

如何加上颜色呢？这里我们用一种控件，名为Rectangle，翻译一下就是矩形。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Red" Grid.Row="0" Grid.Column="0" Width="50" Height="50"/>
    <Rectangle Fill="LimeGreen" Grid.Row="0" Grid.Column="1" Width="50" Height="50"/>
    <Rectangle Fill="DodgerBlue" Grid.Row="1" Grid.Column="0" Width="50" Height="50"/>
    <Rectangle Fill="Orange" Grid.Row="1" Grid.Column="1" Width="50" Height="50"/>
</Grid>

:::tip
当你使用Rectangle时，你必须设定其宽高，即Width和Height属性，否则矩形无法显示，Fill表示其填充颜色，Rectangle控件是没有Background属性的。
:::

当你写好之后，运行应用，你可能会很惊讶的发现，这四个矩形天各一方了。

这是什么原因呢？咱们来分析一波：

Grid控件有一个默认的特性，那就是占据父容器的全部剩余空间，由于我们的Grid是Page标签下的唯一元素，所以这个Grid控件是充满整个页面的，这一点，在Grid上添加一个Background即可知。

而Grid分割出来的单元格，其实也继承了它们老爹的特性，都会完全充满各自的一亩三分地。

所以，倘若你在屏幕中间画一个十字，你会发现我们定义的矩形都位于各自单元格的中央（矩形默认居中显示）。

这当然和我们预想的情况不符，而这不符的原因，就是因为控件的默认显示方式。这就为我们解决问题提供了不同的思路，我们可以改变矩形的显示方式，不让其居中显示。我们也可以改变Grid的显示方式，不让其充盈整个屏幕。

怎么做？让我们来试试：

改变矩形的显示方式

Rectangle默认居中显示，回想一下前面课程的内容，当我们要让一个控件居中显示时，我们做了什么？

我们更改了控件的HorizontalAlignment和VerticalAlignment。现在咱们不要矩形居中，那也就改回来。

根据不同矩形所处的位置，我们分别为其设置如下水平和垂直排布方式：

<Rectangle Fill="Red" Grid.Row="0" Grid.Column="0" Width="50" Height="50" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
<Rectangle Fill="LimeGreen" Grid.Row="0" Grid.Column="1" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Bottom"/>
<Rectangle Fill="DodgerBlue" Grid.Row="1" Grid.Column="0" Width="50" Height="50" HorizontalAlignment="Right" VerticalAlignment="Top"/>
<Rectangle Fill="Orange" Grid.Row="1" Grid.Column="1" Width="50" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top"/>

这时候再运行，你会发现它们都聚在一起了。

改变网格的显示方式

改变矩形的水平和垂直分布似乎有些繁琐了，每个矩形都设置了一次。如果能直接对容器进行设置，不让它占据整个页面，而只是包裹住其内容，那么四个矩形不久自然而然地聚在一起了吗？

改变Grid的显示方式也很简单，我们可以说，Grid的默认HorizontalAlignment和VerticalAlignment都是Stretch（可以理解为充盈），我们把它们都改成Center即可。

再运行应用，你会发现它们都聚在一起了。

改变行列属性

回头看看我们在Grid中定义的行和列，我们只定义了，但是什么都没写，现在我们可以给行和列分别设置宽高：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
</Grid>