开发手册 欢迎您!
软件开发者资料库

Windows 10开发 - 自适应UI

Windows 10开发自适应用户界面 - 从简介,UWP,第一个应用程序,存储,XAML控件,数据绑定,XAML性能,自适应设计,自适应UI,自适应代码,文件管理,SQLite数据库,简单而简单的步骤学习Windows 10开发App to App Communication,App Localization,App Lifecycle,Background Execution,App Services,Web Platform,Connected Experience,Navigation,Networking,Cloud Services,Live Tiles,Sharing Contract,Porting to Windows。

通用Windows平台(UWP)应用程序可以在许多不同的设备上运行,每个设备都有自己的输入形式,屏幕分辨率,DPI密度和其他独特的特性.

In Windows 10借助新的通用控件,布局面板和工具,您可以轻松地将UI调整到应用程序可能运行的设备上.例如,当您的UWP应用程序在台式计算机,移动设备或平板电脑上运行时,您可以定制UI以利用不同的屏幕分辨率,屏幕大小和DPI密度.

在Windows 10中,您可以轻松地将UI定位到具有以下功能和减号的多个设备;

  • 您可以使用通用控件和布局面板增强不同屏幕分辨率和屏幕尺寸的UI.

  • 通用输入处理允许您通过触摸板接收输入,笔,鼠标,键盘或控制器(如Microsoft Xbox控制器).

  • 借助Tools,您可以设计可以使用的应用程序UI适应不同的屏幕分辨率.

  • 自适应缩放可调整设备的分辨率和DPI差异.

在Windows 10中,您可以轻松地以任何方式排列,调整大小和定位应用程序你想要的.它还为用户提供了一种灵活性,可以按照自己的方式使用您的应用程序.在Windows 10中,有多种方法可以在UWP应用程序中实现响应技术,因此无论屏幕大小或窗口大小如何,它都看起来很棒.

VisualStateManager

在Windows 10中, VisualStateManager 类有两个新机制,借助它们可以在UWP应用程序中实现响应式设计.新的 VisualState.StateTriggers 允许开发人员检查某些条件,如窗口高度或窗口宽度,然后 VisualState.Setters API定义视觉状态以响应这些特定条件.

让我们看看下面给出的示例,其中在堆栈面板中添加了一些控件.

                                                                                                                                                                                                                       

现在 VisualStateManager ,将根据窗口的宽度调整堆栈面板的方向.如果宽度>≥720,则方向将变为水平,否则它将保持垂直.编译并执行上面的代码时,您将看到以下窗口,其中包含三个垂直顺序的文本块.

Visual State Manager

让我们调整上面窗口的宽度,你会看到以下窗口 :

视觉状态管理器调整大小

现在您可以看到文本块是水平排列的.

RelativePanel

RelativePanel 可用于通过表示元素之间的空间关系来布局UI元素.让我们举个例子,在相对面板中创建一些矩形.

                                                                                                                                                                                                                                                            

编译并执行上述代码后,您将看到以下窗口.

UWP自适应UI

当你调整上面的窗口大小时,你会看到绿色矩形现在调整在左边的顶行蓝色矩形如下图所示.

UWP Adaptive UI Rectangle