単純な 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. (ユニバーサル Windows) テンプレートではなく、 (C++/WinRT) テンプレートを使用していることをご確認ください。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.Direct をインストールしないように注意してください。Be 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>

MainPage に WinUI コントロールを追加するAdd a WinUI control to MainPage

次に、MainPage.xaml を開きます。Next, 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". 次に、既存の Pages の開始タグと終了タグの間に次のマークアップを貼り付けて、既存の 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.h を編集するEdit 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.cpp を編集するEdit MainPage.cpp

MainPage.cpp で、MainPage::ClickHandler の実装内のコードを削除します。これは、XAML マークアップに myButton がなくなったためです。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 ライブラリのスクリーンショット