Windows 10 开发 - 快速指南

Windows 10 开发 - 简介

本教程专为想要学习如何开发 Windows 10 应用程序的人员而设计。在本教程中，我们将学习 -

Windows 10应用程序开发
微软发布的新操作系统的更新
更新中为开发人员提供的新功能

现在，我们可以实现许多有趣的应用程序场景，而这些场景在第一个版本中是无法实现的。Microsoft 不仅添加了新的 API，还扩展了现有的 API。

通用 Windows 应用程序

通用 Windows 应用程序首次在 Windows 8 中作为 Windows 运行时引入，它构建在通用应用程序平台上。

现在，在Windows 10中，通用应用程序平台的名称已更改为通用Windows平台（UWP）。您可以通过针对 Windows 应用商店的 Windows 10 设备（例如 PC、平板电脑、手机等）来构建现代且完全沉浸式的应用程序。

在 Windows 10 中，您可以轻松开发应用程序以访问 Windows 10 支持的所有设备，只需 -

一套API
一个应用程序包
还有一家店

通用Windows平台还支持不同的屏幕尺寸和不同的交互模型，例如触摸板、鼠标和键盘、游戏控制器或笔。

UWP 应用的特点

以下是通用 Windows 应用程序的一些特征，这些特征使其优于 Windows 10。

您可以针对设备系列，而不是像 Windows 8.1 这样的操作系统。
应用程序使用.AppX打包格式进行打包和分发，这确保您的应用程序可以无缝部署和更新。
您可以将应用程序提交到 Windows 商店，它将使其在所有设备系列或仅您选择的设备上可用。您可以在一处轻松管理 Windows 设备的所有应用程序。
您可以将应用程序的可用性限制为特定设备系列。
通用 Windows 平台 (UWP) 的核心 API 在所有 Windows 设备系列中都是相同的。因此，如果您的应用程序仅使用核心 API，则它可以在所有 Windows 10 设备上运行。
借助扩展 SDK，您可以为特定设备点亮您的应用程序。

发展选择

通用 Windows 应用程序可以用以下任何一种语言创建 -

C# 或带有 XAML 的 Visual Basic
JavaScript 与 HTML
使用 DirectX 和/或 XAML 的 C++

您还可以使用一种语言编写组件并在使用另一种语言开发的应用程序中使用它们。

Windows 10 开发 - UWP

Windows 运行时 (WinRT) 是一种平台同质应用程序架构，支持 C++/CX、C#、VB.NET 和 JavaScript 开发。WinRT 应用程序本身支持 x86 和 ARM 架构。一些重要的功能是。

它于 2012 年 9 月在 Windows Server 2012 中首次引入。
WinRT API 使用 JavaScript、C#、Visual Basic 和 C++ 提供对所有核心平台功能的访问。
WinRT 组件支持多种语言和 API，例如本机语言、托管语言和脚本语言。

通用 Windows 平台 (UWP)

通用 Windows 应用程序基于通用 Windows 平台 (UWP) 构建，该平台最初作为 Windows 运行时在 Windows 8 中引入。在 Windows 10 中，引入了通用 Windows 平台 (UWP)，进一步推进了 Windows 运行时 (WinRT) 模型。

在 Windows 8.1 中，WinRT 首次在通用 Windows 8 应用程序的帮助下在 Windows Phone 8.1 应用程序和 Windows 8.1 应用程序之间进行协调，以使用共享代码库同时针对 Windows 手机和 Windows 应用程序。
Windows 10 统一核心（现在称为 Windows Core）已经达到了 UWP 现在可以在 Windows 10 上运行的每台设备上提供通用应用程序平台的程度。

UWP 不仅可以调用所有设备通用的 WinRT API，还可以调用特定于运行应用的设备系列的 API（包括 Win32 和 .NET API）。

Windows 10 支持的设备

Windows 8.1 和 Windows Phone 8.1 应用程序以操作系统为目标；Windows 或 Windows Phone。Windows 10 应用程序不针对操作系统，而是针对一个或多个设备系列。

设备系列也有自己的 API，它们为特定设备系列添加了功能。您可以轻松确定设备系列中可以从 Windows 应用商店安装和运行您的应用程序的所有设备。这是设备系列的层次结构表示。

UWP的优点

通用 Windows 平台 (UWP) 为开发人员提供了一些东西。他们是 -

适用于所有设备的一个操作系统和一个统一核心。
一个应用程序平台可在每个家庭中运行应用程序。
一个开发中心用于提交应用程序和仪表板。
一个商店适用于所有设备。

UWP 开发设置

需要执行以下步骤才能开始为 Windows 10 创建自己的通用 Windows 平台 (UWP) 应用程序。

Windows 10 操作系统- UWP 应用程序需要最新版本的 Windows 才能开发。您还可以在Windows 8.1上开发UWP应用程序，但不支持UI设计器Window。
Windows 10 开发人员工具- 在 Visual studio 2015 中，您可以设计、编码、测试和调试 UWP 应用程序。您可以从https://dev.windows.com/en-us/downloads下载并安装免费的 Microsoft Visual Studio Community 2015
启用 Windows 10 的开发模式-
- 转到“开始”>“设置”。
- 选择更新和安全。
- 然后选择“对于开发人员”。
- 点击开发者模式

对于 UWP 应用程序，在设备上测试应用程序非常重要。

注册为应用程序开发人员- 您可以开始开发应用程序，但要将应用程序提交到商店，您需要一个开发人员帐户。您可以在此处创建您的开发人员帐户https://msdn.microsoft.com/enus/library/windows/apps/bg124287.aspx

