通过

创建“Hello， World！”使用 .NET 9 的 UWP 应用 （XAML）

本教程将指导您如何将 XAML、C# 和 .NET 9 与 本机 AOT（提前生成）结合使用，为 Windows 上的通用 Windows 平台（UWP）创建一个简单的 "Hello, World!" 应用程序。 使用 Microsoft Visual Studio 中的单个项目，可以生成在所有受支持的 Windows 10 和 Windows 11 版本上运行的应用。

在这里，你将了解如何：

  • 在 Visual Studio 中创建新的面向 .NET 9 的 UWP 项目。
  • 编写 XAML 以更改起始页上的 UI。
  • 在 Visual Studio 的本地桌面上运行项目。
  • 按按钮时，使用 SpeechSynthesizer 使应用说话。

先决条件

注释

本教程使用 Visual Studio 2022。 如果使用的是不同版本的 Visual Studio，则看起来可能略有不同。

步骤 1：在 Visual Studio 中创建新项目

  1. 启动 Visual Studio。

  2. 在“ 文件 ”菜单中，选择“ 新建 > 项目 ”以打开 “新建项目 ”对话框。

  3. 通过从“项目类型”下拉列表中选择 C# 和“项目类型”下拉列表中的 UWP 来筛选可用模板列表，以查看适用于 C# 开发人员的可用 UWP 项目模板列表。

    “创建新项目”屏幕的屏幕截图

    （如果未看到任何 UWP 模板，则可能缺少用于创建 UWP 应用的组件。可以通过从 Windows“开始”菜单打开 Visual Studio 安装程序 来重复安装过程并添加 UWP 支持。有关详细信息，请参阅 设置 Visual Studio for UWP 开发 。

  4. 选择 UWP 空白应用 模板。

    重要

    请确保选择 UWP 空白应用 模板。 如果选择“UWP 空白应用 (.NET Native)”模板，它将面向 .NET Native 运行时，而不是 .NET 9。 面向 .NET Native 的应用无权访问最新的 .NET 和 C# 功能或安全性和性能改进。 对于这两种项目类型之间的差异，请参阅 通过对 .NET 9 和 Native AOT 的预览 UWP 支持，实现 UWP 应用的现代化。

  5. 选择 “下一步”，并输入“HelloWorld”作为 项目名称。 选择 创建。

    “配置新项目”屏幕的屏幕截图

    注释

    如果这是你第一次使用 Visual Studio，你可能会看到一个“设置”对话框，要求你启用 开发人员模式。 开发人员模式是一种特殊设置，可启用某些功能，例如直接运行应用的权限，而不是仅从应用商店运行应用。 有关更多信息，请阅读 启用你的设备以进行开发。 若要继续进行本指南，请选择 开发者模式，点击 确认，然后关闭对话框。

    面向开发人员的 Windows 设置屏幕的屏幕截图

  6. 此时会显示“目标版本/最低版本”对话框。 本教程的默认设置很好，因此选择 “确定” 创建项目。

    Visual Studio 中“新建 Windows 项目”对话框的屏幕截图

  7. 当新项目打开时，其文件将显示在右侧 的“解决方案资源管理器” 窗格中。 可能需要选择 “解决方案资源管理器 ”选项卡，而不是 “属性 ”或“ GitHub Copilot 聊天 ”选项卡才能查看文件。

    Visual Studio 解决方案资源管理器窗格的屏幕截图，其中突出显示了 HelloWorld 项目并展开了所有文件夹

尽管 UWP 空白应用 是一个最小的模板，但它仍包含大量文件。 这些文件对于所有使用 C# 的 UWP 应用都至关重要。 在 Visual Studio 中创建的每个 UWP 项目都包含它们。

文件中有哪些内容？

若要查看和编辑项目中的文件，请在 解决方案资源管理器中双击该文件。 像文件夹一样展开 XAML 文件以查看其关联的代码文件。 XAML 文件在拆分视图中打开，显示设计图面和 XAML 编辑器。

注释

什么是 XAML？ 可扩展应用程序标记语言（XAML）是用于定义应用的用户界面的语言。 可以使用 Visual Studio 设计工具手动输入或创建它。 .xaml 文件有一个.xaml.cs代码隐藏文件，其中包含逻辑。 XAML 和后台代码一起构成了完整的类。 有关详细信息，请参阅 XAML 概述。

App.xaml 和 App.xaml.cs

  • App.xaml 是声明跨应用使用的资源的文件。
  • App.xaml.cs是 App.xaml 的后台代码文件。 与所有代码隐藏页一样，它包含调用该方法的 InitializeComponent 构造函数。 你不编写 InitializeComponent 方法。 它由 Visual Studio 生成，其主要目的是初始化 XAML 文件中声明的元素。
  • App.xaml.cs是应用的入口点。
  • App.xaml.cs 还包含用于处理应用的激活 和挂起 的方法。

MainPage.xaml

  • MainPage.xaml 是定义应用的 UI 的位置。 可以使用 XAML 标记直接添加元素，也可以使用 Visual Studio 提供的设计工具。
  • MainPage.xaml.cs是 MainPage.xaml 的后台代码页。 这是您添加应用逻辑和事件处理程序的位置。
  • 这两个文件一起定义了一个名为MainPage的新类，该类在HelloWorld命名空间中继承自Page。

Package.appxmanifest

  • 描述应用的清单文件：其名称、说明、磁贴、起始页等。
  • 包括应用包含的依赖项、资源和文件的列表。

