专栏首页dino.c的专栏[UWP]XAML中的响应式布局技术

[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这个状态触发器,它以MinWindowWidthMinWindowHeight未条件,根据页面宽度或高度进入设定好的不同状态(通常来说只使用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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [WPF自定义控件库] 自定义控件的代码如何与ControlTemplate交互

    WPF有一个灵活的UI框架,用户可以轻松地使用代码控制控件的外观。例设我需要一个控件在鼠标进入的时候背景变成蓝色,我可以用下面这段代码实现:

    dino.c
  • [WPF 自定义控件]自定义一个“传统”的 Validation.ErrorTemplate

    数据绑定模型允许您将与您Binding的对象相关联ValidationRules。 如果用户输入的值无效,你可能希望在应用程序 用户界面 (UI) 上提供一些有...

    dino.c
  • [UWP]为番茄钟应用设计一个平平无奇的状态按钮

    OnePomodoro应用里有个按钮用来控制计时器的启动/停止,本来这应该是一个包含“已启动”和“已停止”两种状态的按钮,但我以前在WPF和UWP上做过太多St...

    dino.c
  • 由一道让99%的程序员抓狂的招聘认知题说起认知测验的合理性设置

    近年来,因为人才管理被越来越多的企业重视,使用测评工具对候选人进行筛选成为了很多公司提高招聘效率、提升招聘精准率的手段,但是也存在着一些令人哭笑不得的情况。

    二号姬
  • 「R」R 修改全局选项

    R语言的选项设定可以从全局范围影响当前的会话,我们调用getOption()查看选项值,使用options()修改它。

    王诗翔呀
  • GCAC70 14.3 Winternitz one-time signatures

    参考资料:https://www.freebuf.com/column/169190.html

    安包
  • Zabbix发送带附件的邮件

    Zabbix告警由于内容主体有诸多限制,很难传达所有的告警信息,可以通过添加附件的方式将详细信息发送给接收人,比如说要发送的文件存在apache文件服务器中,这...

    我是李超人
  • ActiveMQ架构设计与最佳实践,需要一万字

    ActiveMQ是最常用、特性最丰富的消息中间件,通常用于消息异步通信、削峰解耦等多种场景,是JMS规范的实现者之一。功能丰富到什么程度呢?支持大部分消息协议,...

    xjjdog
  • Python之路-基础数据类型之字符串

    我们在日常生活中会遇到很多类似的情况,例如吃饭排队叫号,在学校时会有学号,工作时会有工号,这些就是一种能保证唯一准确的手段,在计算机中也是一样,它就叫索引,也叫...

    py3study
  • Scala学习一

    1.集合操作练习 //创建一个List val lst0 = List(1,7,9,8,0,3,5,4,6,2) //将lst0中每个元素乘以10后生成一个新的...

    sparkle123

扫码关注云+社区

领取腾讯云代金券