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

系列文章

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

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

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

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

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

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

原文地址:https://www.cnblogs.com/llguanli/p/8525055.html

时间: 2024-11-08 12:52:46

UWP 新手教程2——怎样实现自适应用户界面的相关文章

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

系列文章 UWP入门教程1--UWP的前世今生 如上文所说的,布局面板根据可用的屏幕空间,指定界面元素的大小和位置.例如StackPanel 会水平或垂直排列界面元素.Grid 布局与CSS 中的表格控件类似,可将各元素按单元排列. 新提供的 RelativePanel 即相对布局,各个元素之间存在相对关系,可用来创建自适应界面.当用户设备发生变化时,用户界面也会重新排列重新组织,而有了RelativePanel就省去了界面元素重新排列. 如图所示,无论用户使用哪种设备,蓝色按钮始终放在文本框右

【OpenCV十六新手教程】OpenCV角检测Harris角点检测

本系列文章由@浅墨_毛星云 出品.转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/29356187 作者:毛星云(浅墨)    微博:http://weibo.com/u/1723155442 知乎:http://www.zhihu.com/people/mao-xing-yun 邮箱: [email protected] 写作当前博文时配套使用的OpenCV版本号: 2.4.9 本篇文章中,我们一起探讨了OpenCV

Android基础新手教程——1.2.1 使用Eclipse + ADT + SDK开发Android APP

Android基础新手教程--1.2.1 使用Eclipse + ADT + SDK开发Android APP 标签(空格分隔): Android基础新手教程 1.前言 这里我们有两条路能够选,直接使用封装好的用于开发Android的ADT Bundle,或者自己进行配置 由于谷歌已经放弃了ADT的更新,官网上也取消的下载链接.这里提供谷歌放弃更新前最新版本号的 ADT Bundle供大家下载! 2.直接使用打包好的Eclipse 32位版:adt-bundle-windows-x86-2014

Apple Swift编程语言新手教程

Apple Swift编程语言新手教程 作者: 日期: gashero 2014-06-03 FROM:http://gashero.iteye.com/blog/2075324 文件夹 1   简单介绍 2   Swift入门 3   简单值 4   控制流 5   函数与闭包 6   对象与类 7   枚举与结构 1   简单介绍 今天凌晨Apple刚刚公布了Swift编程语言,本文从其公布的书籍<The Swift Programming Language>中摘录和提取而成.希望对各位的

MATLAB新手教程

MATLAB新手教程   1.MATLAB的基本知识 1-1.基本运算与函数    在MATLAB下进行基本数学运算,仅仅需将运算式直接打入提示号(>>)之後,并按入Enter键就可以.比如: >> (5*2+1.3-0.8)*10/25 ans =4.2000 MATLAB会将运算结果直接存入一变数ans,代表MATLAB运算後的答案(Answer)并显示其数值於萤幕上. 小提示: ">>"是MATLAB的提示符号(Prompt),但在PC中文视窗

ionic新手教程第七课-简要说明几种界面之间的參数传递及优缺点

截至2016年4月13日19点32分,我公布的ionic新手教程,已经公布6课了, 总訪问量将近6000,平均每节课能有1000的訪问量.当中訪客最多的是第三课有2700的訪客. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" > 事实上我開始的时候计划的挺好的,就依照我这阶段的安排,慢慢的带大家做一个

新手教程之使用Xib自定义UITableViewCell

新手教程之使用Xib自定义UITableViewCell 前言 首先:什么是UITableView?看图 其次:什么是cell? 然后:为什么要自定cell,UITableView不是自带的有cell么? 因为在日常开发中,系统自带的cell满足不了客户和开发人员的需求(并且每个cell中的内容\大小\样式相同),我们就需要自定义cell来实现更加优化的功能.比如下面这种 最后:怎么自定义cell? 1.创建一个新的项目,在storyboard中拖入两个imageView,两个label   2

【OpenCV新手教程之十八】OpenCV仿射变换 &amp;amp; SURF特征点描写叙述合辑

本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/33320997 作者:毛星云(浅墨)    微博:http://weibo.com/u/1723155442 知乎:http://www.zhihu.com/people/mao-xing-yun 邮箱: [email protected] 写作当前博文时配套使用的OpenCV版本号: 2.4.9 本篇文章中.我们一起探讨了OpenCV

Swift新手教程系列5-函数+selector在swift中的使用方法

原创blog.转载请注明出处 近期在用swift写代码,尽管遇到一些问题,可是代码量确实减了不少. swfit新手教程系列会随着我使用swfit中的积累,不断地去修正更新 之前的教程 swift单例模式具体解释-线程安全,多核性能 swift新手教程4-集合(Array,Dictionary) swift新手教程3-字符串String swift新手教程2-运算符 swift新手教程1-准备知识 在swift中,函数有keywordfunc声明 格式 func 函数名(參数1,參数2,...)-