执行上述步骤后，您现在就可以开始开发通用 Windows 平台 (UWP) 应用程序了。

Windows 10 开发 - 第一个应用程序

在本章中，我们将在 Windows 10 上使用 XAML 和 C# 在通用 Windows 平台 (UWP) 中创建第一个简单应用程序“Hello world”。我们将演示如何在 Visual Studio 中创建的单个 UWP 应用程序在任何计算机上运行和执行。 Windows 10 设备。

让我们按照下面给出的步骤开始创建应用程序。

启动 Visual Studio 2015。
单击“文件”菜单并选择“新建”>“项目”。

将显示以下“新建项目”对话框窗口。您可以在对话框的左侧窗格中看到不同类型的模板。

在左侧窗格中，您可以看到树视图。从模板 > Visual C# > Windows中选择通用模板。
从中心窗格中，选择空白应用程序（通用 Windows）模板
通过在名称字段中写入UWPHelloWorld来为项目命名。
单击“确定”创建新的 UWP 项目。

您可以在解决方案资源管理器中看到新创建的项目。
这是一个空白应用程序，但它包含许多文件，这是任何 UWP 应用程序的最低要求。
MainPage.xaml和MainPage.xaml.cs在您执行应用程序时运行。
默认情况下，MainPage.xaml文件包含以下信息。

<Page 
   x:Class = ”UWPHellowWorld.MainPage” 
   xmlns = ”http://schemas.microsoft.com/winfx/2006/xaml/presentation” 
   xmlns:x = ”http://schemas.microsoft.com/winfx/2006/xaml” 
   xmlns:local = ”using:UWPHellowWorld” 
   xmlns:d = ”http://schemas.microsoft.com/expression/blend/2008” 
   xmlns:mc = ”http://schemas.openxmlformats.org/markup-compatibility/2006” 
   mc:Ignorable = ”d”>  
	
   <Grid Background = ”{ThemeResource ApplicationPageBackgroundThemeBrush}”>
   </Grid>
	
</Page>

下面给出的是MainPage.xaml.cs中可用的默认信息。

using System; 
using System.Collections.Generic; 
using System.IO; 
using System.Linq; 
using System.Runtime.InteropServices.WindowsRuntime; 

using Windows.Foundation; 
using Windows.Foundation.Collections; 

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Controls.Primitives; 
using Windows.UI.Xaml.Data; 
using Windows.UI.Xaml.Input; 
using Windows.UI.Xaml.Media; 
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at 
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace UWPHellowWorld {
 
   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage(){ 
         this.InitializeComponent(); 
      } 
   } 
	
}

让我们添加一些文本块、一个文本框和一个按钮，如下面的 XAML 代码所示。

<Page 
   x:Class = ”UWPHellowWorld.MainPage” 
   xmlns = ”http://schemas.microsoft.com/winfx/2006/xaml/presentation” 
   xmlns:x = ”http://schemas.microsoft.com/winfx/2006/xaml” 
   xmlns:local = ”using:UWPHellowWorld” 
   xmlns:d = ”http://schemas.microsoft.com/expression/blend/2008”
   xmlns:mc = ”http://schemas.openxmlformats.org/markup-compatibility/2006” 
   mc:Ignorable = ”d”>  
   
   <Grid Background = ”{ThemeResource ApplicationPageBackgroundThemeBrush}”> 
	
      <StackPanel HorizontalAlignment = ”Center”> 
         <TextBlock Text = ”Hello, world!”  Margin = ”20”  Width = ”200” 
            HorizontalAlignment = ”Left”/> 
				
         <TextBlock Text = ”Write your name.” Margin = ”20” Width = ”200” 
            HorizontalAlignment = ”Left”/> 
				
         <TextBox x:Name = ”txtbox”  Width = ”280” Margin = ”20” 
            HorizontalAlignment = ”Left”/> 
				
         <Button x:Name = ”button” Content = ”Click Me” Margin = ”20” 
            Click = ”button_Click”/> 
				
         <TextBlock x:Name = ”txtblock” HorizontalAlignment = ”Left” 
            Margin = ”20”/> 
      </StackPanel> 
		
   </Grid> 
	
</Page>

下面给出的是 C# 中的单击事件按钮。

using System; 
using System.Collections.Generic; 
using System.IO; 
using System.Linq; 

using System.Runtime.InteropServices.WindowsRuntime; 
using Windows.Foundation; 
using Windows.Foundation.Collections;
 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Controls.Primitives; 
using Windows.UI.Xaml.Data; 
using Windows.UI.Xaml.Input; 
using Windows.UI.Xaml.Media; 
using Windows.UI.Xaml.Navigation; 
 
// The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  

namespace UWPHellowWorld {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage() {
         this.InitializeComponent(); 
      }  
		
      private void button_Click(object sender, RoutedEventArgs e) {
         if (txtbox.Text != “”) 
            txtblock.Text = “Hello: “ + txtbox.Text; 
         else 
            txtblock.Text = “You have not write your name”; 
      } 
		
   }	
	
}

在 UWP 项目中，设计窗口上提供了设备预览选项，借助该选项，您可以轻松更改布局，以适应您的应用程序目标设备系列中所有设备的屏幕尺寸。

您可以在本地计算机、模拟器或仿真器或远程设备上运行和测试您的应用程序。您可以从以下菜单中选择目标设备，如下所示 -

让我们在本地计算机上运行上面的代码，您将看到以下窗口。现在，在文本框中输入任意名称，然后单击“Click Me”按钮。

现在，如果您想在模拟器上测试您的应用程序，您可以从菜单中选择特定的模拟器并执行您的应用程序。您将看到以下模拟器 -

