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

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

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

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

[前提条件]

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

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

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

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

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

   

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

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

   一. Solution Explorerで、project ノードを右クリックし、 Manage NuGet パッケージを選択します。

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

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

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

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

5. カスタム コントロールまたはユーザー コントロールをライブラリに追加します。 これを行うには、Visual Studioでプロジェクトを右クリックし、Add>New Item をクリックして、左側のペインで WinUI を選択します。 このチュートリアルでは、新しい ユーザー コントロール (WinUI) を追加し、 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 project をビルドして、コンポーネントの .winmd ファイルを生成できるようになりました。

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

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

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

1. 新しい C++ Windows App SDK アプリケーション projectをソリューションに追加します。 Visual Studioでソリューションを右クリックし、Add>New Project を選択します。 Windows App SDKによって提供される C++ Blank App,Packaged (WinUI in Desktop) テンプレートを選択します。 このチュートリアルでは、CppAppアプリに名前を付けました。

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

   注

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

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

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

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

   注

   Package.appxmanifest ファイルがVisual Studio Solution Explorerに表示されないという既知の問題があります。 これを回避するには、C++ projectを右クリックし、unload Projectを選択し、projectをダブルクリックしてCppApp.vcxproj ファイルを開きます。 project ファイルに次のエントリを追加し、projectを再読み込みします。

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

   Package.appxmanifestで、次のアクティブ化可能なクラス登録を追加します。 WinUI 型をアクティブ化するには、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. スタートアップ projectとして CppApp を設定します。CppApp を右クリックし、 [スタートアップ Project。 ソリューション構成を x86に設定します。 ビルドする前に、Visual Studio 2022 ビルド ツールを使用してビルドするためにソリューションのターゲットを変更する必要がある場合もあります。 ソリューションを右クリックし、[ソリューションの 再ターゲット] を選択し、プラットフォーム ツールセットを v143 にアップグレードします。

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

既知の問題

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

関連トピック

• C#/WinRT オーサリング サンプル アプリ
• C#/WinRTコンポーネントの作成
• 管理コンポーネントホスティング