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可以降低由于元素又一次排列导致的一些性能问题。

例如以下，不管是横向和纵向的，蓝色button始终在Texbox1的右边。橙色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>

在学习完本文之后，我们对UWP平台已经有了基本理解。在进行UWP平台的开发时，还可以借助一些开发工具。ComponentOne Studio for UWP是一套可以编写全部 UWP 平台应用的控件集，包括表格、报表、图表、仪表盘、组织图、地图、PDF、Excel、Word、日程安排、输入、导航等多个控件，有效的帮助开发过程。