C++/WinRT Windows UI 程式庫簡單範例A simple C++/WinRT Windows UI Library example

本主題將逐步引導您完成將 Windows UI (WinUI) 程式庫的簡單支援新增至 C++/WinRT 專案的程序。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 套件新增至 C++/WinRT 專案 (例如您稍早新增的 Microsoft.UI.Xaml 套件),並建立該專案時,工具會在專案的 \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 程式庫螢幕擷取畫面