系列文章
如上文所说的,布局面板根据可用的屏幕空间,指定界面元素的大小和位置。例如StackPanel 会水平或垂直排列界面元素。Grid 布局与CSS 中的表格控件类似,可将各元素按单元排列。
新提供的 RelativePanel 即相对布局,各个元素之间存在相对关系,可用来创建自适应界面。当用户设备发生变化时,用户界面也会重新排列重新组织,而有了RelativePanel就省去了界面元素重新排列。
如图所示,无论用户使用哪种设备,蓝色按钮始终放在文本框右侧,并排放在***按钮顶部。
XAML 代码如下:
<RelativePanel>
<TextBox x:Name="textBox1" Text="textbox" Margin="5"/>
<Button x:Name="blueButton" Margin="5" Background="LightBlue" Content="ButtonRight"RelativePanel.RightOf="textBox1"/>
<Button x:Name="orangeButton" Margin="5" Background="Orange" Content="ButtonBelow"RelativePanel.RightOf="textBox1" RelativePanel.Below="blueButton"/>
</RelativePanel>
使用可视化状态触发器创建自适应UI
UWP 提供自适应可视化状态,可根据窗口大小来调整状态值。StateTriggers定义了一个阈值,达到阈值则触发可视化状态。下面示例了,当窗口大于720像素,wideView 状态则被触发,游戏面板重新排列,如图所示:
当窗口小于720px,则narrowView视态被触发,因为wideView 触发器无法满足条件,NarrowView 状态则将Best-rated games 置于最底端,并且向左对齐,效果图如下:
XAML 代码如下:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="wideView">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="best.(RelativePanel.RightOf)" Value="free"/>
<Setter Target="best.(RelativePanel.AlignTopWidth)" Value="free"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="narrowView">
<VisualState.Setters>
<Setter Target="best.(RelativePanel.Below)" Value="paid"/>
<Setter Target="best.(RelativePanel.AlignLeftWithPanel)" Value="true"/>
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
...
</Grid>
创建UWP可使用的工具
创建App时,通常会明确目标设备,当需要在设备中预览App,可以使用VS中的Preview toolbar(预览工具箱)查看App,可以模拟不同的设备,如PC,TV,智能手机等。
自适应扩展
Windows 10 引入“缩放模型”的升级版,除了缩放矢量图之外,有一个统一的缩放因子集合,能够保证UI元素在不同的屏幕尺寸和分辨率下,界面元素大小的一致性。缩放因子能够兼容多种操作系统如iOS,Android等,资源科跨多平台共享。
通用输入处理
可使用通用控件创建通用Windows App来管理控制不同的输入模式,如鼠标,键盘,触摸笔,控制器等。本文列举了以下API 来访问输入:
CoreIndependentInputSource:是新增加的API,可将源输入,迁移到主线程或后台线程。
PointerPoint:统一了触摸,鼠标,笔数据。具有一致的接口和事件。
PointerDevice:是设备API,可支持查询设备支持的输入能力。
新的 InkCanvas XAML 控件和InkPresenter API 可访问Stroke 数据
编写代码
VS中开发Windows10 项目支持多种开发语言,如C++,C#,VB以及JavaScript。也可以使用XAML,开发原生UI 用户体验。
调用API来实现目标设备族群
无论需要调用哪种API,你需要了解API适应的设备族群,是否满足您App开发的需要。如以下代码所示,设备族群是Universal:
Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested += TestView_BackRequested;
当然也可以调用API ,在App中不实现。
这种情况通常指当你的目标设备族群未在文档中标明,你可以调用此api,修改一些代码即可。
使用ApiInformation 类编写自适应代码
编写自适应代码只需要两步,一,确定需要调用的API,二,使用Windows.Foundation.Metadata.ApiInformation 类来测试API 。可用于评估App是否运行良好。
如果想同时调用很多API,可以使用ApiInformation.IsTypePresent 方法,如下:
// Note: Cache the value instead of querying it more than once.
bool isHardwareButtonsAPIPresent =
Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.Phone.UI.Input.HardwareButtons");
if (isHardwareButtonsAPIPresent)
{
Windows.Phone.UI.Input.HardwareButtons.CameraPressed +=
HardwareButtons_CameraPressed;
}
上述示例中HardwareButtons类实现了CameraPressed事件,因为该类成员有相同的信息需求。
用户体验
通用Windows App 可利用所有设备特征来呈现App.App可充分利用桌面设备的处理能力,平板电脑的自然交互方式,以及智能手机的便捷性和移动性等。
良好的设计从确定用户交互方式开始,同时满足App的功能性和外观。用户体验非常重要直接影响了用户是否喜欢你的App,使用过程中是否愉悦或始终保持积极的情绪,而不受阻碍。设计通用App更加需要注意影响用户体验的不同设备因素。
除了设备的交互方式不同,还需要利用跨平台的优点,如:
- 使用云计算来访问不同设备资源
- 考虑怎样支持从一种设备迁移到另一种设备之上,并保持一致性。
- 使用导航设计指南来设计工作流程,使得App可兼容移动设备,较小的屏幕或较大的屏幕设备。
- 考虑特殊情况,较小的移动设备屏幕失效,也可能有一些功能区在固定式台式机上不起作用,而需在移动设备上才能运行。
- 考虑如何兼容多种输入形式
通过Dashboard提交通用 Windows 应用
利用新的通用的 Windows 开发人员中心仪表板,可以在同一位置管理和提交所有面向 Windows 设备的应用。新功能简化了流程,并具有更多的控制权限。