我们建议您在不同的设备上执行上述应用程序。

Windows 10 开发 - 商店

Windows 应用商店对开发人员的好处是您可以出售您的应用程序。您可以为每个设备系列提交单个申请。

Windows 10 应用商店是提交应用程序的地方，以便用户可以找到您的应用程序。
在 Windows 8 中，商店仅限于应用程序，微软提供了许多商店，例如 Xbox 音乐商店、Xbox 游戏商店等。

在 Windows 8 中，所有这些都是不同的商店，但在 Windows 10 中，它被称为 Windows Store。它的设计理念是让用户可以在一个地方找到适用于所有 Windows 10 设备的全系列应用程序、游戏、歌曲、电影、软件和服务。

货币化

货币化意味着在桌面、移动设备、平板电脑和其他设备上销售您的应用程序。您可以通过多种方式在 Windows 应用商店中销售应用程序和服务来赚取收入。

您可以选择以下任何一种方法 -

最简单的方法是在商店中提交带有付费下载选项的应用程序。
Trails 选项，用户可以在购买功能有限的应用程序之前试用您的应用程序。
使用 Microsoft Advertising 将广告添加到您的应用程序。

微软广告

当您将广告添加到您的应用程序并且用户点击该特定广告时，广告商将向您支付费用。Microsoft Advertising 允许开发者从 Microsoft Advertising Network 接收广告。

适用于通用 Windows 应用的 Microsoft Advertising SDK 包含在 Visual Studio 2015 安装的库中。
您还可以从Visualstudiogallery安装它
现在，您可以轻松地将视频和横幅广告集成到您的应用程序中。

让我们看一下 XAML 中的一个简单示例，使用AdControl在应用程序中添加横幅广告。

创建一个名为UWPBannerAd的新通用 Windows 空白应用程序项目。
在解决方案资源管理器中，右键单击引用

选择“添加引用”，这将打开“引用管理器”对话框。
从左侧窗格中，选择“通用 Windows”选项下的“扩展” ，然后选中“Microsoft Advertising SDK for XAML”。

单击“确定”继续。
下面给出的是 XAML 代码，其中添加了AdControl和一些属性。

<Page 
   x:Class = "UWPBannerAd.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPBannerAd" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:UI = "using:Microsoft.Advertising.WinRT.UI" 
   mc:Ignorable = "d">
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <StackPanel HorizontalAlignment = "Center">
         <UI:AdControl ApplicationId = "d25517cb-12d4-4699-8bdc-52040c712cab"  
            AdUnitId = "10043121" HorizontalAlignment = "Left" Height = "580"  
            VerticalAlignment = "Top" Width = "800"/> 
      </StackPanel> 
   </Grid> 
	
</Page>

当上面的代码在本地计算机上编译并执行时，您将看到以下带有 MSN 横幅的窗口。当您单击此横幅时，它将打开 MSN 站点。

您还可以在应用程序中添加视频横幅。让我们考虑另一个例子，当单击“显示广告”按钮时，它将播放 Xbox One 的视频广告。

下面给出的是 XAML 代码，我们在其中演示如何向按钮添加一些属性和事件。

<Page 
   x:Class = "UWPBannerAd.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPBannerAd" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:UI = "using:Microsoft.Advertising.WinRT.UI" 
   mc:Ignorable = "d">  
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <StackPanel HorizontalAlignment = "Center"> 
         <Button x:Name = "showAd" Content = "Show Ad" HorizontalAlignment = "Left"  
            Margin = "138,296,0,0" VerticalAlignment = "Top" FontSize = "48" 
            Click = "showAd_Click"/> 
      </StackPanel> 
   </Grid> 
	
</Page>

下面给出了 C# 中的点击事件实现。

using Microsoft.Advertising.WinRT.UI; 
using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls;
  
// The Blank Page item template is documented at 
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  

namespace UWPBannerAd {

   /// <summary>
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      InterstitialAd videoAd = new InterstitialAd();
		
      public MainPage() {
         this.InitializeComponent(); 
      }  
		
      private void showAd_Click(object sender, RoutedEventArgs e) {
         var MyAppId = "d25517cb-12d4-4699-8bdc-52040c712cab"; 
         var MyAdUnitId = "11388823";  
         videoAd.AdReady += videoAd_AdReady; 
         videoAd.RequestAd(AdType.Video, MyAppId, MyAdUnitId); 
      }
		
      void videoAd_AdReady(object sender, object e){ 
         if ((InterstitialAdState.Ready) == (videoAd.State)) {
            videoAd.Show(); 
         } 
      } 
		
   } 
	
}

当上面的代码在本地计算机上编译并执行时，您将看到以下窗口，其中包含一个“显示广告”按钮。

现在，当您单击“显示广告”按钮时，它将在您的应用程序上播放视频。

Windows 10 开发 - XAML 控件

XAML 代表可扩展应用程序标记语言。它是一个用户界面框架，提供了支持 Windows UI 开发的广泛控件库。其中一些具有视觉表示，例如按钮、文本框和文本块等；而其他控件则用作其他控件或内容的容器，例如图像等。所有XAML控件都继承自“System.Windows.Controls.Control”。

XAML 新兴故事

XAML 用于许多重要的 Microsoft 平台，例如 Windows Presentation Foundation (WPF)、Silverlight 以及现在的 Windows 应用程序。现在，Microsoft Office 2016 也是 UWP 应用程序家族。XAML 是一个丰富的平台，它提供了可在 UWP 应用程序中使用的非常酷的功能和控件。

控件的完整继承层次如下所示。

布局控件

