UWP 入门教程2——如何实现自适应用户界面

系列文章

UWP入门教程1——UWP的前世此生

 

如上文所说的，布局面板根据可用的屏幕空间，指定界面元素的大小和位置。例如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 设备的应用。新功能简化了流程，并具备更多的控制权限。

在进行UWP开发时，还能够借助一些开发工具，有效提升开发效率。ComponentOne Studio for UWP 是一套能够编写全部 UWP 平台应用的控件集，包括表格、报表、图表、仪表盘、组织图、地图、PDF、Excel、Word、日程安排、输入、导航等多个控件，有效的帮助开发过程。

 

相关阅读：

微软 Build 2017 开发者大会：Azure 与 AI 的快速发展

是什么让C＃成为最值得学习的编程语言

从Visual Studio看微软20年技术变迁

C#开发人员应该知道的13件事情

Visual Studio 2017正式版发布全纪录