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

项目
01/13/2024

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

注意

WinUI 3 是本机 UI 平台组件，随附 Windows 应用 SDK（与 Windows SDK 完全分离）。有关详细信息，请参阅 WinUI 3。

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

创建项目

首先，创建一个 WinUI 3 项目。项目类型随附了所需的全部模板文件，无需添加任何内容！

重要

Visual Studio 2019 仅支持 Windows App SDK 1.1 及更早版本。建议使用 Visual Studio 2022 开发具有所有版本的 Windows App SDK 的应用。

Windows App SDK 1.1.x 模板可通过安装 Visual Studio 扩展 (VSIX) 获得。

注意

如果已安装 Windows App SDK Visual Studio 扩展 (VSIX)，则在安装另一个版本之前卸载该扩展。有关说明，请参阅管理 Visual Studio 的扩展。

可以通过 Visual Studio 安装最新、稳定的 1.1.x 版本 VSIX。选择“扩展”>“管理扩展”，搜索“Windows 应用 SDK”，然后下载 Windows 应用 SDK 扩展。关闭并重新打开 Visual Studio，并按照提示安装扩展。请确保安装 Windows App SDK 1.1 的模板。
或者，你可以直接从 Visual Studio Marketplace 下载扩展，然后安装：

下载 Windows App SDK C# SDK VS2019 模板

安装模板扩展后，便可以创建第一个项目。有关 Visual Studio 2019 支持的详细信息，请参阅 Windows App SDK 安装工具。本教程的其余部分将假定你使用的是 Visual Studio 2022。

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

注意

如果没有看到“打包的空白应用(桌面版 WinUI 3)”项目模板，请单击“安装多个工具和功能”链接。

Visual Studio 安装程序启动。选择“.NET 桌面开发”工作负载，然后在安装对话框的“安装详细信息”窗格中，选择“Windows App SDK C# 模板”（位于列表底部）。现在选择“修改”。
为项目提供名称“HelloWorld”，然后选择“创建” 。

注意

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

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

创建应用程序

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

向设计画布添加按钮

在“解决方案资源管理器”中，双击“MainWindow.xaml”打开 XAML 标记编辑器。

可以在 XAML 编辑器中添加或更改标记。与 UWP 项目不同，WinUI 3 没有“设计”视图。
查看“窗口”根目录中“StackPanel”中嵌套的“按钮”控件。

更改按钮上的标签

在 XAML 编辑器中，将按钮内容的值从“Click me”更改为“Hello World!”。
请注意，该按钮还指定了一个名为 myButton_Click 的 Click 事件处理程序。我们将在下一步中讲到。

修改事件处理程序

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

在“解决方案资源管理器”中，双击代码隐藏页面 MainWindow.xaml.cs。

在打开的 C# 编辑器窗口中编辑事件处理程序代码。

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

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

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

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

private async void myButton_Click(object sender, RoutedEventArgs e)
{
    var welcomeDialog = new ContentDialog()
    {
        Title = "Hello from HelloWorld",
        Content = "Welcome to your first Windows App SDK app.",
        CloseButtonText = "Ok",
        XamlRoot = myButton.XamlRoot
    };
    await welcomeDialog.ShowAsync();
}

我们刚才做了什么？

该代码使用 ContentDialog 控件在当前窗口中的模式弹出控件中显示欢迎消息。（有关如何使用 Microsoft.UI.Xaml.Controls.ContentDialog 的详细信息，请参阅ContentDialog 类。）

运行应用程序

是时候生成、部署和启动“Hello World”Windows App SDK 应用，看看它是什么样子了。操作方法如下。

使用“播放”按钮（它包含文本“HelloWorld (包)”）在本地计算机上启动应用程序。

（或者，也可以在菜单栏选择“调试”>“开始调试”或按 F5 启动应用。）
应用在初始屏幕消失后不久出现，请查看该应用。此应用应类似于下图：
选择“Hello world”按钮。

Windows 10 或更高版本的设备将显示一条消息，指出“欢迎使用第一个 Windows App SDK 应用”，标题为“Hello from HelloWorld”。单击“确定”关闭消息。
要关闭应用，请在工具栏中选择“停止调试”按钮。（或者，从菜单栏中选择“调试”>“停止调试”或按 Shift+F5。）