控件的布局对于应用程序的可用性非常重要和关键。它用于在应用程序中排列一组 GUI 元素。选择布局面板时需要考虑一些重要事项 -

子元素的位置。
子元素的大小。
将重叠的子元素分层。

下面给出了布局控件列表-

下面给出了常用的布局控件。

编号	控制和说明
1	堆栈面板 StackPanel是 XAML 中的一个简单且有用的布局面板。在堆栈面板中，子元素可以根据方向属性水平或垂直排列在单行中。
2	包裹面板在WrapPanel中，子元素根据方向属性按从左到右或从上到下的顺序放置。StackPanel 和 WrapPanel 之间的唯一区别在于，它不会将所有子元素堆叠到一行中，而是在没有剩余空间的情况下将剩余元素包装到另一行中。
3	停靠面板 DockPanel定义一个区域来相对于彼此排列子元素，无论是水平还是垂直。使用 DockPanel，您可以使用 Dock 属性轻松地将子元素停靠到顶部、底部、右侧、左侧和中心。使用LastChildFill属性，最后一个子元素将填充剩余空间，无论为该元素设置任何其他停靠值如何。
4	帆布 Canvas是基本布局面板，可以使用相对于任何一侧（例如左、右、上、下）的坐标显式定位子元素。通常，Canvas 用于 2D 图形元素（例如椭圆形、矩形等），但不用于 UI 元素，因为指定绝对坐标会在 XAML 应用程序中调整大小、本地化或缩放时带来麻烦。
5	网格网格提供了一个灵活的区域，由行和列组成。在 Grid 中，子元素可以以表格形式排列。可以使用Grid.Row和Grid.Column属性将元素添加到任何特定的行和列。
6	拆分视图 SplitView代表一个有两个视图的容器；一个视图用于主要内容，另一个视图通常用于导航命令。
7	相关面板 relativepanel定义了一个区域，您可以在其中相对于彼此或父面板定位和对齐子对象。
8	视图框 ViewBox定义了一个内容装饰器，可以拉伸和缩放单个子项以填充可用空间。
9	翻转视图 FlipView表示一次显示一个项目的项目控件，并启用“翻转”Behave来遍历其项目集合。
10	网格视图 GridView是一个以行和列的形式呈现项目集合的控件，并且可以水平滚动。

用户界面控件

以下是最终用户可见的 UI 控件列表。

下面给出了常用的 UI 控件。

编号	UI 控件和说明
1	按钮响应用户输入的控件
2	日历表示一个控件，使用户能够使用可视日历显示来选择日期。
3	复选框用户可以选择或清除的控件。
4	组合框用户可以从中进行选择的项目下拉列表。
5	上下文菜单获取或设置每当通过用户界面 (UI) 从此元素内请求上下文菜单时应显示的上下文菜单元素。
6	数据网格表示在可自定义网格中显示数据的控件。
7	日期选择器允许用户选择日期的控件。
8	对话框应用程序还可以显示附加窗口，以便用户收集或显示重要信息。
9	飞出去表示显示轻量级 UI 的控件，该 UI 可以是信息，也可以是需要用户交互的。与对话框不同的是，通过单击或点击弹出窗口外部、按设备的后退按钮或按“Esc”键，可以轻松关闭弹出窗口。
10	图像呈现图像的控件。
11	列表框一个控件，显示用户可以从中选择的内联项目列表。
12	菜单表示 Windows 菜单控件，使您能够分层组织与命令和事件处理程序关联的元素。
13	菜单弹出窗口表示显示命令菜单的弹出按钮。
14	密码盒用于输入密码的控件。
15	弹出窗口在应用程序窗口范围内的现有内容之上显示内容。
16	进度条通过显示条来指示进度的控件。
17 号	进度环通过显示环来指示不确定进度的控件。
18	单选按钮允许用户从一组选项中选择单个选项的控件。
19	富编辑框一种控件，允许用户编辑包含格式化文本、超链接和图像等内容的富文本文档。
20	滚动查看器允许用户平移和缩放其内容的容器控件。
21	搜索框允许用户输入搜索查询的控件。
22	滑块一种控件，允许用户通过沿轨道移动 Thumb 控件来从一系列值中进行选择。
23	文本块显示文本的控件。
24	时间选择器允许用户设置时间值的控件。
25	切换按钮可以在两种状态之间切换的按钮。
26	工具提示显示元素信息的弹出窗口。
27	窗户根窗口提供最小化/最大化选项、标题栏、边框和关闭按钮。

下面给出了一个示例，其中包含SplitView中不同类型的控件。在XAML文件中，使用一些属性和事件创建不同的控件。

