Marvin's Blog【程式人生】

Ability will never catch up with the demand for it

31 Mar 2020

UWP设计文档阅读笔记(六):布局相关

Design and UI > Layout

Page layout

在UWP应用中,一个Page常常有导航、命令以及内容元素。应用可以有多个Page,通过Frame组织在一起。Frame的直接上级就是跟视窗操作相关的Window。

如何在不同的页面中导航,时页面布局中首先需要考虑的事情。有两个常用的模式:左部导航或者顶部导航。Navigation design basics for UWP apps

对于超过五个页面的,建议使用左部导航nav pane。左部导航通常有个菜单键,可以用来控制导航栏的显示大小(收起还是折叠)。

顶部导航适合页面比较少的情况,和左部导航不同的是,顶部导航不可以收起。

对于每个页面,通常会有一个命令栏command bar,来放置页面常用的命令。命令栏可以放置在页面的顶部或者底部。

不同的页面,对内容的需求是不一样的。有几种常见的内容排布方式:

  • 初始页:也就是应用打开时显示的页面
  • 集合页:将内容以集合的方式显示,通常采用listview和gridview来呈现
  • 主辅页:页面分为主辅部分,主部显示集合,辅部显示细节master/details
  • 表单页:页面由多个输入控件form组成,主要用于收集数据

Sample apps列举了一些应用示例。

Screen sizes and breakpoints

从设计上UWP应用需要适应不同的屏幕尺寸,最基本的,要考虑以下屏幕尺寸(也叫breakpoints尺寸分隔)

  • Small(不超过640px)
  • Medium(641px到1007px)
  • Large(1008px往上)

值得注意的是,因为有标题栏这些部件的存在,屏幕尺寸不直接等于应用内容尺寸。

分隔点更详细介绍:

  • Small,常见的窗口大小:320x569、360x640、480x854
    • 屏幕尺寸在4英寸到6英寸的手机
    • 或者20英寸到65英寸的电视
  • Medium,常见的窗口大小:960x540
    • 7英寸到12英寸的大屏手机或者平板
  • Large,常见的窗口大小:1024x640 1366x768,1920x1080
    • 13英寸或者更大的计算机屏幕

虽然电视的屏幕很大,可能也有很高的物理分辨率。但是由于观看距离远,所以采用的逻辑分辨率比较低,保证App在远处操作的时候容易被看清。

关于Windows自带的DPI缩放,可以在 Settings > Display > Scale and layout中查看。

一些推荐:

  • Small
    • 将页面的左右外边距设置成12px,跟窗口边缘产生一定差距
    • 将命令栏图标放置在页面底部
    • 用单栏或者单区域显示内容
    • 将搜索栏折叠成图标,采用点击触发
    • 如果采用了navigation pane ,将其设置成收缩模式(只显示图标)
    • 如果采用了主辅结构,建议使用stacked presentation mode
  • Medium
    • 将页面的左右外边距设置成24px
    • 将命令栏图标放置在页面顶部
    • 最多使用两栏或者双区域显示
    • 显示搜索框
    • 如果采用了navigation pane ,将其设置成silver mode
    • 建议对TV采用特殊考虑TV experiences
  • Large
    • 将页面的左右外边距设置成24px
    • 将命令栏图标放置在页面顶部
    • 最多使用三栏或者三区域显示
    • 如果采用了navigation pane ,将其展开成最大化模式

Continuum for Phones,可以把手机连到一个屏幕上,所以手机可以使用的屏幕大小会改变。

Responsive design techniques

UWP支持响应式设计以适应不同设备:

  • 在屏幕尺寸吃紧的情况下,将导航部分收起
  • 更好匹配设备,比如使用设备上的摄像和感知设备
  • 重排UI控件,方便用户输入

很多UWP controls已经自带响应式设计。

响应式设计通常有几个技术方法:

  • Reposition,也就是重排控件
  • Resize,调整控件本身或者边距的大小
  • Reflow,增减显示区域或者栏数
  • Show/hide,显示或者隐藏控件
  • Replace,将控件替换成对等的,但是对屏幕空间需求不一样的控件
  • Re-architect,切换页面架构,比如从单页切换到主辅

UWP controls and patterns

Responsive layouts with XAML

XAML为响应式设计提供了大量的支持。

XAML支持静态设计,以及采用布局部属和面板来达成流动式设计。

布局部属可以用来控制元素的大小和位置,流动式设计的要点之一就是不要指定绝对的大小和位置,而是通过百分比或者填充的方式来动态变化。

比如说元素的Height和Width两个部属可以设置成绝对像素值,也可以设置成【自动】或者【等分】。【自动】意味着从元素的内容来推断元素的大小;【等分】意味着从父元素的尺寸来推断自身的大小。

