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

目录

引言

设备族群

UI 和通用输入模式

  • 通用控件和布局面板
  • 工具
  • 自适应扩展
  • 通用输入处理

引言

在本篇文章中,可以掌握以下知识:

  • 设备族群,如何决定目标设备
  • 新的UI控件和新面板帮助你适应不同的设备特征

从Windows 8系统开始,微软就 引入了WindowsRT(Windows Runtime),它是Windows App 模型的一个中间阶段。希望能够成为通用应用体系架构。

Windows Phone 8.1发布时,也兼容WRT 。这样有助开发者使用同一代码库创建通用的Windows8 app。

将近三年之后,微软的重头产品Windows 10终于横空出世。Windows 10 开始引入 UWP,更进一步的发展了Windows RunTime 模型,并将WRT 引入了Windows10 内核中。作为系统内核的一部分,UWP 现在提供创建通用的App平台(即App在运行Windows10的所有设备中都可以运行),当然微软内部也做出了改进,UWP 不仅包含了WinRT API,也增加了适应特定设备群的API。UWP 为开发跨设备App提供了可靠的API 层。这就意味着你只需要开发一次,就可在多种设备中运行。并发布到Windows Store,所有的用户都可以下载试用。

无论设备的形式和输入模态的不同,UWP 都可以运行,也可以为特殊设备定制。自适应UI控件和新的布局Panel 有助于解决设备屏幕尺寸的多样性。

设备族群

Windows8.1 和Windows Phone 8.1 App 还存在操作系统的差异,无论是Windows和Windows Phone。有了Windows 10就不需要将所有的开发精力都集中在操作系统,但需要解决一个或多设备特征。设备族群可以识别API,系统特征,以及用户行为,也决定了可运行某一App的设备集。

设备族群是搜集的带有版本号和标识符的API集合,设备族群是OS的基础,PC 机运行桌面操作系统,是根据桌面设备族群决定的,智能手机和平板电脑等会运行Mobile OS,是由移动设备族群决定的,等等。

通用设备族群相对而言比较特殊,它不是任何OS 的基础,相反,通用设备族群的API是所有族群的父节点,正因为有了通用设备族群API才保证了每个OS 能够正常呈现到每种设备中。

每个子设备族群在通用族群基础上添加自有的API。使用设备族群的优点在于开发一次,到处运行,无论用户使用哪种设备,手机,平板或PC。App可使用自适应代码实现动态获取设备特征,适应设备。

你的App需要使用哪种设备族群,主要取决开发需求,并且决定影响最终App的呈现:

1. API 集,App运行时需要调用的API

2. API集调用

3. 适应的设备集,即App能够安装的设备类型。

选择设备族群主要由两方面原因决定,API 接口类型,是否创建App时能够无条件调用,以及App需要覆盖的设备范围。

如何做决策:

  • 最大化App 覆盖量
  • 为了实现App 覆盖设备的最大化,保证它能够在尽可能多的设备中运行,可把App目标定位通用设备族群。这样做的目的,App会就可以使用所有设备族群,(从通用设备族群派生的)
  • 限制App 适应某一种设备
  • 限制App适应某一类设备
  • 排除只支持某一特殊版本的设备族群

UI 和通用输入

UWP  App能够在具有不同特征的设备中运行。Windows10 提供新的通用控件,布局面板和工具,来帮助开发自适应UI 。例如根据不同的屏幕分辨率,相应的调节UI。

Windows 帮助你实现自适应UI:

1. 提供通用控件和布局面板来根据屏幕分辨率来优化UI

2. 常用输入处理,可解决输入模态多样性的问题,无论通过触摸输入,触摸笔,键盘,还是控制器,都能够统一处理。

3.提供UI 设计辅助工具,能够自适应不同的屏幕分辨率。

4. 自适应扩展可调节分辨率和DPI。

通用控制和布局板

Windows 10 提供了一些新控件,比如日历,拆分视图,在此之前,只有Winodws Phone 提供Pivot 控件 ,现在,通用设备族群也支持Pivot控件。而且控件也做了相应的调整,能够适应大尺寸屏幕。

使用自适应Panels实现自适应界面

Layout Panel 指定子元素的尺寸和位置的值主要取决于屏幕尺寸,比如StackPanel 会指定子节点顺序排放(垂直或水平)。Grid 与CSS 提供的Grid相似,每个界面元素都对应单元格。

