UWP introductory tutorial 1 - the past and present of UWP

content

introduction

device group

UI and generic input modes

Common Controls and Layout Panels
tool
adaptive extension
Universal Input Processing

introduction

In this article, you can master the following knowledge:

Device family, how to decide the target device
New UI controls and new panels help you adapt to different device characteristics

Since the Windows 8 system, Microsoft has introduced WindowsRT (Windows Runtime), which is an intermediate stage of the Windows App model. Hope to become a general application architecture.

When Windows Phone 8.1 was released, it was also WRT compatible. This helps developers create universal Windows 8 apps using the same codebase.

Nearly three years later, Microsoft's flagship product, Windows 10, finally came out. Windows 10 began to introduce UWP, further developed the Windows RunTime model, and introduced WRT into the Windows 10 kernel. As part of the system kernel, UWP now provides a platform for creating a common App (that is, the App can run on all devices running Windows 10). Of course, Microsoft has also made improvements internally. UWP not only includes the WinRT API, but also increases adaptation to specific Device group API. UWP provides a reliable API layer for developing cross-device apps. This means that you only need to develop once, and it can run on multiple devices. And released to the Windows Store, all users can download the trial.

Windows universal apps run on a variety of devices, support adaptive user interface, natural user input, one store, one dev center, and cloud services

UWP works regardless of device form and input modality, and can be customized for specific devices. Responsive UI controls and a new layout Panel help address the diversity of device screen sizes.

device group

There are also operating system differences between Windows 8.1 and Windows Phone 8.1 App, both Windows and Windows Phone. With Windows 10 you don't need to focus all your development efforts on the operating system, but one or more device features need to be addressed. Device groups can identify APIs, system characteristics, and user behavior, and also determine the set of devices that can run an app.

Device families

设备族群是搜集的带有版本号和标识符的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控件。而且控件也做了相应的调整，能够适应大尺寸屏幕。

Desktop communication app UI Phone communication app UI

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

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

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

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

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>