UWP 开发初阶 Chapter 4 - 使用 AdaptiveTrigger 进行自适应布局的设计-CSDN博客

上篇回顾

上篇我们讲到了一些基础控件的使用和常用属性，比如 TextBlock Button ，并且介绍了控件的对齐方式。

本篇正文

什么是自适应？

所谓的自适应，就是当你的软件界面在变大或变小的过程中，软件内部的布局也会随之发生改变，而不是一部分被遮盖了。

⭐举个栗子便于大家理解：

先回顾一下：

Grid 可以分行和分列，同时 Grid 等等容器可以嵌套使用

我写了这么一串代码，其中我将一个 Grid 分成了两列，而其中左边一列放了一个背景为蓝色的 Grid ，右边一列放了一个背景为棕色的 Grid （虽然看起来不像棕色），代码如下：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    
    <Grid Background="Blue"/>

    <Grid Background="Brown" Grid.Column="1"/>
</Grid>
复制代码

效果图如下：

但如果，我想让它在窗口宽度小于一个值的时候，变成如下图所示的排布：

这时候，我们引入 VisualState 和 AdaptiveTrigger !

我们接下来的思路是将主 Grid 分成两行两列，假设软件窗口宽度大于 800px 的时候，中间的两个小 Grid 分别占据左右一个 column ，同时横跨两行。而当软件窗口小于 800px 的时候，中间的两个小 Grid 分别占据上下一个 row，同时齐跨两列。

回忆一下：

RowSpan 和 ColumnSpan 可以用于横跨多行

这时候我们先将大 Grid 分成两行两列，同时我们这时候先写当窗口小于 800px 的时候的情形，代码如下：

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Background="Blue" Grid.ColumnSpan="2"/>

        <Grid Background="Brown" Grid.Row="1" Grid.ColumnSpan="2"/>
</Grid>
复制代码

接下来我们引入 VisualStateManager ，完整代码如下：

<Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Grid Background="Blue" Grid.ColumnSpan="2"/>

        <Grid Background="Brown" Grid.Row="1" Grid.ColumnSpan="2"/>
</Grid>
复制代码

然后在 <VisualState> 中添加 AdaptiveTrigger ，语法如下：

<VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="800"/>
                    </VisualState.StateTriggers>
                </VisualState>
            </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
复制代码

解释：其中 MinWindowWidth 就表示你软件窗口的临界值，大于这个值的时候就触发事件。可选的 AdaptiveTrigger 还有好几种，大家可以去看一看。

这时候我们要去写 Setter ，顾名思义，我们触发了一个事件，那我们要干嘛呢？当然就要干这件事情了！代码如下：

<VisualState.StateTriggers>
     <AdaptiveTrigger MinWindowWidth="800"/>
</VisualState.StateTriggers>

<VisualState.Setters>
                        
</VisualState.Setters>
复制代码

接下来，我们应该在 Setters 内编写 Setter 了，但是我们相当于要告诉编译器，我们要把这个 Grid 怎么怎么样，但是编译器分不清你说的是哪个 Grid ，所以这时候我们要给 Grid 起名字，通过 Name 这个 property。代码如下：
```
<Grid Name="Grid1" Background="Blue" Grid.ColumnSpan="2"/>
<Grid Name="Grid2" Background="Brown" Grid.Row="1" Grid.ColumnSpan="2"/>
复制代码
```
我把他们分别叫做 Grid1 和 Grid2，你可以根据你自己喜好命名，但是正式开发中请使用更容易区分的名字！
然后，我们可以写 Setter 了，完整的如下：
```
<VisualState.Setters>
    <Setter Target="Grid1.(Grid.ColumnSpan)" Value="1"/>
    <Setter Target="Grid1.(Grid.RowSpan)" Value="2"/>
    <Setter Target="Grid2.(Grid.Row)" Value="0"/>
    <Setter Target="Grid2.(Grid.Column)" Value="1"/>
    <Setter Target="Grid2.(Grid.RowSpan)" Value="2"/>
</VisualState.Setters>
复制代码
```
这里面 Value 就表示我们将其对应的属性设定为的值，这几行代码分别表示着一下的意思：
当窗口大小大于 800 px时：
- 将 Grid1 的列从原来的横跨两行改为横跨一行
- 将 Grid1 的行从原来的齐跨一行改为两行
- 将 Grid2 放在大 Grid 的第一行
- 将 Grid2 放在大 Grid 的第二列
- 将 Grid2 的行从原来的齐跨两行变为一行
**注意：**我之所以没改动 Grid1 在大 Grid 中的行和列的位置，是因为我之前没去设定它，那它就默认在第一行第一列，而在这个题目的背景下，我们只需要改变它的 RowSpan 和 ColumnSpan。
最后，编译！

发现实现了我们想要的！！