<Page 
   x:Class = "UWPControlsDemo.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPControlsDemo" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d">
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <StackPanel Margin = "20"> 
		
         <StackPanel Orientation = "Horizontal"> 
			
            <ToggleButton x:Name = "HamburgerButton" FontFamily = "Segoe MDL2 Assets"
               Content = "" Checked = "HandleCheck" Unchecked = "HandleUnchecked" 
               HorizontalAlignment = "Center"/> 
					
            <AppBarButton Icon = "Like" />
            <AppBarButton Icon = "Dislike" /> 
            <AppBarSeparator/> 
            <AppBarButton Icon = "Accept" /> 
            <AppBarButton Icon = "Add" /> 
				
         </StackPanel> 
			
         <SplitView x:Name = "splitView" DisplayMode = "Inline" 
            OpenPaneLength = "296"> 
				
            <SplitView.Pane> 
               <StackPanel> 
                  <TextBlock Text = "SplitView Pane" FontSize = "36" 
                     VerticalAlignment = "Center" HorizontalAlignment = "Center" 
                     Margin = "10"/> 
							
                  <Button Content = "Options" Margin = "10"> 
						
                     <Button.Flyout> 
                        <MenuFlyout> 
                           <MenuFlyoutItem Text = "Reset"/> 
                           <MenuFlyoutSeparator/> 
                           <MenuFlyoutItem Text = "Repeat"/> 
                           <MenuFlyoutItem Text = "Shuffle"/> 
                        </MenuFlyout> 
                     </Button.Flyout> 
							
                  </Button> 
						
               </StackPanel> 
            </SplitView.Pane> 
					
            <StackPanel>
				
               <TextBlock Text = "SplitView Content" FontSize = "36" 
                  VerticalAlignment = "Center" HorizontalAlignment = "Center" 
                  Margin = "10"/>
						
               <Border BorderThickness = "3" BorderBrush = "Red" Margin = "5"> 
                  <StackPanel Orientation = "Horizontal"> 
                     <TextBlock Text = "Hyperlink example" Margin = "5"/> 
                     <HyperlinkButton Content = "www.microsoft.com" 
                        NavigateUri = "http://www.microsoft.com"/> 
                  </StackPanel> 
               </Border> 
					
               <RelativePanel BorderBrush = "Red" BorderThickness = "2"  
                  CornerRadius = "10" Padding = "12" Margin = "5"> 
						
                  <TextBlock x:Name = "txt" Text = "Relative Panel example" 
                     RelativePanel.AlignLeftWithPanel = "True" 
                     Margin = "5,0,0,0"/> 
							
                  <TextBox x:Name = "textBox1" RelativePanel.RightOf = "btn" 
                     Margin = "5,0,0,0"/> 
							
                  <Button x:Name = "btn" Content = "Name"  
                     RelativePanel.RightOf = "txt" Margin = "5,0,0,0"/> 
							
               </RelativePanel> 
					
               <FlipView Height = "400" Margin = "10" Width = "400"> 
                  <Image Source = "Images/DSC_0104.JPG"/> 
                  <Image Source = "Images/DSC_0080.JPG"/> 
                  <Image Source = "Images/DSC_0076.JPG"/> 
                  <Image Source = "Images/thGTF7BWGW.jpg"/> 
               </FlipView>
					
            </StackPanel> 
				
         </SplitView> 
			
      </StackPanel> 
		
   </Grid> 
	
</Page>

下面给出了C# 中的事件实现。

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
using Windows.UI.Xaml.Media;
  
// The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
 
namespace UWPControlsDemo {
 
   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
    
      public MainPage() {
         this.InitializeComponent(); 
      } 
		
      private void HandleCheck(object sender, RoutedEventArgs e) { 
         splitView.IsPaneOpen = true; 
      }
		
      private void HandleUnchecked(object sender, RoutedEventArgs e) {
         splitView.IsPaneOpen = false; 
      }
		
   }
	
}

当上面的代码被编译并执行时，您将看到以下窗口 -

当您单击左上角的汉堡按钮时，它将打开/关闭SplitView窗格。

在SplitView窗格中，您可以看到Flyout、MenuFlyout和FlipView控件。

在SplitView Content中，可以看到Hyperlink、Relative Panel、ViewBox等按钮和文本框控件。

Windows 10 开发 - 数据绑定

数据绑定是 XAML 应用程序中的一种机制，它为 Windows 运行时应用程序使用部分类来显示数据并与数据交互提供了一种简单易用的方法。在该机制中，数据的管理与数据的显示方式完全分离。

数据绑定允许用户界面上的 UI 元素和数据对象之间的数据流。当建立绑定并且数据或业务模型发生变化时，它会自动将更新反映到 UI 元素，反之亦然。也可以不绑定到标准数据源，而是绑定到页面上的另一个元素。数据绑定可以是 -

单向数据绑定
双向数据绑定
元素绑定

单向数据绑定

在单向绑定中，数据从其源（保存数据的对象）绑定到其目标（显示数据的对象）。

让我们看一个单向数据绑定的简单示例。下面给出的是 XAML 代码，其中使用一些属性创建了四个文本块。

<Page 
   x:Class = "OneWayDataBinding.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:OneWayDataBinding" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d">  
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <StackPanel Name = "Display"> 
         <StackPanel Orientation = "Horizontal" Margin = "50, 50, 0, 0"> 
            <TextBlock Text = "Name: " Margin = "10" Width = "100"/> 
            <TextBlock Margin = "10" Width = "100" Text = "{Binding Name}"/> 
         </StackPanel>
			
         <StackPanel Orientation = "Horizontal" Margin = "50,0,50,0"> 
            <TextBlock Text = "Title: " Margin = "10" Width = "100"/> 
            <TextBlock Margin = "10" Width = "200" Text = "{Binding Title}" /> 
         </StackPanel> 
			
      </StackPanel> 
   </Grid>
	
</Page>

两个文本块的 Text 属性静态设置为“Name”和“Title”，而文本块的另外两个 Text 属性则绑定到“Name”和“Title”，它们是 Employee 类的类变量，如下所示。

using Windows.UI.Xaml.Controls;  

// The Blank Page item template is documented at  
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 
 
namespace OneWayDataBinding {
 
   /// <summary>
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage(){ 
         this.InitializeComponent(); 
         DataContext = Employee.GetEmployee(); 
      } 
   } 
	
   public class Employee {
      public string Name { get; set; } 
      public string Title { get; set; }  
		
      public static Employee GetEmployee() {
         var emp = new Employee() {
            Name = "Waqar Ahmed", 
            Title = "Development Manager" 
         }; 
			
         return emp; 
      } 
		
   }  
}