一组徽标图像

  • 资产/Square150x150Logo.scale-200.png 和 Wide310x150Logo.scale-200.png 表示你的应用（中等或宽大小）在开始菜单中。
  • 资产/Square44x44Logo.png 表示您的应用，在“开始”菜单、任务栏和任务管理器的应用列表中。
  • 资产/StoreLogo.png 代表你在 Microsoft 应用商店中的应用程序。
  • 资产/SplashScreen.scale-200.png 是应用启动时显示的启动画面。
  • 当系统锁定时，资产/LockScreenLogo.scale-200.png 可用于表示锁屏上的应用。

步骤 2：添加按钮

使用设计器视图

让我们向页面添加一个按钮。 在本教程中，只需处理前面列出的几个文件：App.xaml、MainPage.xaml 和MainPage.xaml.cs。

  1. 双击 MainPage.xaml 以在 XAML 编辑器中打开它。

    Visual Studio 的屏幕截图，其中显示了 X A M L 编辑器中的主页

    注释

    使用使用 .NET 9 的 UWP 空白应用 模板时，不会看到设计视图。 如果要使用具有 XAML 设计视图的 UWP 项目，可以改用 UWP 空白应用（.NET Native） 模板。 如前所述， UWP 空白应用（.NET Native） 模板与 UWP 空白应用 模板略有不同，但它具有相同的基本结构。 主要区别在于 UWP 空白应用 （.NET Native） 模板使用 .NET Native 编译应用。 请参阅利用预览版 UWP 对 .NET 9 和原生 AOT 的支持将 UWP 应用现代化，了解使用新 .NET 9 模板可带来的优势。

  2. 将以下 XAML 代码添加到 <Grid> MainPage.xaml 中的元素。 可以键入它，也可以从此处复制并粘贴它：

    <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>

  3. 此时，你已创建了一个非常简单的应用。 这是生成、部署和启动应用并查看其外观的好时机。 可以在本地计算机、仿真器或模拟器或远程设备上调试应用程序。 下面是 Visual Studio 中的目标设备菜单：

    用于选择应用调试设备目标的下拉列表

    默认情况下，应用在本地计算机上运行。 目标设备菜单提供了多个选项，用于在桌面设备系列的设备上调试应用。

    • HelloWorld （它在本地计算机上运行）
    • WSL
    • 下载新模拟器...

  4. 运行应用以查看按钮的作用。 若要在本地计算机上开始调试，可以在菜单中选择调试 | 开始调试项目，在工具栏中单击带有HelloWorld标签的“开始调试”按钮，或者按 F5 键来运行应用。

    应用将在窗口中打开，并首先显示默认的初始屏幕。 初始屏幕由图像（SplashScreen.png）和背景色（在应用的清单文件中指定）定义。

    启动画面消失，并显示你的应用。 它的外观如下所示：

    正在运行的 HelloWorld 应用程序的屏幕截图，其中现在包含一个标有“Button”文字的按钮

  5. 按 Windows 键打开 “开始 ”菜单，然后选择“ 全部 ”以显示所有应用。 请注意，在本地部署应用会将它添加到 “开始” 菜单中的程序列表中。 若要稍后再次运行应用（不在调试模式下），可以在 “开始 ”菜单中选择它。

    它没有做太多事情——至少现在如此——但恭喜，你已经创建并部署了第一个 UWP 应用到你的本地计算机！

  6. 停止调试：

    单击工具栏中的）。Stop debugging button

    –或–

    在 “调试 ”菜单中，单击“ 停止调试”。

    –或–

    关闭应用窗口。

  7. 通过将Content的值从Button更改为Hello, world!来更改按钮的文本。

    <Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>

    如果再次运行应用，按钮将更新以显示新文本。

步骤 3：事件处理程序

“事件处理程序”听起来很复杂，但这只是事件发生时调用的代码的另一个名称（例如用户单击按钮）。

  1. 如果你还没有停止应用程序，请停止它的运行。

  2. 开始在 XAML 编辑器中键入 Click 内容，Visual Studio 将显示可能的事件列表。 从列表中选择“单击”。

    XAML 编辑器的屏幕截图，其中显示了“属性”窗格中的 Click 事件

  3. 接下来，从列表中选择<New Event Handler>。 这会在代码隐藏文件中创建新的事件处理程序方法（MainPage.xaml.cs），并将 Click 事件添加到 XAML 代码中的 button 元素。

    XAML 编辑器的屏幕截图，其中显示了在属性窗格中创建新事件处理程序的提示

    XAML 编辑器会自动将 Click 事件添加到 XAML 代码中的按钮元素：

    <Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top" Click="button_Click"/>

    此外，它还将事件处理程序添加到代码隐藏文件（MainPage.xaml.cs）中。 事件处理程序是在单击按钮时调用的方法。 方法的名称是 button_Click，它具有两个参数： object sender 和 RoutedEventArgs e。

    private void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{

}

    该 Click 事件是按钮的标准事件。 当用户单击该按钮时， button_Click 将调用该方法。

  4. 在 MainPage.xaml.cs（后台代码页）中编辑事件处理程序代码。 这就是事情变得有趣的地方。 让我们对其进行更改，如下所示：

    private async void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    var mediaElement = new MediaElement();
    var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
    Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
    mediaElement.SetSource(stream, stream.ContentType);
    mediaElement.Play();
}

    请确保方法签名现在包含 异步 关键字，否则在尝试运行应用程序时会出现错误。

我们刚刚做了什么？

此代码使用一些 Windows API 创建语音合成对象，然后提供一些要说的文本。 （有关使用 SpeechSynthesis 的详细信息，请参阅 Windows 运行时 （WinRT） API 文档中的 SpeechSynthesis 命名空间 。

当你运行应用程序然后点击按钮时，你的计算机（或手机）会直接发出“你好，世界！”的声音。

概要

恭喜，你已使用 .NET 9 为 Windows 创建了第一个 UWP 应用！

若要了解如何使用 XAML 来布局应用将使用的控件，请尝试 网格教程，或直接跳转到 后续步骤？

相关内容