教程：在 Visual Studio 中使用 XAML 和 C# 创建第一个通用 Windows 平台应用程序

项目
06/05/2023

注意

如果对通用 Windows 平台 (UWP) 中的当前功能感到满意，则无需将项目类型迁移到 Windows App SDK。 WinUI 2.x 和 Windows SDK 支持 UWP 项目类型。如果要开始使用 WinUI 3 和 Windows App SDK，可以按照 Windows App SDK 教程中的步骤操作。

在这个 Visual Studio 集成开发环境 (IDE) 简介中，你将创建能在任何 Windows 10 或更高版本设备上运行的“Hello World”应用。为此，将使用通用 Windows 平台 (UWP) 项目模板、Extensible Application Markup Language (XAML) 和 C# 编程语言。

如果尚未安装 Visual Studio，请转到 Visual Studio 下载页免费安装。

创建项目

首先，创建通用 Windows 平台项目。项目类型随附了所需的全部模板文件，无需添加任何内容！

打开 Visual Studio，然后在“启动”窗口上，选择“创建新项目” 。
在“创建新项目” 屏幕上，在搜索框中输入“通用 Windows” ，选择“空白应用(通用 Windows)”对应的 C# 模板，然后选择“下一步” 。

注意

如果没有看到“空白应用(通用 Windows)” 项目模板，请单击“安装多个工具和功能” 链接。

Visual Studio 安装程序启动。选择“通用 Windows 平台开发”工作负载，然后选择“修改” 。
为项目提供名称“HelloWorld”，然后选择“创建” 。
接接受“新式通用 Windows 平台项目”对话框中的默认目标版本和最小版本设置受“新式通用 Windows 平台项目” 对话框中的默认目标版本和最小版本设置。

注意

如果你是第一次使用 Visual Studio 创建 UWP 应用，则可能会出现“设置”对话框。选择“开发人员模式”，然后选择“是” 。

Visual Studio 会为你安装其他开发人员模式包。包安装完成时，请关闭“设置”对话框。

打开 Visual Studio，然后在“启动”窗口上，选择“创建新项目” 。
在“创建新项目” 屏幕上，在搜索框中输入“通用 Windows” ，选择“空白应用(通用 Windows)”对应的 C# 模板，然后选择“下一步” 。

注意

如果没有看到“空白应用(通用 Windows)” 项目模板，请单击“安装多个工具和功能” 链接。

Visual Studio 安装程序启动。选择“通用 Windows 平台开发”工作负载，然后选择“修改” 。
为项目提供名称“HelloWorld”，然后选择“创建” 。
接接受“新式通用 Windows 平台项目”对话框中的默认目标版本和最小版本设置受“新式通用 Windows 平台项目” 对话框中的默认目标版本和最小版本设置。

注意

如果这是你第一次使用 Visual Studio 创建 UWP 应用，将显示“启用 Windows 开发人员模式”对话框。选择“开发人员设置”以打开“设置”。打开“开发人员模式”，然后选择“是”。

Visual Studio 会为你安装其他开发人员模式包。包安装完成时，请关闭“设置”对话框。

创建应用程序

现在开始开发吧。你可以添加按钮控件，向按钮添加操作，然后启用"Hello World"应用查看效果。

向设计画布添加按钮

在解决方案资源管理器中双击“MainPage.xaml”，打开拆分视图。

出现两个窗格：一个是“XAML 设计器”，其中包含设计画布；另一个是“XAML 编辑器”，可用于添加或更改代码。
选择“工具箱”，打开“工具箱”弹出窗口。

（如果没有看到“工具箱”选项，可以从菜单栏中打开它。为此，请选择“查看”>“工具栏”。或者，按 Ctrl+Alt+X。）
单击“固定”图标，固定“工具箱”窗口。
单击“按钮”控件，然后将其拖到设计画布上。

如果在 XAML 编辑器中查看代码，就会看到该按钮也已添加到此处：

在解决方案资源管理器中双击“MainPage.xaml”，打开拆分视图。

出现两个窗格：一个是“XAML 设计器”，其中包含设计画布；另一个是“XAML 编辑器”，可用于添加或更改代码。
选择“工具箱”，打开“工具箱”弹出窗口。

（如果没有看到“工具箱”选项，可以从菜单栏中打开它。为此，请选择“查看”>“工具栏”。或者，按 Ctrl+Alt+X。）
选择“固定”图标，固定“工具箱”窗口。
选择“按钮”控件，然后将其拖到设计画布上。

如果在 XAML 编辑器中查看代码，就会看到该按钮也已添加到此处：

向按钮添加标签

在 XAML 编辑器中，将按钮内容的值从“按钮”更改为"Hello World!"。
请注意 XAML 设计器中的按钮也会随之更改。

在 XAML 编辑器中，将按钮内容的值从“按钮”更改为"Hello World!"。
请注意 XAML 设计器中的按钮也会随之更改。

添加事件处理程序

“事件处理程序”听起来复杂，但只不过是事件发生时，被调用代码的另一种名称。在本例中，事件处理程序会将操作添加到“Hello World!”按钮。

双击设计画布上的按钮控件。

在 MainPage.xaml.cs（代码隐藏页）中编辑事件处理程序代码。

现在，有趣的事情发生了。默认的事件处理程序如下所示：

让我们更改它，使它如下所示：

Screenshot showing the C# code for the new async Button_Click event handler.

以下是可用于复制和粘贴的代码：

private async void Button_Click(object sender, RoutedEventArgs e)
{
   MediaElement 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();
}

双击设计画布上的按钮控件。

在 MainPage.xaml.cs（代码隐藏页）中编辑事件处理程序代码。

现在，有趣的事情发生了。默认的事件处理程序如下所示：

让我们更改它，使它如下所示：

Screenshot showing the C# code for the new async Button_Click event handler.

以下是可用于复制和粘贴的代码：

private async void Button_Click(object sender, RoutedEventArgs e)
{
   MediaElement 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();
}