在Employee 类中，我们有变量Name和Title以及一个静态方法，在该方法中初始化员工对象并将返回该员工对象。因此，我们绑定了属性、Name 和 Title，但我们还没有选择该属性所属的对象。最简单的方法是将一个对象分配给DataContext ，我们在MainPage构造函数中绑定其属性。

当您运行此应用程序时，您可以立即在主窗口中看到您已成功绑定到该 Employee 对象的名称和标题。

双向数据绑定

在双向绑定中，用户能够通过用户界面修改数据并在源中更新该数据。例如，如果在用户查看视图时源发生变化，您希望更新视图。

让我们看一下下面给出的示例，其中使用一些属性和事件创建了两个标签、两个文本框和一个按钮。

<Page 
   x:Class = "TwoWayDataBinding.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:TwoWayDataBinding" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable = "d">  
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
	
      <Grid.RowDefinitions> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "Auto" /> 
         <RowDefinition Height = "*" /> 
      </Grid.RowDefinitions> 
		
      <Grid.ColumnDefinitions> 
         <ColumnDefinition Width = "Auto" /> 
         <ColumnDefinition Width = "200" /> 
      </Grid.ColumnDefinitions> 
		
      <TextBlock Name = "nameLabel" Margin = "200,20,0,0">Name:</TextBlock> 
		
      <TextBox Name = "nameText" Grid.Column = "1" Margin = "10,20,0,0" 
         Text = "{Binding Name, Mode = TwoWay}"/>  
			
      <TextBlock Name = "ageLabel" Margin = "200,20,0,0" 
         Grid.Row = "1">Age:</TextBlock> 
			
      <TextBox Name = "ageText" Grid.Column = "1" Grid.Row = "1" Margin = "10,20,0,0" 
         Text = "{Binding Age, Mode = TwoWay}"/>
			
      <StackPanel Grid.Row = "2" Grid.ColumnSpan = "2"> 
         <Button Content = "Display" Click = "Button_Click"  
            Margin = "200,20,0,0"/> 
         <TextBlock x:Name = "txtblock" Margin = "200,20,0,0"/> 
      </StackPanel>  
		
   </Grid> 
	
</Page>

我们可以观察到以下几点 -

两个文本框的 Text 属性都绑定到“Name”和“Age” ，它们是Person 类的类变量，如下所示。
在Person 类中，我们只有两个变量 - Name 和 Age，其对象在MainWindow类中初始化。
在 XAML 代码中，我们绑定到属性 - Name和Age，但我们没有选择该属性所属的对象。
更简单的方法是将一个对象分配给 DataContext ，我们在 C# 代码中绑定其属性，如下所示的MainWindow 构造函数。

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
 
// The Blank Page item template is documented at 
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  
	
namespace TwoWayDataBinding {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary>
   
   public sealed partial class MainPage : Page {
      Person person = new Person { Name = "Salman", Age = 26 }; 
		
      public MainPage() {
         this.InitializeComponent(); 
         this.DataContext = person; 
      } 
		
      private void Button_Click(object sender, RoutedEventArgs e) {
         string message = person.Name + " is " + person.Age + " years old"; 
         txtblock.Text = message; 
      } 
		
   }  
	
   public class Person {
      private string nameValue;
		
      public string Name {
         get { return nameValue; } 
         set { nameValue = value; } 
      } 
		
      private double ageValue; 
		
      public double Age {
         get { return ageValue; } 
			
         set {
            if (value != ageValue) {
               ageValue = value; 
            } 
         } 
      }
		
   } 
	
}

编译并执行上述代码后，您将看到以下窗口。单击显示按钮。

让我们更改“姓名”和“年龄”，然后再次单击“显示”按钮。

您可以看到，在单击按钮“显示”中，文本框的文本不用于显示TextBlock上的数据，而是使用类变量。

我建议您在两种情况下都执行上述代码，以便更好地理解。

元素绑定

也可以不绑定到标准数据源，而是绑定到页面上的另一个元素。让我们创建一个名为ElementBinding的应用程序，其中创建一个滑块和一个矩形，并通过滑块绑定矩形的宽度和高度。下面给出的是 XAML 中的代码。

<Page 
   x:Class = "ElementBinding.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:ElementBinding" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d">  
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <StackPanel VerticalAlignment = "Center" HorizontalAlignment = "Center">
		
         <Rectangle Height = "100" Width = "100" Fill = "SteelBlue"  
            RenderTransformOrigin = "0.5,0.5" Margin = "50"> 
				
            <Rectangle.RenderTransform> 
               <CompositeTransform ScaleX = "{Binding Value, ElementName = MySlider}" 
                  ScaleY = "{Binding Value, ElementName = MySlider}"/> 
            </Rectangle.RenderTransform> 
				
         </Rectangle>
			
         <Slider Minimum = ".5" Maximum = "2.0" StepFrequency = ".1"  
            x:Name = "MySlider" /> 
				
      </StackPanel> 
   </Grid> 
	
</Page>

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

使用滑块，您可以更改矩形的大小，如下所示。

Windows 10 开发 - XAML 性能

应用程序的性能（例如应用程序在启动时出现的速度或导航以显示下一个内容的速度等）非常重要。

应用程序的性能可能会受到许多因素的影响，包括 XAML 呈现引擎解析应用程序中所有 XAML 代码的能力。XAML 是用于创建 UI 的非常强大的工具，但通过使用现已在 Windows 10 应用程序中使用的新技术，它可以变得更加强大。

例如，在您的应用程序中，有某些内容您希望在页面加载时显示，但稍后不再需要。也有可能在启动时您不需要加载所有 UI 元素。

