编程 Windows 10：UWP 焦点（2/N）
使用 C# 进行桌面开发：UWP 入门（告别 WinForm）-- 第二章
引言
本系列文章始于：
背景
现在，在第 2 章中，我们将检查项目模板中包含的所有内容，并添加一些代码，以便我们了解 XAML 的实际起始。
这是我持续尝试“讲述”UWP / UWA 的故事，并了解通过 UWP 开发桌面应用程序的可行性。
使用 Visual Studio 创建新的通用 Windows 应用程序非常简单。
您只需转到“文件”菜单并悬停在“新建”> 菜单项上。 一个新菜单将弹出，其中包含“项目...”选项。 （省略号（三个点）表示选择该项时将弹出一个对话框。）
单击“项目...”菜单项，将出现一个对话框。
由于我已经创建了一些 UWA 项目，Visual Studio 会为我显示该项目。但是，您的首次显示可能有所不同。
如果出现这种情况，您只需查看左侧显示的树状视图，并确保您点击这些项目，使其与上一个快照中显示的一致。
项目模板
如果您仔细查看该树状视图，您会发现它巧妙地告诉我们这是一个项目模板。 树状视图的根节点名为“模板”，其下是“C#”，然后我们选择了“Windows 通用”。
一旦您做出这些选择，您就将项目类型缩小到右侧显示的四种主要类型。
我们想选择第一个，空白应用程序（通用 Windows）。
.NET 版本
您还可以看到一个下拉列表，用于选择 .NET Framework 的版本。 默认的 4.6.1 版本对我们来说很好。
在对话框的底部，我们可以为我们的应用程序命名。
让我们将其命名为 FirstApp。 只需在“名称”文本框中输入即可。
请注意，“为解决方案创建目录”复选框已选中。 这是默认设置，这意味着将在“位置”文本框中显示的目录下方创建一个名为 FirstApp 的目录。
这是我们想要的，这样我们就可以将所有应用程序都放在自己的目录中进行组织。
设置完成后，单击“确定”按钮创建新应用程序。
当您这样做时，Visual Studio 将显示一个对话框，询问您要支持哪些 Windows 10 版本。 它想知道您要定位哪个版本，以及哪个版本应该是它将支持的最旧版本（最低版本）。
如果您愿意，可以点击“我应该选择哪个版本？”链接，您的默认浏览器将在 Microsoft 网站上打开，该网站将解释各个版本之间的差异。 除非您真正了解每个 Windows 10 版本中发布了什么，否则这有点令人困惑。
对话框中显示的是 Microsoft 建议的版本，因此我接受它们。
***********************************************************************************************************
边栏：仅限 Windows 10
请注意，所有这些目标版本都仅是 Windows 10 版本。 这是一个微妙的提示，表明 UWP（通用 Windows 平台）不支持以前的 Windows 版本。
这也很容易引起混淆，因为以前的 Visual Studio 版本支持构建一种通用（基于 XAML）应用程序，该应用程序支持 Windows 8。
这是 Visual Studio 2013 的一个快照，它显示了它拥有通用应用程序。 但是，如果您在 Visual Studio 2013 中构建其中一个应用程序，则新系统将不支持它。
项目结构非常不同，并且与 Visual Studio 2017 UWP/UWA 不兼容。
此外，如果您尝试使用 2017 打开其中一个项目，您会发现它会要求您安装更多 Visual Studio 组件。
它看起来像以下内容
对我来说，这是一种奇怪的不兼容性，因为在旧版 Studio 中您创建了 UWA，但现在新版 Studio 不认为它实际上是 UWA。 好吧，我们这些专注于仅部署到 Win10 的现代 UWA 的人可以忽略这一点，但如果您有一个旧的 UWA 开发项目，则需要了解这一点。
***********************************************************************************************************
点击 [OK] 按钮继续创建项目。
根据您机器的速度，您可能会看到如下所示的进度对话框
新项目创建完成后，Visual Studio 的外观与您初次打开时有些相似。 但是，由于您知道解决方案资源管理器显示项目结构，因此您会看到它现在填充了构成解决方案的文件夹和文件（在 Visual Studio 的右侧）。
请注意，工具箱实际上也没有被填充。 那是因为只有当您打开代表用户界面的 XAML (可扩展应用程序标记语言) 文件时，工具箱才会被填充。
在解决方案资源管理器中双击 MainPage.xaml 文件，Visual Studio 将在编辑器中打开该文件。
加载时它会看起来像以下内容
底部的小窗口是 XAML 代码，它告诉系统如何渲染（绘制）您将使用 Visual Studio 创建的 UI（用户界面）。
与 WinForm 开发的区别
过去，我们 WinForms 开发人员很少查看 designer.cs 文件，这些文件包含了生成 UI 的代码。 XAML 改变了这一切。 您需要理解 XAML，因为您将与它密切合作。
这也是 Visual Studio 用户界面如此烦人的原因之一。 现在，您需要在设计视图中查看渲染的 XAML，并在文本编辑器视图中查看 XAML 本身。 这一切都占用了大量的屏幕空间——正如您从上一张图片中看到的那样。
一旦 Visual Studio 渲染了 XAML，工具箱就会填充您可以用来创建 UI 的控件。 您可以从工具箱中抓取这些控件，将它们拖放到 XAML 表单上。
注意：有时我为了更密切地关注某个部分而剪切掉 Visual Studio 的一侧（或顶部或底部），但请注意，缺失的元素仍然存在。
模板项目只包含一个基本背景。 此外，由于选择了 5 英寸的手机显示屏，所以现在应用程序看起来非常小。
然而，在这一点上，我们已经拥有了创建一个有效运行的应用程序所需的所有框架。
我们继续运行它，以便看看它是什么样子。
在 Visual Studio 的顶部菜单栏下方有一个工具栏，其中包含一个下拉列表，如下所示
那个绿色的右箭头是“运行”按钮，所以如果你点击它，它将在当前选定的平台上运行。 最有可能的是，您当前的选择是“本地计算机”，就像我的一样，但如果不是，请立即选择它。 完成此操作后，列表将再次折叠，您可以继续点击右箭头以启动应用程序。
应用程序可能需要一段时间才能启动。 运行 UWP 应用程序与运行 WinForm 应用程序完全不同，并且当我们运行 UWA 时，Visual Studio 中会发生更多事情，包括部署（到本地位置）。 我们将随着时间的推移对此进行更多讨论。
通用启动屏幕
当您运行应用程序时，应该首先出现一个类似以下的启动屏幕
这是一个非常通用的启动画面，我们稍后会看到如何更改它。
启动画面消失后，您将看到主应用程序屏幕。
非常通用的页面
同样，它非常通用，因为我们还没有添加任何控件。 表单顶部居中的小控件是 Visual Studio 在您以调试模式运行应用程序时作为测试工具放置的。 如果您在没有调试的情况下运行它，该控件将不会出现。
该控件提供了一些信息，在您决定表单的大小和其他元素时，这些信息有时会很有用。
现在解释这些都没有多大意义，所以我们将在向屏幕添加元素时再来看它们。
程序图标
您还会注意到，任务栏上显示的程序图标是通用的 X。
这个应用程序还没有太多内容，但至少 Visual Studio 给我们提供了一个可以运行的模板。 现在，我们只需要修改应用程序以适应我们的需求。 在修改过程中，我们将学习如何编程。
然而，在此之前，了解 Visual Studio 为我们所做的一切将有所帮助。 这样我们就能知道为我们创建的模板应用程序中有什么，因为模板应用程序旨在在创建 UWA 时提供指导。
让我们通过检查程序此时包含的所有内容来结束本章。 然后，在下一章中，我们将开始添加一些控件并编写一些代码。
解决方案资源管理器：应用程序包含的所有内容
我已展开解决方案资源管理器中的所有树形视图节点，以向您展示应用程序包含的所有内容。
AssemblyInfo.cs
在“属性”节点下有两个项目。
我们看到的第一件事是 AssemblyInfo.cs 文件。 这个文件与 WinForm 应用程序包含的用于描述应用程序某些内容的文件相同。
每当您在解决方案资源管理器中单击可查看文件时，Visual Studio 编辑器将为您提供一个预览版本，如下所示
这有点奇怪。 它的扩展名是 cs，表示它是 CSharp 代码。
然而，其中包含的代码有些奇怪，因为它完全由注释（以 // 开头的绿色行）和程序集属性组成。 程序集是代码构建时生成的 DLL 或 EXE，这些是该程序集的属性。
由于它们具有人类可读的名称，因此您可以理解它们中的大多数含义。
例如
- 您可以看到此应用程序的名称为 FirstApp。
- 您还可以看到版本设置为 1.0.0.0。
我们基本上只有在更改程序属性值或更新应用程序版本时才需要更改此文件。 同样，随着我们开发应用程序，我们将了解更多关于此文件的信息。
defaul.rd.xml : 运行时指令
接下来我们看到 default.rd.xml。
该文件是运行时指令文件，用于更高级的功能。 在我们的第一个应用程序中，我们根本不会修改此文件。 这些运行时指令文件在 WinForms 中未使用，因此它们对 UWA 来说是新的，但它们允许我们做一些我们现在不需要做的更高级的事情。
所以目前只需了解这是 Visual Studio 为我们创建的框架项目的一部分就足够了。
项目引用
接下来，在“引用”节点下，您会看到三个项目。后两个是对 Visual Studio 和/或操作系统提供的核心库的引用，以便您可以访问 Microsoft 软件开发人员提供的功能。
目前，我们只需知道 Visual Studio 已为我们设置了这些引用，以便基本功能可用，并且我们此时不需要以任何方式更改这些项目。 稍后，我们可能会添加新的引用，以整合我们希望在应用程序中使用的更多可用功能。
第一个项目列在引用下，Analyzers，是帮助您分析应用程序性能、用户界面兼容性等的 .NET 工具。
项目资产
接下来，在“Assets”节点下，您可以看到我们有 7 个 PNG 文件。 这些都是应用程序中各种位置以及将应用程序添加到 Windows 商店时使用的通用图标和图像。 我们稍后将了解如何更改这些内容。
App.xaml
最后，我们来到 App.xaml 和 App.xaml.cs 文件。
第二个文件显示为第一个文件的子节点，因为它是设计文件 (XAML) 的代码隐藏 (CSharp) 文件。 这两个文件协同工作，创建一个 UI，为用户提供与她在屏幕上看到的 Windows 表单的交互。
XAML
XAML 文件向系统描述用户界面。 换句话说，您创建 XAML 来创建向应用程序用户显示的窗口。
同时，完成工作的代码被分离到它自己的文件：.cs (CSharp) 文件中。
App.xaml 与众不同
App.xaml 不是我们应用程序的主 Windows 窗体，因此它实际上不会在设计视图中渲染。 相反，App.xaml 是应用程序特定的设置（或应用程序对象），它代表在内存中运行的应用程序组件。
主要用户界面
我们的主要 UI 实际上由 MainPage.xaml 文件表示，我们之前双击它以在设计视图中显示它。
我们将通过仔细查看模板添加到我们的 MainPage.xaml 文件中的默认 XAML 来结束本章，但首先让我告诉您我们项目中仅有的另外两个文件。
FirstApp_TemporaryKey.pfx
这是一个个人交换格式 (pfx)，其中包含带有公钥和私钥的安全证书，允许您创建发布者证书以将您的应用程序标识为您发布的。 开发和部署 UWA（通用 Windows 应用程序）需要这些文件，因此模板项目会为您添加一个。 稍后我们将看到如何获取官方 PFX 以及如何使用它在 Windows 应用商店中发布我们的应用程序。
这也是应用程序开发人员（和应用程序公司）向用户保证他们的应用程序是由已知（且安全）发布者安装的方式。
Package.appxmanifest
显示在最后的文件是您应用程序的清单文件。 这是 UWA 版本的 assemblyinfo.cs 文件，尽管它描述了您应用程序的更多内容。
当您在解决方案资源管理器中双击该文件时，Visual Studio 中将激活一个特殊的编辑器。
清单文件描述了您应用程序的许多方面，包括：
-
应用程序 - 基本信息（例如应用程序名称、默认语言以及其磁贴是否在 Windows 10 开始菜单上更新）
-
视觉资产 - 图标、徽标等。
-
功能 - 通过 Internet 通信、启用蓝牙、访问音乐库、访问麦克风等等
-
内容 URI - 允许或阻止特定地址的内容
-
声明 - 允许详细功能，例如允许摄像头执行某些行为。
-
打包 - 用于唯一标识您的可安装包和您作为软件发布者的信息
现在，知道我们可以编辑这些信息以及如何访问它就足够了。 稍后当我们更关注部署时，我们将研究这些信息，因为它们将对我们变得重要。
现在，让我们回到 MainPage.xaml，了解模板实际上做了什么来创建我们的主 UI。
什么是 XAML？
XAML 代表可扩展应用程序标记语言。
XAML 是一种 XML（可扩展标记语言）。 什么是 XML？ XML 仅仅是一种结构化的、基于文本的、人类可读的标记语言，它作为异构系统的通用格式而变得非常流行。
让我们将 XML 首字母缩略词分解，以了解它的真正含义，并帮助我们更好地理解 XAML。
更仔细地检查首字母缩略词
可扩展：XML 易于扩展用于多种用途——XAML 正是这样诞生的。 Microsoft 的开发人员采用了基本的 XML 结构并将其特定内容应用于其中，从而创建了 XAML。
标记：思考其含义的最佳方式是想象一位（人类）编辑标记了其一位作者的内容。 记者撰写他人将看到的实际内容，然后将其交给编辑。 编辑审阅后，发现了一些错误并标记它们，还发现了一些其他需要更改并标记以供修订的内容。 标记永远不会被文章的实际读者看到，而是只被作者看到。 标记提供了作者应如何渲染最终文章的指导。 标记是元数据（描述故事本身的数据），但同样永远不会被最终读者看到。
所有这些在我们的 XAML（和 XML）标记中也都是如此。 我们编写的标记不会被用户看到。 相反，我们正在标记用户界面应该如何呈现和行为。 在我们的例子中，我们正在告诉 .NET 编译器如何为用户创建和渲染 UI。 但是，当然，用户永远不会看到标记。 这就像 HTML（超文本标记语言）一样。 用户不阅读 HTML，而是阅读 HTML 页面中显示的内容。
语言：XAML 和 XML 都有自己的语言，并且具有相似的结构，但名词（标签）和动词（属性）不同。
名词和动词？
XML 或 XAML 文档中的每个节点都称为标签，通常可以被视为名词。 如果我们查看项目模板为我们创建的 XAML，我们可以看到这似乎是正确的。
<Page
x:Class="FirstApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FirstApp"
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>
如您所见，整个 XAML 文档中实际上只有两个节点
-
页面
-
Grid
您可以识别节点（又名标签或元素），因为它们被包裹在 < > 中。
这就像 HTML 一样。
您可以看到 `Page` 节点有许多属性，有助于进一步描述该元素。 属性位于标签内，在闭合 `>` 之前。 当然，每个节点也有一个闭合标签，其名称相同，只是带有一个斜杠 `/`。 例如，`
嵌套元素
XML 和 XAML 的主要特性之一是元素可以包含其他元素，从而创建层次结构。 例如，<Page></Page> 包含 <Grid></Grid> 元素。
这向我们和 .NET 编译器表明 Page 是 Grid 元素的外部容器。 我们可以将其视为 Page 内部有一个 Grid。
更多关于属性
属性通常是名词和动词的混合，就像在这种情况下我们看到有一个 Class 属性。 然而，我们将看到，当我们向 XAML 元素添加行为时，它们最终会成为某个名词项的属性。 例如，当我们拖放一个按钮到我们的 Page 上时，当标记添加到我们的 Page 时，您会看到它会自动获得一些属性。
现在让我们试试，在我们的页面中添加一个按钮。
但首先，让我们确保您设置的设备类型与我相同，这样一切看起来会相似。
请确保选择 13.3 英寸桌面 (1280 x 720) 100% 缩放（如下一张图中突出显示所示）。您可能还需要更改同样突出显示的缩放百分比。 我的设置为 25%，只是为了获得一个合理的快照。
在“工具箱”中找到“按钮”元素，点击并将其拖动到“设计视图”*并将其放到页面上。 完成后，您应该会看到按钮出现（尽管会很小），并且您会在“网格”元素中看到 XAML 出现。 它会看起来像以下内容
这很有道理，因为它添加了一个名为 Button（名词）的新节点，并且该 Button 具有一些属性。 我们看到第一个是 Content=”Button”。
*请注意：您必须将按钮拖放到“设计视图”中才能自动添加属性。您可以将按钮拖放到 XAML 视图中，但如果这样做，属性不会自动添加。
Content 属性是按钮上显示的文本。 因此，如果我们可以看到 Button，我们会看到它上面写着“Button”。 正如我之前提到的，在设计 UWA 用户界面时，屏幕空间非常宝贵，因为您必须同时检查设计视图和 XAML 视图。
您还可以看到设计视图在按钮上捕捉了一些边界线作为参考。 我的显示 168（垂直）和 172（水平）。这些是边距值，表示按钮顶部距离页面顶部的像素数，以及按钮左侧距离页面左侧的像素数。
如果我们查看按钮的 XAML，我们可以看到这些值已自动作为属性添加到我们的按钮上。
<Button Content="Button" HorizontalAlignment="Left" Margin="172,168,0,0" VerticalAlignment="Top"/>
以下是目前按钮拥有的所有属性列表
内容：将显示在按钮上的文本
HorizontalAlignment：边距距离是相对于包含元素左侧的。请注意，我这里说的是包含元素而不是页面，因为此按钮可以进一步嵌套在另一个元素中。 在这种情况下，页面是外部容器，但它可能是其他东西。
边距：4 个值，分别表示与（按顺序）包含元素的左、上、右、下边缘的距离。 如果您以前从未见过，边距值的顺序可能看起来很奇怪。 为了保持它们一致，只需知道它们从左侧开始，然后顺时针围绕元素。 边距是包含元素到被包含元素（在我们的例子中是按钮）边缘的距离。
VerticalAlignment：我们的垂直距离是相对于包含元素的顶部的。
为按钮添加行为（操作）
让我们为按钮添加默认行为（即 Click）。 要做到这一点，非常简单，我们只需在设计视图中双击按钮。 现在就做。
当您双击按钮时，根据您的电脑速度，您的光标可能会变成等待光标。 之后，Visual Studio 会自动为您打开 MainPage.xaml.cs 文件，并显示它添加了一个名为 Button_Click() 的新方法的位置。
然而，如果您构建并运行应用程序并单击按钮，目前什么都不会发生，因为函数中还没有代码。
在我们添加代码并运行之前，让我们回到 XAML，看看 Visual Studio 添加了什么。
回到 Visual Studio 编辑器顶部的 `MainPage.xaml`，我们可以再次查看 XAML 文件。 最初您不会看到任何不同，因为您需要滚动窗口的 XAML 部分（滚动条在下一张图片中突出显示），以便您可以看到 Visual Studio 添加到按钮的新属性。
按钮点击行为
您可以看到 Visual Studio 添加了一个名为 Click 的属性，并将其值设置为“Button_Click”，这是我们关联的 MainPage.xaml.cs 中方法的名称。
当您构建应用程序时，它现在知道在您单击按钮时如何找到该方法。
它如何知道如何找到正确的方法？ 实际上这也定义在 XAML 中。
回到我们的 XAML 顶部，我们看到 Class 属性，它看起来像这样
这告诉编译器，此 XAML 的代码隐藏定义在一个名为 FirstApp 的命名空间中，以及该命名空间中的一个名为 MainPage 的类中。
现在，我们回到 MainPage.xaml.cs 文件，我们可以验证这一点。
x:Class XAML 指令
特殊的 x:Class 是一个 XAML 指令，它告诉编译器相关联的元素（在我们的例子中是
那些其他属性呢？
我们的 <Page> 元素上还有许多其他属性，那么它们有什么用呢？
它们基本上确保所描述的项目来自特定的命名空间。事实上，xmlns 代表的就是（XML 命名空间）。 这是一种确保所描述的元素由特定库定义的方法。 在我们的例子中，它们由默认的 XAML 库定义。 您可以看到还有一个名为 local 的附加 xmlns (xmlns:local="using:FirstApp")，它指向我们的 FirstApp 命名空间，以便也可以引用那里定义的项目。
随着内容的深入，我们将更深入地了解这些命名空间定义的重要性。 目前，只需知道模板添加它们是为了我们可以引用默认 Microsoft XAML 库中的内容。
为按钮点击添加代码
让我们通过向按钮点击方法添加一些代码来结束本章，这样您就可以构建应用程序并看到按钮实际执行某些操作。
打开 MainPage.xaml.cs，转到 Button_Click 方法，并在两个 { } 括号之间添加以下代码。
ContentDialog firstAppDialog = new ContentDialog()
{
Title = "FirstApp",
Content = "Hello from FirstApp"
};
await firstAppDialog.ShowAsync();
当您将代码粘贴到方法中时，Visual Studio 会用一条红色波浪线标记我们添加的最后一行，警告您出了问题。 如果您将鼠标悬停在该行上，它会尝试帮助您解决问题。
点击“[显示潜在修复]”链接，它会弹出一些帮助。
当帮助弹出时，我们希望选择它提供的第二个选项（使方法异步保持 void）。
您可以看到帮助试图向您展示当前的方法签名（粉色），以及它将如何更改方法签名（蓝色）。
当您点击第二个选项时，它会改变方法的签名，并且修复会使波浪线消失。
现在，方法的签名是
private async void Button_ClickAsync(object sender, RoutedEventArgs e)
以前它不包含 async 关键字，现在它包含了。 但是，它仍然返回相同的类型 (void)，这意味着它不返回任何内容。
仔细查看方法名称
然而，问题在于助手将我们的方法重命名为 Button_ClickAsync （旧的只是 Button_Click）。 这将在我们构建应用程序时导致问题。
我们继续重建应用程序。 选择“生成”菜单项，然后在其下选择“重新生成解决方案”菜单项。
构建将出错，我们将在“错误列表”窗口中看到错误（通常在 Visual Studio 的底部）
它试图告诉我们 XAML 正在尝试查找一个名为 Button_Click 的方法，但它无法在任何地方找到它。
那是因为助手将我们的方法重命名为 Button_ClickAysnc。 但是，它没有通过更改我们原始 XAML 中的引用来匹配名称来帮助我们。 回到我们的 MainPag.xaml 文件中，如果我们查看 Button 的 Click 属性，我们会看到它仍然引用一个名为 Button_Click 的方法。
注意：我在 XAML 中添加了一个回车符 (ENTER)，以便我们可以看到完整的 XAML 按钮定义。
两种修复构建的方法
有两种方法可以解决这个问题
-
我们可以将 Click 属性更改为
Click=”Button_ClickAsync”
-
我们可以将方法名（在 MainPage.xaml.cs 中）改回 Button_Click。
由于我比较懒，并且我已经修改了 XAML，所以我直接修改了 Click 属性的值。
现在，当您构建并运行应用程序并单击按钮时，您应该会看到以下内容
结论
这个第一个应用程序有很多问题。 但至少我们有了一个可以运行的东西，并且现在对 XAML 和构建一个基本应用程序有了更多的了解。
即将推出
在接下来的章节中，我们将解释学习构建 UWA 的额外挑战，这些挑战已经变得显而易见。 通用 Windows 应用程序可以在任何地方运行。这要求 UWA 始终高度响应，因为应用程序可能在 Windows Phone 上运行（是啊，没错），如果它不响应，可能会导致用户错过电话。
UWP 架构强制进行不同的学习
因此，UWP 架构（我们正在构建的代码库）的设计者决定让一切异步运行——多个进程同时运行而互不干扰。 然而，这意味着一个新手开发人员必须立即学习这些更深层次的概念，而过去的开发人员（WinForm 开发）能够将其推迟到以后（或永不）学习。
由于 UWA 的异步特性，演示一个简单的弹出对话框实际上要困难得多。 在下一章中，我们将开始构建一个具有更多功能的应用程序，并在此过程中遇到并解决这些挑战。
历史
2017 年 11 月 21 日 - 文章和代码首次发布