[UWP]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：

8. 参考

采用 XAML 的响应式布局 - UWP apps Microsoft Docs

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

响应式设计的屏幕大小和断点 - UWP apps Microsoft Docs

导航视图 - UWP apps Microsoft Docs

AdaptiveTrigger Class (Windows.UI.Xaml) - Windows UWP applications Microsoft Docs

原文出处：https://www.cnblogs.com/dino623/p/responsive-layouts-with-xaml.html