【等分】用符号’‘表示,可以让一个元素具有更多的等分,比如将其设置为’2',意味着获得两个【等分】。

下面是一些例子:

  • Column_1的尺寸是Auto,表示从子内容推断大小
  • Column_2的尺寸是’*',表示它会获得一个等分的大小
  • Column_3的尺寸是44,意味着它会获得44个逻辑像素
  • Column_4的尺寸是’2*',表示它会获得两等分

在运行的时候,通过ActualHeight和Width可以获取具体获得的像素值。通过MinWidth/MaxWidth,以及MinHeigh/MaxHeight可以对元素的具体大小加以限制。

通过HorizontalAlignment(Left、Center、Right、Stretch)和VerticalAlignment(Top,Center,Bottom、Stretch)可以设置应用的对其。

可以将元素的Visibility设置成Visible 或者Collapsed,来控制其是否显示。这个部属的效果会扩展到子控件。

逐个设置元素的部属会比较麻烦,可以通过样式来同时给多个元素设置属性。参考Styling controls

响应式设计是以面板为基础的。面板是一类UI元素,比如Canvas, Grid, RelativePanel或者StackPanel。面板的作用是把子内容聚合起来,以适配一种显示方式。下面是不同面板类的对比:

  • Canvas,让你可以自行定位其子元素
    • 元素在Canvas里面是采用绝对定位,使用Canvas.Top以及Canvas.Left这两附着部属来指定
    • 元素的层叠可以使用Canvas.ZIndex来指定、
    • HorizontalAlignment/VerticalAlignment如果指定为Stretch,那么就会被忽略
    • 元素的大小如果没有指定,那么则采用他们内容的大小
    • 超出边框的元素不会被裁剪,允许溢出
    • 元素的内容不会被限制在边界内
  • Grid,网格化管理子内容,可以方便重排内容
    • 通过Grid.Row和Grid.Column可以指定子元素所在的网格
    • 元素可以跨多个行或者列,通过Grid.RowSpan和Grid.ColumnSpan指定
    • 支持HorizontalAlignment/VerticalAlignment的Stretch值
    • 超出范围的子元素会被裁剪
    • 元素内容被限定在区域内,超过会显示滚动条
  • RelativePanel
    • 子元素相对于边界,或者相对于彼此排布
    • Stretch对齐会被忽略,除非设置允许Stretch (比如一个元素与左右两个边界对齐)
    • 子内容超出会被裁剪,会显示滚动条
  • StackPanel
    • 元素排成一列
    • 在指定走向的垂直方向上,支持Stretch对齐
    • 元素超出显示区域会被裁剪
    • 元素大小可以超过范围,也就是不显示滚动栏。如果需要显示滚动栏,需要显示设置元素大小。
  • VariableSizedWrapGrid
    • 和Grid一样,不过支持自动换行(列),当达到设定的最大行(列)数的时候
    • 和StackPanel一样,需要设置走向
    • Stretch对齐不可用,尺寸由ItemHeight 和ItemWidth决定。如果没有设置,那么由第一个子元素的大小决定。
    • 裁剪子元素,超出显示滚动条

一个例子:Responsive techniques sample

面板在逻辑上将多个子元素或者控件组织在了一起。合理使用面板可以方便地自动调整UI元素的大小、位置甚至是流向。如果需要更多调整,那么可能需要用到【可视状态】。

在响应式设计里面,当你的UI窗口到达一定大小之后,或许你需要调整布局设置。【可视状态】可以用来帮你定义不同大小状态下的布局设置。

首先,要有一个AdaptiveTrigger来设置窗口大小的变化临界值,然后一个VisualState定义一个跟UI元素跟这个AdaptiveTrigger相对应的布局设置。多个VisualState可以以VisualStateGroup 的方式在一个VisualStateManager 中管理。

调用VisualStateManager.GoToState可以在代码中切换【可视状态】。可以侦听窗口的SizeChanged 事件来决定什么时候切换【可视状态】。在Set visual states in code可以看到一个具体的例子。

Windows没有给应用提供方法来检查当前正常运行的设备是什么设备。

在Win10之前,在【可视状态】修改布局设置,需要通过Storyboard。从Win10开始,可以用简化的Setter语法,并且可以在XAML中使用StateTrigger Set visual states in XAML markup中带有一个例子。

使用StateTrigger的时候,要保证VisualStateManager.VisualStateGroups在页面的第一个子元素上触发。

当设置附着部属的时候,需要在附着的部属名字上加上括号:

