チュートリアル - WinUI 3 コントロールを使用して C# コンポーネントを作成し、Windows App SDK を使用する C++/WinRT アプリから使用する

C#/WinRT では、WinUI カスタム型やカスタム コントロールなど、Windows ランタイム コンポーネントの作成がサポートされています。 これらのコンポーネントは、Windows App SDK を使用する C# または C++/WinRT アプリケーションから使用できます。 C#/WinRT v1.6.4 以降を使用して、NuGet パッケージのサポートを使用してランタイム コンポーネントを作成することをお勧めします。

サポートされているシナリオの詳細については、 C#/WinRT GitHub リポジトリでの C#/WinRT コンポーネントの作成 に関するページを参照してください。

このチュートリアルでは、カスタム WinUI 3 コントロールを使用して C# コンポーネントを作成する方法と、Windows App SDK プロジェクト テンプレートを使用して C++/WinRT アプリからそのコンポーネントを使用する方法について説明します。

[前提条件]

このチュートリアルでは、次のツールとコンポーネントが必要です。

• Visual Studio 2022
• .NET 6.0 SDK
• Windows App SDK VSIX (安定したチャネルからの 1.1)

Windows App SDK を使用して C#/WinRT コンポーネントを作成する

1. Windows App SDK によって提供される クラス ライブラリ (デスクトップの WinUI 3) テンプレートを使用して、新しい C# ライブラリ プロジェクトを作成します。 このチュートリアルでは、ライブラリ プロジェクトに WinUIComponentCs 、ソリューションに AuthoringWinUI という名前を付けます。

   [ソリューションとプロジェクトを同じディレクトリに配置する] ボックスをオフのままにします (そうしないと、前のセクションの C++ アプリケーションの packages フォルダーが C# ライブラリ プロジェクトに干渉することになります)。

   

2. 既定で含まれている Class1.cs ファイルを削除します。

3. プロジェクトに最新の Microsoft.Windows.CsWinRT NuGet パッケージをインストールします。

   一. ソリューション エクスプローラーで、プロジェクト ノードを右クリックし、[ NuGet パッケージの管理] を選択します。

   二. Microsoft.Windows.CsWinRT NuGet パッケージを検索し、最新バージョンをインストールします。

4. ライブラリ プロジェクトに次のプロパティを追加します。

   <PropertyGroup>   
       <CsWinRTComponent>true</CsWinRTComponent>
   </PropertyGroup>
   

   • CsWinRTComponent プロパティは、プロジェクトをビルドするときに.winmd ファイルが生成されるように、プロジェクトが Windows ランタイム コンポーネントであることを指定します。

5. カスタム コントロールまたはユーザー コントロールをライブラリに追加します。 これを行うには、Visual Studio でプロジェクトを右クリックし、[ 追加>新しい項目] をクリックし、左側のウィンドウで WinUI を選択します。 このチュートリアルでは、新しい ユーザー コントロール (WinUI 3) を追加し、 NameReporter.xamlという名前を付けた。 NameReporter ユーザー コントロールを使用すると、ユーザーは適切な TextBox コントロールに姓と名を入力し、ボタンをクリックできます。 次に、ユーザーが入力した名前のメッセージ ボックスがコントロールに表示されます。

6. NameReporter.xaml ファイルに次のコードを貼り付けます。

   <UserControl
   x:Class="WinUIComponentCs.NameReporter"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:WinUIComponentCs"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d">
   
       <StackPanel HorizontalAlignment="Center">
           <StackPanel.Resources>
               <Style x:Key="BasicTextStyle" TargetType="TextBlock" BasedOn="{StaticResource BodyTextBlockStyle}">
                   <Setter Property="Margin" Value="10,10,10,10"/>
               </Style>
           </StackPanel.Resources>
   
           <TextBlock Text="Enter your name." Margin="0,0,0,10"/>
           <StackPanel Orientation="Horizontal" Margin="0,0,0,10">
               <TextBlock Style="{StaticResource BasicTextStyle}">
                   First Name:
               </TextBlock>
               <TextBox Name="firstName" />
           </StackPanel>
           <StackPanel Orientation="Horizontal" Margin="0,0,0,10">
               <TextBlock Style="{StaticResource BasicTextStyle}">
                   Last Name:
               </TextBlock>
               <TextBox Name="lastName" />
           </StackPanel>
           <Button Content="Submit" Click="Button_Click" Margin="0,0,0,10"/>
           <TextBlock Name="result" Style="{StaticResource BasicTextStyle}" Margin="0,0,0,10"/>
       </StackPanel>
   </UserControl>
   

7. NameReporter.xaml.csに次のメソッドを追加します。

   using System.Text;
   ...
   private void Button_Click(object sender, RoutedEventArgs e)
   {
       StringBuilder displayText = new StringBuilder("Hello, ");
       displayText.AppendFormat("{0} {1}.", firstName.Text, lastName.Text);
       result.Text = displayText.ToString();
   }
   

8. WinUIComponentCs プロジェクトをビルドして、コンポーネントの.winmd ファイルを生成できるようになりました。

Windows App SDK C++/WinRT アプリからコンポーネントを参照する

次の手順では、C++/WinRT Windows App SDK アプリケーションから前のセクションから作成したコンポーネントを使用する方法を示します。 C++ から C#/WinRT コンポーネントを使用するには、現在、単一プロジェクトテンプレートである 空のアプリ Packaged (デスクトップの WinUI 3) を使用する必要があります。 C# コンポーネントは、クラス登録なしで C# パッケージ アプリから参照することもできます。

別の Windows アプリケーション パッケージ (WAP) プロジェクトを使用するパッケージ アプリからの消費は、現在サポートされていません。 サポート プロジェクト構成の最新の更新プログラムについては、C#/WinRT GitHub リポジトリで されている C#/WinRT コンポーネントの作成に関するページを参照してください。

1. 新しい C++ Windows App SDK アプリケーション プロジェクトをソリューションに追加します。 Visual Studio でソリューションを右クリックし、[>新しいプロジェクト追加] を選択します。 Windows App SDK によって提供される C++ 空のアプリ、パッケージ (デスクトップの WinUI 3) テンプレートを選択します。 このチュートリアルでは、CppAppアプリに名前を付けました。

2. C++ アプリから C# コンポーネントにプロジェクト参照を追加します。 Visual Studio で、C++ プロジェクトを右クリックし、[ 追加>Reference] を選択し、 WinUIComponentCs プロジェクトを選択します。

   注

   NuGet パッケージ参照としてのコンポーネントの使用は、いくつかの制限付きでサポートされています。 つまり、カスタム ユーザー コントロールを持つコンポーネントは、現在、NuGet パッケージ参照として使用できません。

3. アプリの pch.h ヘッダー ファイルに、次の行を追加します。

   #include <winrt/WinUIComponentCs.h>
   #include <winrt/WinUIComponentCs.WinUIComponentCs_XamlTypeInfo.h>
   

4. パッケージ マニフェスト ファイルを開いて、Package.appxmanifestを確認してください。

   注

   Package.appxmanifest ファイルが Visual Studio ソリューション エクスプローラーに表示されないという既知の問題があります。 これを回避するには、C++ プロジェクトを右クリックし、[プロジェクトの アンロード] を選択し、プロジェクトをダブルクリックして CppApp.vcxproj ファイルを開きます。 プロジェクト ファイルに次のエントリを追加し、プロジェクトを再読み込みします。

   <ItemGroup>
       <AppxManifest Include="Package.appxmanifest">
       <SubType>Designer</SubType>
       </AppxManifest>
   </ItemGroup>
   

   Package.appxmanifestで、次のアクティブ化可能なクラス登録を追加します。 WinUI 型をアクティブ化するには、WinUIComponentCs.WinUIComponentCs_XamlTypeInfo.XamlMetaDataProvider クラスの追加のActivatableClass エントリも必要です。 ファイルを編集するには、 Package.appxmanifest ファイルを右クリックし、[ ファイルを開く>XML (テキスト エディター) を選択します。

   <!--In order to host the C# component from C++, you must add the following Extension group and list the activatable classes-->
   <Extensions>
       <Extension Category="windows.activatableClass.inProcessServer">
           <InProcessServer>
               <Path>WinRT.Host.dll</Path>
               <ActivatableClass ActivatableClassId="WinUIComponentCs.NameReporter" ThreadingModel="both" />
               <ActivatableClass ActivatableClassId="WinUIComponentCs.WinUIComponentCs_XamlTypeInfo.XamlMetaDataProvider" ThreadingModel="both" />
           </InProcessServer>
       </Extension>
   </Extensions>
   

5. MainWindow.xaml ファイルを開きます。

   一. ファイルの先頭にあるコンポーネントの名前空間への参照を追加します。

   xmlns:custom="using:WinUIComponentCs"
   

   二. 既存の XAML コードにユーザー コントロールを追加します。

   <StackPanel>
       ...
       <custom:NameReporter/>
   </StackPanel>
   

6. CppApp をスタートアップ プロジェクトとして設定してください。CppAppを右クリックして、[スタートアップ プロジェクトとして設定] を選択してください。 ソリューション構成を x86に設定します。 ビルドする前に、Visual Studio 2022 ビルド ツールを使用してビルドするためにソリューションのターゲットを変更する必要がある場合もあります。 ソリューションを右クリックし、[ソリューションの 再ターゲット] を選択し、プラットフォーム ツールセットを v143 にアップグレードします。

7. アプリをビルドして実行し、カスタム NameReporter コントロールを表示します。

既知の問題

• C# コンポーネントをプロジェクト参照として使用するには、 PublishReadyToRun を False に設定する必要があります。 詳細については、 Github Issue #1151 を参照してください。
• C++ からの AnyCPU 用に構築された C# コンポーネントの使用は、現在 x86 アプリケーションからのみサポートされています。 x64 と Arm64 アプリの場合、次のようなランタイム エラーが発生します。 %1 は有効な Win32 アプリケーションではありません。 詳細については、 Github Issue #1151 を参照してください。

関連トピック

• C#/WinRT 著作サンプルアプリ
• C#/WinRT コンポーネントの作成
• マネージド コンポーネントのホスティング