美文网首页UWP开发与讨论
UWP 开发初阶 Chapter 4 - 使用 Adaptive

UWP 开发初阶 Chapter 4 - 使用 Adaptive

作者: TotoroQ | 来源:发表于2018-07-17 20:01 被阅读0次

    上篇回顾

    上篇我们讲到了一些基础控件的使用和常用属性,比如 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>
    

    效果图如下:

    [站外图片上传中...(image-c9b66f-1531828821223)]

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

    [站外图片上传中...(image-12c4fd-1531828821223)]

    这时候,我们引入 VisualStateAdaptiveTrigger !

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

    回忆一下:

    RowSpanColumnSpan 可以用于横跨多行

    1. 这时候我们先将大 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>
      
    2. 接下来我们引入 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>
      
    3. 然后在 <VisualState> 中添加 AdaptiveTrigger ,语法如下:

      <VisualStateManager.VisualStateGroups>
                  <VisualStateGroup>
                      <VisualState>
                          <VisualState.StateTriggers>
                              <AdaptiveTrigger MinWindowWidth="800"/>
                          </VisualState.StateTriggers>
                      </VisualState>
                  </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
      

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

    4. 这时候我们要去写 Setter ,顾名思义,我们触发了一个事件,那我们要干嘛呢?当然就要干这件事情了!代码如下:

      <VisualState.StateTriggers>
           <AdaptiveTrigger MinWindowWidth="800"/>
      </VisualState.StateTriggers>
      
      <VisualState.Setters>
                              
      </VisualState.Setters>
      
    5. 接下来,我们应该在 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,你可以根据你自己喜好命名,但是正式开发中请使用更容易区分的名字!

    6. 然后,我们可以写 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。

    7. 最后,编译!

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

    习题

    下图是我之前开发的一个简单 UWP 软件,它的主界面会随着窗口宽度的变化而变化,如下图:

    [站外图片上传中...(image-1bd7b0-1531828821223)]

    上图是窗口宽度小于 820px 时候的显示效果。

    [站外图片上传中...(image-ec2d8d-1531828821223)]

    上图是窗口宽度大于 820px 时候的显示效果。

    大家就把上面的复杂界面简单化,看作数个 Grid,然后加以操作,快去试试看吧!

    总结

    通过这节课的学习,大家初步了解了适应性布局的编写方式。习题部分略有一些难度,但总体思路想法完全一致。下一篇我们将会讲一下关于页面导航的相关知识。

    下篇见!

    相关文章

      网友评论

        本文标题:UWP 开发初阶 Chapter 4 - 使用 Adaptive

        本文链接:https://www.haomeiwen.com/subject/qiwgpftx.html