在Windows 10应用程序中，XAML中添加了一些新功能，从而提高了XAML性能。

任何通用 Windows 应用程序的性能都可以通过以下技术来提高；

渐进式渲染
延迟加载

渐进式渲染

在 Windows 10 中，XAML 中引入了两个非常酷的新功能。他们是 -

x：绑定

它是 XAML 中引入的用于绑定的新语法，其工作方式与Binding语法几乎相同。x:Bind有两个主要区别；它提供编译时语法验证和更好的性能。

X：相

它提供了在数据模板中优先呈现 XAML 控件的能力。每个 UI 元素只能指定一个阶段。如果是这样，这将应用于该元素上的所有绑定。如果未指定阶段，则假定为阶段 0。

在通用 Windows 平台 (UWP) 应用程序中，这两个新功能提供了性能改进。它还可用于迁移到 Windows 10 的现有 Windows 8.x 应用程序。

下面给出了一个示例，其中使用x:Bind关键字将员工对象与GridView绑定。

<Page 
   x:Class = "XAMLPhase.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local = "using:XAMLPhase" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d">  
   
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <GridView Name = "Presidents" ItemsSource = "{Binding}" Height = "300" 
         Width = "400" Margin = "50"> 
			
         <GridView.ItemTemplate> 
            <DataTemplate x:DataType = "local:Employee"> 
				
               <StackPanel Orientation = "Horizontal" Margin = "2"> 
                  <TextBlock Text = "{x:Bind Name}" Width = "95" Margin = "2" /> 
                  <TextBlock Text = "{x:Bind Title}" Width = "95" Margin = "2"  
                     x:Phase = "1"/> 
               </StackPanel> 
					
            </DataTemplate> 
         </GridView.ItemTemplate>
			
      </GridView> 
		
   </Grid> 
	
</Page>

在上面的 XAML 代码中，x:Phase = "1"是用 Title 定义的。因此，第一阶段会渲染Name ，然后渲染Title 。

下面给出了C# 中Employee 类的实现。

using System.Collections.ObjectModel; 
using System.ComponentModel; 
using System.Runtime.CompilerServices; 
using Windows.UI.Xaml.Controls;
  
// The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 
	
namespace XAMLPhase {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage() {
         this.InitializeComponent(); 
         DataContext = Employee.GetEmployees(); 
      } 
   } 
	
   public class Employee : INotifyPropertyChanged {
      private string name; 
		
      public string Name {
         get { return name; } 
			
         set {
            name = value; 
            RaiseProperChanged(); 
         } 
      } 
		
      private string title; 
		
      public string Title {
         get { return title; }
			
         set {
            title = value; 
            RaiseProperChanged(); 
         } 
      }
		
      public static Employee GetEmployee() {
       
         var emp = new Employee() {
            Name = "Waqas", 
            Title = "Software Engineer" 
         };  
			
         return emp; 
      } 
		
      public event PropertyChangedEventHandler PropertyChanged;
		
      private void RaiseProperChanged( 
         [CallerMemberName] string caller = "") {
			
         if (PropertyChanged != null) {
            PropertyChanged(this, new PropertyChangedEventArgs(caller)); 
         } 
			
      } 
		
      public static ObservableCollection<Employee> GetEmployees() {
         var employees = new ObservableCollection<Employee>(); 
			
         employees.Add(new Employee() { Name = "Ali", Title = "Developer" }); 
         employees.Add(new Employee() { Name = "Ahmed", Title = "Programmer" }); 
         employees.Add(new Employee() { Name = "Amjad", Title = "Desiner" }); 
         employees.Add(new Employee() { Name = "Waqas", Title = "Programmer" }); 
         employees.Add(new Employee() { Name = "Bilal", Title = "Engineer" }); 
         employees.Add(new Employee() { Name = "Waqar", Title = "Manager" }); 
			
         return employees; 
      } 
		
   }
	
}

当执行上面给出的代码时，您将看到以下窗口。

X :Phase和x:Bind用于增量渲染ListView和GridView项目并改善平移体验。

延迟加载

延迟加载是一种技术，可用于通过减少应用程序启动时 XAML UI 元素的数量来最小化启动加载时间。如果您的应用程序包含 30 个 UI 元素，并且用户在启动时不需要所有这些元素，则所有这些不需要的元素可以通过延迟来节省一些加载时间。

x:DeferLoadStrategy = "Lazy"延迟元素及其子元素的创建，这会减少启动时间，但会稍微增加内存使用量。

可以通过使用元素上定义的名称调用FindName来实现/创建延迟元素。

一旦创建了延迟元素，就会发生几件事 -

将引发元素上的 Loaded 事件。
元素上的任何绑定都将被评估。
如果应用程序注册为接收包含延迟元素的属性的属性更改通知，则将引发该通知。

下面给出了一个示例，其中x:DeferLoadStrategy = "Lazy"用于包含四个文本块的网格，并且不会在应用程序启动时加载，直到您加载它。