新提供的RelativePanel 是一种布局样式,可以定义各界面元素之间的关系,当屏幕分辨率发生变化时,界面元素会做出相应的调整来适应。RelativePanel能够减少由于元素重新排列导致的一些性能问题。

如下,无论是横向和纵向的,蓝色按钮始终在Texbox1的右边,橙色按钮会放在蓝色按钮下方。

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>
时间: 2024-08-11 04:17:54

UWP入门教程1——UWP的前世今生的相关文章

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

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

UWP入门教程1

目录 引言 设备族群 UI 和通用输入模式 通用控件和布局面板 工具 自适应扩展 通用输入处理 引言 在本篇文章中,可以掌握以下知识: 设备族群,如何决定目标设备 新的UI控件和新面板帮助你适应不同的设备特征 从Windows 8系统开始,微软就 引入了WindowsRT(Windows Runtime),它是Windows App 模型的一个中间阶段.希望能够成为通用应用体系架构. Windows Phone 8.1发布时,也兼容WRT .这样有助开发者使用同一代码库创建通用的Windows8

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

系列文章 UWP新手教程1--UWP的前世今生 如上文所说的,布局面板依据可用的屏幕空间.指定界面元素的大小和位置. 比如StackPanel 会水平或垂直排列界面元素.Grid 布局与CSS 中的表格控件相似.可将各元素按单元排列. 新提供的 RelativePanel 即相对布局.各个元素之间存在相对关系,可用来创建自适应界面.当用户设备发生变化时,用户界面也会又一次排列又一次组织,而有了RelativePanel就省去了界面元素又一次排列. 如图所看到的,不管用户使用哪种设备.蓝色butt

UWP入门(十二)--数据绑定用法

原文:UWP入门(十二)--数据绑定用法 主要几个元素: Template DataTemplate ItemSource 数据绑定是一个数据提取的方法,能使数据和UI上的控件紧密相连,下面的Demo是这样的: 有许多书的集合,书 类中有图片.标题.作者和ID,把它成现在GridView 控件上,每次点击GridView 的时候动态显示书本信息 github 代码 效果图: 原理图: 1. Template 为GridView 创建一个Template,决定每个独立的图书对象如何呈现在屏幕上 <

UWP入门(十一)--使用选取器打开文件和文件夹

原文:UWP入门(十一)--使用选取器打开文件和文件夹 很漂亮的功能,很有趣 重要的 API FileOpenPicker FolderPicker StorageFile 通过让用户与选取器交互来访问文件和文件夹. 你可以使用 FileOpenPicker 和 FileSavePicker 类访问文件,并使用 FolderPicker 访问文件夹 1. 文件选取器 UI 文件选取器显示信息以引导用户并在打开或保存文件时提供一致性体验 该信息包括: 当前位置 用户选取的项 = 用户可以浏览到的位

Win2D 入门教程 VB 中文版

继续填坑!又一个c#教程变为vb! 这是我翻译的Win2D教程,链接保留了微软原版的. 如果文档有问题,可以在 https://github.com/Nukepayload2/Win2dDocVB发 Issue,也可以直接回复. 快速开始 本快速入门教程介绍了一些 Win2D 的基本功能.您将学习如何: 将 Win2D 添加到 XAML VB Windows 10 项目 绘制文本和几何 应用滤镜效果 对您的 Win2D 内容进行动画处理 按照 Win2D 的最佳做法 安装 Visual Stud

photoshop零基础入门教程——办公资源网

Ps是经常用到的办公工具,各行各业都会接触,可是使用Ps时各种各样的麻烦事也是让人头疼得不行,下面为大家准备了ps零基础入门教程分享,快来看看~ 本教程由Photoshop研发人员徐言武老师亲身教授,每一个工具的使用,每一张图的编辑都一步一步慢慢讲解.课程从Photoshop CC的安装讲起,再到工具栏的功能介绍,和实际应用操作,可以说为每一位学员扫清了学习过程中能碰到的所有问题.总之,这是一套入门级课程,可以帮助你打下坚实的基础.课程优势:http://www.bangongziyuan.co

【OpenCV入门教程之十七】OpenCV重映射 &amp; SURF特征点检测合辑

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

&lt;zz&gt;bower入门教程

from http://www.cnblogs.com/xiaokai0203/p/5891927.html bower入门教程 什么是bower Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt,这个会在以后的文章中介绍. 准备工作 安装node环境:node.js 安装Git,bower从远程git仓库获取代码包:git简易指南 安装bower 使用