• UWP 新手教程2——怎样实现自适应用户界面


    系列文章

    UWP新手教程1——UWP的前世今生

     

    如上文所说的,布局面板依据可用的屏幕空间。指定界面元素的大小和位置。

    比如StackPanel 会水平或垂直排列界面元素。Grid 布局与CSS 中的表格控件相似。可将各元素按单元排列。

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

    如图所看到的,不管用户使用哪种设备。蓝色button始终放在文本框右側,并排放在黄色button顶部。

    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、日程安排、输入、导航等多个控件,有效的帮助开发过程。

  • 相关阅读:
    C#调用自定义表类型参数
    不同版本SQL SERVER备份还原时造成索引被禁用
    SQL SERVER同步环境新增发布对象时不能生成(sp_MS+表名)同步存储过程
    C# 读取在存储过程多结果集
    C#读取XML文件
    批量还原V2
    tmux 常用快捷键
    无法生成SSPI上下文
    sql server 性能计数器
    sql server 2008 r2 xevent
  • 原文地址:https://www.cnblogs.com/llguanli/p/8525055.html
Copyright © 2020-2023  润新知