一个简单的 C++WinRT Windows UI 库示例A simple C++/WinRT Windows UI Library example

本主题详述如何向 C++/WinRT 项目添加对 Windows UI (WinUI) 库的简单支持。This topic walks you through the process of adding simple support for the Windows UI (WinUI) Library to your C++/WinRT project. 顺便说一下,Windows UI 库本身是使用 C++/WinRT 编写的。Incidentally, the Windows UI Library is itself written in C++/WinRT.

备注

Windows UI (WinUI) 库工具包以 NuGet 包的形式提供,可以添加到任何现有的或新的项目,只要该项目使用 Visual Studio 即可,这一点我们会在本主题中介绍。The Windows UI (WinUI) Library toolkit is available as NuGet packages that you can add to any existing or new project using Visual Studio, as we'll see in this topic. 如需更多的背景、设置和支持信息,请参阅 Windows UI 库入门For more background, setup, and support info, see Getting started with the Windows UI Library.

创建空白应用 (HelloWinUICppWinRT)Create a Blank App (HelloWinUICppWinRT)

在 Visual Studio 中,使用“空白应用(C++/WinRT)”项目模板创建新项目。In Visual Studio, create a new project using the Blank App (C++/WinRT) project template. 请确保使用的是“(C++/WinRT)”模板,而不是“(通用 Windows)”模板。 Make sure that you're using the (C++/WinRT) template, and not the (Universal Windows) one.

将新项目的名称设置为 HelloWinUICppWinRT,(使文件夹结构与此演练匹配),然后取消选中“将解决方案和项目放在同一目录中”。Set the name of the new project to HelloWinUICppWinRT, and (so that your folder structure will match the walkthrough) uncheck Place solution and project in the same directory.

安装 Microsoft.UI.Xaml NuGet 包Install the Microsoft.UI.Xaml NuGet package

单击“项目”>“管理 NuGet 包...”>“浏览”,在搜索框中键入或粘贴 Microsoft.UI.Xaml,在搜索结果中选择该项,然后单击“安装”,将包安装到项目中(还会看到许可协议提示)。 Click Project > Manage NuGet Packages... > Browse, type or paste Microsoft.UI.Xaml in the search box, select the item in search results, and then click Install to install the package into your project (you'll also see a license agreement prompt). 注意,只能安装 Microsoft.UI.Xaml 包,不要安装 Microsoft.UI.Xaml.Core.DirectBe careful to install only the Microsoft.UI.Xaml package, and not Microsoft.UI.Xaml.Core.Direct.

声明 WinUI 应用程序资源Declare WinUI application resources

打开 App.xaml,将以下标记粘贴到现有的起始和结束 Application 标记之间。Open App.xaml and paste the following markup between the existing opening and closing Application tags.

<Application.Resources>
    <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
</Application.Resources>

将 WinUI 控件添加到 MainPageAdd a WinUI control to MainPage

接下来,打开 MainPage.xamlNext, open MainPage.xaml. 在现有的起始 Page 标记中,有一些 XML 命名空间声明。In the existing opening Page tag there are some xml namespace declarations. 添加 XML 命名空间声明 xmlns:muxc="using:Microsoft.UI.Xaml.Controls"Add the xml namespace declaration xmlns:muxc="using:Microsoft.UI.Xaml.Controls". 然后,将以下标记粘贴到现有的起始和结束 Page 标记之间,覆盖现有的 StackPanel 元素。Then, paste the following markup between the existing opening and closing Page tags, overwriting the existing StackPanel element.

<muxc:NavigationView PaneTitle="Welcome">
    <TextBlock Text="Hello, World!" VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource TitleTextBlockStyle}"/>
</muxc:NavigationView>

根据需要编辑 pch.hEdit pch.h, as necessary

将 NuGet 包(例如此前添加的 Microsoft.UI.Xaml 包)添加到某个 C++/WinRT 项目并生成该项目时,此工具会在项目的 \Generated Files\winrt 文件夹中生成一组投影头文件。When you add a NuGet package to a C++/WinRT project (such as the Microsoft.UI.Xaml package, which you added earlier), and build the project, the tooling generates a set of projection header files in your project's \Generated Files\winrt folder. 如果已按照演练进行操作,则现在会有一个 \HelloWinUICppWinRT\HelloWinUICppWinRT\Generated Files\winrt 文件夹。If you've followed along with the walkthrough, you'll now have a \HelloWinUICppWinRT\HelloWinUICppWinRT\Generated Files\winrt folder. 若要将这些头文件引入项目中,以便解析对这些新类型的引用,可以进入预编译的头文件(通常为 pch.h)中,将它们包括进去。To bring those headers files into your project, so that references to those new types resolve, you can go into your precompiled header file (typically pch.h) and include them.

只需包含与使用的类型对应的标头。You need to include only the headers that correspond to the types that you use. 但下面是一个示例,其中包含为 Microsoft.UI.Xaml 包所有生成的头文件。But here's an example that includes all of the generated header files for the Microsoft.UI.Xaml package.

// pch.h
...
#include "winrt/Microsoft.UI.Xaml.Automation.Peers.h"
#include "winrt/Microsoft.UI.Xaml.Controls.h"
#include "winrt/Microsoft.UI.Xaml.Controls.Primitives.h"
#include "winrt/Microsoft.UI.Xaml.Media.h"
#include "winrt/Microsoft.UI.Xaml.XamlTypeInfo.h"
...

编辑 MainPage.cppEdit MainPage.cpp

MainPage.cpp 中删除 MainPage::ClickHandler 实现中的代码,因为 myButton 不再存在于 XAML 标记中。In MainPage.cpp, delete the code inside your implementation of MainPage::ClickHandler, since myButton is no longer in the XAML markup.

现在可以生成并运行该项目了。You can now build and run the project.

简单的 C++/WinRT Windows UI 库的屏幕截图