Fork me on GitHub

UWP-AdaptiveUI

发表于 | 分类于 | 阅读次数:

Week 2

这周的需求如下:

  1. 界面设计

    完成 MainPage、NewPage 两个界面的设计

  2. Adaptive UI
    • 当窗口宽度小于800时，只显示原本在界面左侧的列表部分，底部导航栏只显示 Ad d图标
    • 窗口宽度大于800时，显示完整界面
    • 窗口宽度小于600时，列表项中的图片不显示

对于界面设计，肯定是自己设计的最好看，就不多赘述了。就来讲讲 Adaptive UI。

Adaptive UI

需求写的很清楚，实现不同窗口宽度下的不同UI显示。这个实现主要依赖于 VisualStateManager

VisualStateManager

首先来看看 MSDN 上对于 VisualStateManager 的描述：

The VisualStateManager enables you to specify:

  1. states for a control
  2. the appearance of a control when it is in a certain state.
  3. the appearance of a control when a control changes states.

解释一下，VisualStateManager 的功能有两个：

  1. 管理控件状态。
  2. 管理控件转换状态。

来看看 VisualStateManager 的基本XAML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="XXX">
        <VisualState x:Name="State001">
            <VisualState.Triggers>
                <AdaptiveTriggers .../>
            </VisualState.Triggers>
            <VisualState.Setters>
                <Setter Target="..." Value=""/>
                <Setter Target="..." Value=""/>
            </VisualState.Setters>
            <Storyboard>
                <Animation_A1 .../>
                <Animation_B1 .../>
                ...
            </Storyboard>
        </VisualState>
        <VisualState x:Name="State001">
            <VisualState.Triggers>
                <AdaptiveTriggers .../>
            </VisualState.Triggers>
            <VisualState.Setters>
                <Setter Target="..." Value=""/>
                <Setter Target="..." Value=""/>
            </VisualState.Setters>
            <Storyboard>
                <Animation_A2 .../>
                <Animation_B2 .../>
                ...
            </Storyboard>
        </VisualState>
        ...
    </VisualStateGroup>
    ...
</VisualStateManager.VisualStateGroups>
  1. VisualStateManager
    • VisualStateGroups
      • VisualStateGroup
        • VisualState
          • StateTriggers，用于指定当前 VisualState 的限制条件。
          • Setters，用于指定 UIElement 的状态。
          • Storyboard，用于指定控件向此状态转换时的外观动画。

那么对于这个 Adaptive UI，很简单就可以实现了:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!--Adaptive UI Settings-->
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="Width_0">
            <VisualState.Setters>
                <Setter Target="Right_Part.(UIElement.Visibility)" Value="Collapsed"></Setter>
                <Setter Target="Left_Part.(ColumnSpan)" Value="2"></Setter>
                <Setter Target="image.(Visibility)" Value="Collapsed"></Setter>
            </VisualState.Setters>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="1"></AdaptiveTrigger>
            </VisualState.StateTriggers>
        </VisualState>
        <VisualState x:Name="Width_600">
            <VisualState.Setters>
                <Setter Target="Right_Part.(UIElement.Visibility)" Value="Collapsed"></Setter>
                <Setter Target="Left_Part.(ColumnSpan)" Value="2"></Setter>
            </VisualState.Setters>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="600"></AdaptiveTrigger>
            </VisualState.StateTriggers>
        </VisualState>
        <VisualState x:Name="Width_800">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="800"></AdaptiveTrigger>
            </VisualState.StateTriggers>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

那么，Adaptive UI 就做完啦~

Visual Blend 可以了解一下，有助于 UWP 的 UI 开发