<Page 
   x:Class = "UWPDeferredLoading.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPDeferredLoading" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d"> 
	
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
      <Grid x:Name = "DeferredGrid" x:DeferLoadStrategy = "Lazy" Margin = "50"> 
         <Grid.RowDefinitions> 
            <RowDefinition Height = "Auto" /> 
            <RowDefinition Height = "Auto" /> 
         </Grid.RowDefinitions> 
			
         <Grid.ColumnDefinitions> 
            <ColumnDefinition Width = "Auto" /> 
            <ColumnDefinition Width = "Auto" /> 
         </Grid.ColumnDefinitions>
			
         <TextBlock Height = "100" Width = "100" Text = "TextBlock 1" Margin = "0,0,4,4" /> 
			
         <TextBlock Height = "100" Width = "100" Text = "TextBlock 2" 
            Grid.Column = "1" Margin = "4,0,0,4" /> 
				
         <TextBlock Height = "100" Width = "100" Text = "TextBlock 3" 
            Grid.Row = "1" Margin = "0,4,4,0" /> 
				
         <TextBlock Height = "100" Width = "100" Text = "TextBlock 4" 
            Grid.Row = "1" Grid.Column = "1" Margin = "4,4,0,0" /> 
      </Grid> 
		
      <Button x:Name = "RealizeElements" Content = "Show Elements"  
         Click = "RealizeElements_Click" Margin = "50"/> 
			
   </Grid>   
	
</Page>

下面的程序是点击事件的实现，其中网格在应用程序主页上加载。

using Windows.UI.Xaml; 
using Windows.UI.Xaml.Controls; 
 
// The Blank Page item template is documented at
   http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  
	
namespace UWPDeferredLoading {

   /// <summary> 
      /// An empty page that can be used on its own or navigated to within a Frame. 
   /// </summary> 
	
   public sealed partial class MainPage : Page {
      public MainPage() {
         this.InitializeComponent(); 
      }  
		
      private void RealizeElements_Click(object sender, RoutedEventArgs e) {
         this.FindName("DeferredGrid"); // This will realize the deferred grid 
      } 
		
   } 
	
}

当上面的代码编译并执行时，你只会看到一个按钮。启动时不会加载文本块。

现在，当您单击“显示元素”按钮时，它将加载文本块，这将提高应用程序的启动性能。

Windows 10 开发 - 自适应设计

在 Windows 10 中，通用 Windows 平台 (UWP) 应用程序现在将在许多设备系列上运行，例如 -

桌面设备系列- 平板电脑、笔记本电脑、个人电脑
移动设备系列- Windows Phone、平板手机
物联网设备系列- 紧凑型设备，例如可穿戴设备或家用电器
团队设备系列- Surface hub

每个设备系列都有自己的屏幕和窗口尺寸。那么如何设计一个应用程序，在屏幕尺寸和输入方法截然不同的多种设备上提供出色的用户体验呢？

为多个设备系列设计应用程序需要一些额外的考虑、规划和设计。Windows 10 UWP 提供了一组内置功能和通用构建块，使针对多个设备进行设计变得更加容易，并在平台控件的支持下自动跨不同屏幕和窗口尺寸进行缩放。

新的内置功能

以下是开发人员在创建 UWP 应用程序时可以使用的新功能。这些功能是自动且免费的。

有效像素和平台扩展

当您的 UWP 应用程序在 Windows 10 支持的任何设备上运行时，则 -

该系统使用一种算法来标准化控件、字体和其他 UI 元素在当前运行的设备屏幕上的显示方式。
缩放算法控制观看距离和屏幕密度（每英寸像素）以优化假定尺寸（而不是物理尺寸）。
缩放算法可确保 10 英尺外的 Surface Hub 上的 36 像素字体对于用户来说与几英寸外的 5 英寸手机上的 36 像素字体一样可读。

通用输入和智能交互

通用Windows平台具有内置的智能交互输入系统，可以理解所有设备的输入。例如，当您在应用程序中设计单击交互时，您不需要知道该单击是来自实际的鼠标单击还是手指的点击。系统会自动为您完成。

通用积木

有一些有价值的构建块，可以更轻松地为通用 Windows 平台 (UWP) 中的多个设备系列设计应用程序。

通用控制装置

UWP 提供了一组保证在所有 Windows 10 设备上正常运行的通用控件。

此“通用控件”列表包含常见控件，如单选按钮、组合框和文本框等。
它还包含一些复杂的控件，例如网格视图和列表视图，可以从数据流和模板生成项目列表。

通用样式

UWP 应用程序会自动获取一组默认样式，为您提供以下功能 -

一组自动为您的应用程序提供浅色或深色主题的样式。
交互的默认动画。
自动支持高对比度模式。
自动支持其他语言。我们的默认样式会自动为 Windows 支持的每种语言选择正确的字体。您甚至可以在同一个应用程序中使用多种语言，并且它们将正确显示。

Windows 10 开发 - 自适应 UI

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

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

在 Windows 10 中，您可以轻松地将 UI 定位到具有以下功能的多个设备 -

您可以使用通用控件和布局面板来增强针对不同屏幕分辨率和屏幕尺寸的 UI。
通用输入处理允许您通过触摸板、笔、鼠标、键盘或控制器（例如 Microsoft Xbox 控制器）接收输入。
在工具的帮助下，您可以设计可以适应不同屏幕分辨率的应用程序 UI。
自适应缩放可根据设备之间的分辨率和 DPI 差异进行调整。

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

视觉状态管理器

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

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

<Page 
   x:Class = "UWPAdaptiveUI.MainPage" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local = "using:UWPAdaptiveUI" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   mc:Ignorable = "d"> 
	
   <Grid Background = "{ThemeResource ApplicationPageBackgroundThemeBrush}">
      <VisualStateManager.VisualStateGroups>
		
         <VisualStateGroup>
			
            <VisualState>
				
               <VisualState.StateTriggers>
                  <!-- VisualState to be triggered when window 
                     width is >=720 effective pixels. -->
                  <AdaptiveTrigger MinWindowWidth = "720" />
               </VisualState.StateTriggers>
					
               <VisualState.Setters>
                  <Setter Target = "myPanel.Orientation" Value = "Horizontal" />
               </VisualSt