zoukankan      html  css  js  c++  java
  • UWP 入门教程2——如何实现自适应用户界面

    系列文章

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

    如上文所说的,布局面板根据可用的屏幕空间,指定界面元素的大小和位置。例如StackPanel 会水平或垂直排列界面元素。Grid 布局与CSS 中的表格控件类似,可将各元素按单元排列。

    新提供的 RelativePanel 即相对布局,各个元素之间存在相对关系,可用来创建自适应界面。当用户设备发生变化时,用户界面也会重新排列重新组织,而有了RelativePanel就省去了界面元素重新排列。

    如图所示,无论用户使用哪种设备,蓝色按钮始终放在文本框右侧,并排放在黄色按钮顶部。

    Relativepanel example

    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 状态则被触发,游戏面板重新排列,如图所示:

    Visual state trigger example. Wide view

    当窗口小于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,智能手机等。

    Visual Studio 2015 device preview toolbar

    自适应扩展

    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更加需要注意影响用户体验的不同设备因素。

    Windows-powered devices

    除了设备的交互方式不同,还需要利用跨平台的优点,如:

    • 使用云计算来访问不同设备资源
    • 考虑怎样支持从一种设备迁移到另一种设备之上,并保持一致性。
    • 使用导航设计指南来设计工作流程,使得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正式版发布全纪录

  • 相关阅读:
    VS2008编写MFC程序--使用opencv2.4()
    November 02nd, 2017 Week 44th Thursday
    November 01st, 2017 Week 44th Wednesday
    October 31st, 2017 Week 44th Tuesday
    October 30th, 2017 Week 44th Monday
    October 29th, 2017 Week 44th Sunday
    October 28th, 2017 Week 43rd Saturday
    October 27th, 2017 Week 43rd Friday
    October 26th, 2017 Week 43rd Thursday
    October 25th, 2017 Week 43rd Wednesday
  • 原文地址:https://www.cnblogs.com/powertoolsteam/p/5067510.html
Copyright © 2011-2022 走看看