<!-- Set an attached property using ObjectAnimationUsingKeyFrames. -->
<ObjectAnimationUsingKeyFrames
    Storyboard.TargetProperty="(RelativePanel.AlignHorizontalCenterWithPanel)"
    Storyboard.TargetName="myTextBox">
    <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
</ObjectAnimationUsingKeyFrames>

<!-- Set an attached property using Setter. -->
<Setter Target="myTextBox.(RelativePanel.AlignHorizontalCenterWithPanel)" Value="True"/>

可以从StateTrigger 扩展并创建自定义的触发器。可以定义这样一种触发器,当输入框获得焦点的时候,修改输入框的颜色。自定义触发器的例子:State triggers sample

可以在StateTrigger里面使用样式,参考Visual states and styles

针对不同设备的UI差别可能很大,有时候为每个设备使用单独的UI定义文件更方便。比如针对不同的设备加载不同的Page。

在Visual Studio增加一个XAML VIEW,只需为项目增加新的条目,并选择条目类型为XAML template type中的XAML View。这个XAML View默认不带有背靠代码,并且名字中带有设备名称(参考 ResourceContext.QualifierValues),具体命名的格式为: [pageName].DeviceFamily-[qualifierString].xaml,例子:

  • MainPage.DeviceFamily-Desktop.xaml
  • MainPage.DeviceFamily-Tablet.xaml

也可以用目录来区分:

  • DeviceFamily-Desktop/MainPage.xaml
  • DeviceFamily-Tablet/MainPage.xaml

当设备类型不匹配时,默认d的MainPage.xaml会启用

也可以创建带背靠代码的XAML template type中的Blank page,但是这样你的代码逻辑要选择何时加载何种页面:

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

Tailored multiple views sample例子采用GetIntegratedDisplaySize来判断加载的Page类型。

show multiple views

略过

Alignment, margin, padding

大部分UI元素都是从FrameworkElement 继承。FrameworkElement 定义了很多跟尺寸、对齐、外边距、内边距等可以影响布局的部属。

尺寸相关:

  • Height和Width指定乐元素的大小,默认值为NaN。你可以设置为绝对的值(以effective pixels衡量),或者设置为自动大小或者按比例分配。
  • ActualHeigh和ActualWidth这两个只读部属提供运行时的真实大小。在SizeChanged事件中,这两个值会随着改变。注意RenderTransform 不会改变这两个值。
  • MinWidth/MaxWidth和MinHeigh/MaxHeigh用来给元素大小增加约束
  • FontSize和其他文字部属用来控制文字元素的显示。文字元素没有具体指定的大小,但是有ActualHeight和ActualWidth。

对齐相关:

  • HorizontalAlignment和VerticalAlignment 指定横向对齐和竖向对齐的
  • 默认的对齐方式时Stretch,这导致元素的上下左右边界和容器的大小对齐。如果Heigh和Width指定了数值,那么默认的Stretch就会被替换成Center。有一些元素,比如按键,其样式会覆写默认的Stretch值。
  • HorizontalContentAlignment和VerticalContentAlignment 指定元素内容的对齐方式
  • 对齐方式会影响裁剪效果。比如左对齐的元素,如果超出了实际容器大小(ActualWidth),那么其右边超出的部分会被裁剪。
  • 文本元素使用TextAlignment来指定对齐。建议不要修改默认的左对齐,更多信息参考Typography

外边距相关

  • 外边距处于元素周围,但是其实不属于元素,并不会影响元素的ActualHeight和ActualWidth。外边距上触发的事件(比如点击)不属于对应元素。
  • 外边距可以统一指定,比如Margin="20"代表所有方向的外边距都是20;也可以单独指定,Margin="0,10,5,25“指定了左上右下的外边距
  • 元素间的外边距可以合并,如果两个元素的外边距都是10,那么这两个元素靠在一起的话,间隔是20
  • 外边距可以为负值,但是会引起意想不到的想过,使用的时候要谨慎。
  • 外边距属于优先级较次的约束,其他约束比如容器大小会先使用上。另外,由于外边距的存在,可能会导致元素的尺寸缩为零。

内边距

  • 内边距,用于在元素内部指定内容到边框的距离。和外边距不一样,内边距不是FrameworkElement的部属。不同的类可以定义自己的内边距。
  • Control.Padding,被所有控件继承,如果控件没有内容,那么内边距不会生效。
  • Border.Padding,从边框(BorderThickness/BorderBrush指定)到Child元素的间距
  • ItemsPresenter.Padding,
  • TextBlock.Padding和RichTextBlock.Padding,应用在文本元素上。值得注意的是,文本元素没有背景,所以无法显现内边距。建议使用Block 容器的Margin部属。

一些建议:

(本篇完)

Categories

Tags

comments powered by Disqus