XAML响应式布局设计

概述

XAML是eXtensible Application Markup Language的英文缩写，相应的中文名称为可扩展应用程序标记语言，它是微软公司为构建应用程序用户界面而创建的一种新的描述性语言。XAML提供了一种便于扩展和定位的语法来定义和程序逻辑分离的用户界面，而这种实现方式和ASP.NET中的"代码后置"模型非常类似。XAML是一种解析性的语言，尽管它也可以被编译。它的优点是简化编程式上的用户创建过程，应用时要添加代码和配置等。

响应式布局的概念是一个页面适配多个终端及不同分辨率。在针对特定屏幕宽度优化应用 UI 时，我们将此称为创建响应式设计。WPF设计之初响应式设计的概念并不流行，那时候大部分网页设计师都按着宽度960像素的标准设计。到了UWP诞生的时候响应式布局已经很流行了，所以UWP提供了很多响应式布局的技术，这篇文章简单总结了一些响应式布局常用的技术。

1. 传统的XAML如何适配不同分辨率

所谓的传统，是指在响应式设计没流行前XAML就已经存在的应对不同分辨率的技术，毕竟桌面客户端常常也调整窗体的大小，有些人还同时使用两个不同分辨率的屏幕。以我的经验来说以下这些做法可以使UI有效应对分辨率改变：

• 使用相对定位代替决定定位
• 使用*和Auto代替具体尺寸（除了间距）
• 使用WrapPanel代替StackPanel
• 不要忘记使用ScrollViewer

不同的DPI设定、不同的本地化字符串长度都可能使整个页面布局乱掉。而且和网页不同，WPF窗体默认没有提供ScrollViewer，所以千万不能忘记。在桌面客户端合理使用以上技术可以避免客户投诉。但UWP主打跨平台，它需要更先进（或者说，更激进）的技术。

2. 响应式设计技术

微软的官方文档介绍了UWP中响应式设计常用的6个技术，包括重新定位、调整大小、重新排列、显示/隐藏、替换和重新构建，具体可见以下网站：

响应式设计技术 - UWP apps   Microsoft Docs

3. AdaptiveTrigger

AdaptiveTrigger是UWP中一种最常用的响应式布局技术。VisualStateManager用于管理UI的视觉状态，可以在UI上设置多个视觉状态，然后用VisualStateManager.GoToState在这些状态间切换，了解自定义控件的开发者对这点应该都不陌生。UWP提供了AdaptiveTrigger这个状态触发器，它以MinWindowWidth和MinWindowHeight未条件，根据页面宽度或高度进入设定好的不同状态（通常来说只使用MinWindowWidth，同时使用Height和Width做条件很容易产生混乱，而且大部分情况下响应式布局都会使用垂直滚动条所以对高度不关心。）在下面的示例中StackPanel默认使用垂直排列，当页面的宽度超过720像素时改为水平排列。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <!--VisualState to be triggered when window width is >=720 effective pixels.-->
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>

                <VisualState.Setters>
                    <Setter Target="myPanel.Orientation"
                            Value="Horizontal" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <StackPanel x:Name="myPanel"
                Orientation="Vertical">
        <TextBlock Text="This is a block of text. It is text block 1. "
                   Style="{ThemeResource BodyTextBlockStyle}" />
        <TextBlock Text="This is a block of text. It is text block 2. "
                   Style="{ThemeResource BodyTextBlockStyle}" />
        <TextBlock Text="This is a block of text. It is text block 3. "
                   Style="{ThemeResource BodyTextBlockStyle}" />
    </StackPanel>
</Grid>

使用AdaptiveTrigger可以做到前一节中提到的UWP中响应式设计常用的6个技术，除了UWP自带的AdaptiveTrigger，也可以自定义StateTriggerBase，这将在下一篇文章中介绍。

4. NavigationView

UWP中部分控件已经实现了响应式行为， 最典型的就是NavigationView。可以使用 PaneDisplayMode 属性配置不同的导航样式或显示模式。默认情况下，PaneDisplayMode 设置为 Auto。在 Auto 模式下，导航视图会进行自适应，在窗口狭窄时为 LeftMinimal，接下来为 LeftCompact，随后在窗口变宽时为 Left。

XAML Controls Gallery就是一个很好的结合NavigationView的响应式布局示例：

5. 定制布局

如果AdaptiveTrigger需要设置的属性太多，倒不如直接切换UI，最简单的做法是整个显示/隐藏，例如这样：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>

                <VisualState.Setters>
                    <Setter Target="NormalView.Visibility"
                            Value="Collapsed" />
                    <Setter Target="LargelView.Visibility"
                            Value="Visible" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid x:Name="NormalView">
        <!--some xmal-->
    </Grid>
    <Grid x:Name="LargelView"
          Visibility="Collapsed">
        <!--some xmal-->
    </Grid>
</Grid>

这种时候MVVM的优势就体现出来了，因为VIEW和VIEWMODEL解耦了，VIEW随便换，而且整个UI显示隐藏说不定比多个小模块独自改变性能更好。说到性能，UWP的很多场景都为已经死了多年的WindowsWobile考虑了性能，更不用说现在的桌面平台，所以做UWP不需要太过介意性能，尤其是已经在WPF上培养出小心翼翼的习惯的开发者，UWP的性能问题等真的出现了再说。

除了使用显示隐藏，UWP还可以使用限定符名称指定CodeBehind对应的XAML文件，这有点像是自适应应用的话题。使用格式如下：

[pageName] .DeviceFamily- [qualifierString] .xaml

如果要用在文件夹，格式如下：

DeviceFamily- [qualifierString]

要更灵活些，可以根据条件跳转到不同的页面：

if (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Tablet")
{
    rootFrame.Navigate(typeof(MainPage_Tablet), e.Arguments);
}
else
{
    rootFrame.Navigate(typeof(MainPage), e.Arguments);
}

虽然示例代码这样写，其实现在除了桌面几乎没有其它平台了，所以大部分情况下还是根据当前尺寸跳转。

6. compact size

正如前面所说，既然已经不需要其它平台，那UWP的响应式布局大部分情况都是为了应对尺寸问题，Windows UI Library还提供了一个紧凑的主题用于小尺寸UI（需要安装Microsoft.UI.Xaml的Nuget包）：

<Page.Resources>
    <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Page.Resources>

private void Standard_Checked(object sender, RoutedEventArgs e)
{
    ContentFrame.Navigate(typeof(SampleStandardSizingPage), null, new SuppressNavigationTransitionInfo());
}

private void Compact_Checked(object sender, RoutedEventArgs e)
{
    ContentFrame.Navigate(typeof(SampleCompactSizingPage), null, new SuppressNavigationTransitionInfo());
}

7. ViewBox

ViewBox可以根据自身大小放大或缩小它的Content元素，某些情况下它是WPF和UWP平台的终极响应式设计解决方案，因为WPF/UWP元素都是矢量元素所以大部分元素都可以无损缩放（当然会有像素对不齐的情况），所以偷懒的话就可以使用ViewBox