WinUI 3 アプリを作成する

主要な概念

  • パッケージ アプリ: パッケージ アプリは、MSIX を使用してパッケージ化されます。 MSIX はパッケージ形式で、これによりエンドユーザーは最新の UI を使用して Windows アプリを簡単にインストール、アンインストール、および更新できます。
  • 非パッケージ アプリ: パッケージ化されていないアプリでは MSIX は使用されません。 これらは通常、.exe または .msi ファイルを使用してインストールおよび更新されます。 多くの非パッケージ アプリでは、エンドユーザーは、クラシック UI を使用してインストール ウィザードを完了します。

パッケージ化された C# WinUI 3 アプリの手順

Windows App SDK 1.0 を使用して、C# および .NET 5 でパッケージ化された WinUI 3 デスクトップ アプリを作成するには:

  1. Visual Studio で、 [ファイル] -> [新規作成] -> [プロジェクト] の順に選択します。

  2. プロジェクトのドロップダウン フィルターで、 [C#][Windows] 、および [WinUI] をそれぞれ選択します。

  3. 次のプロジェクトの種類のいずれかを選択し、 [次へ] をクリックします。

    • Blank App, Packaged (WinUI 3 in Desktop) (空のアプリ、パッケージ (デスクトップの WinUI 3)) : WinUI ベースのユーザー インターフェイスを使用するデスクトップ C# .NET アプリを作成します。 生成されるプロジェクトには、パッケージ マニフェストと、アプリを MSIX パッケージにビルドするために必要なその他のサポートが構成されており、別のパッケージ プロジェクトを使用する必要はありません。 このプロジェクトの種類の詳細については、「単一プロジェクト MSIX を使用してアプリをパッケージ化する」を参照してください。

      注意

      Visual Studio 2019 と共に Windows App SDK 1.0 Preview 2 をインストールした場合、このプロジェクト テンプレートには、ビルド エラーが発生する既知の問題があります。 この問題を解決するには、Windows App SDK 1.0 Preview 2 をインストールした後に、Single-project MSIX Packaging Tools for Visual Studio 2019 VSIX 拡張機能をインストールしてください。

    • Blank App, Packaged with Windows Application Packaging Project (WinUI 3 in Desktop) (空のアプリ、Windows アプリケーション パッケージ プロジェクトを使用したパッケージ (デスクトップの WinUI 3)) : WinUI ベースのユーザー インターフェイスを使用するデスクトップ C# .NET アプリを作成します。 生成されるソリューションには、アプリを MSIX パッケージに組み込むよう構成されている別の Windows アプリケーション パッケージ プロジェクトが含まれています。

    新しいプロジェクトの作成ウィザードで [空のアプリ、パッケージ (Win UI in Desktop)] オプションが強調表示されているスクリーンショット。

  4. プロジェクト名を入力し、必要に応じてその他のオプションを選択して、 [作成] をクリックします。

  5. 次のダイアログ ボックスで、 [ターゲット バージョン] を Windows 10 バージョン 2004 (ビルド 19041) に、 [最小バージョン] を Windows 10 バージョン 1809 (ビルド 17763) に設定し、 [OK] をクリックします。

    ターゲットおよび最小バージョン

  6. この時点で、Visual Studio により、1 つ以上のプロジェクトが生成されます。

    • <プロジェクト名> (デスクトップ) : このプロジェクトには、アプリのコードが格納されています。 App.xaml ファイルと App.xaml.cs 分離コード ファイルでは、アプリ インスタンスを表す Application クラスが定義されます。 MainWindow.xaml ファイルと MainWindow.xaml.cs 分離コード ファイルでは、アプリによって表示されるメイン ウィンドウを表す MainWindow クラスが定義されます。 これらのクラスは、WinUI に用意されている Microsoft.UI.Xaml 名前空間の型から派生します。

      Blank App, Packaged (WinUI 3 in Desktop) (空のアプリ、パッケージ (デスクトップの WinUI 3)) プロジェクト テンプレートを使用した場合、このプロジェクトにはアプリを MSIX パッケージに組み込むためのパッケージ マニフェストも含まれます。

      Visual Studio で、ソリューション エクスプローラー ペインと、単一プロジェクト MSIX のメインの Windows XAML.CS ファイルの内容が表示されているスクリーンショット。

    • プロジェクト名 (パッケージ) : このプロジェクトは、Blank App, Packaged with Windows Application Packaging Project (WinUI 3 in Desktop) (空のアプリ、Windows アプリケーション パッケージ プロジェクトを使用したパッケージ (デスクトップの WinUI 3)) プロジェクト テンプレートを使用した場合にのみ生成されます。 このプロジェクトは、アプリを MSIX パッケージに組み込むように構成されている Windows アプリケーション パッケージ プロジェクトです。 このプロジェクトは、アプリのパッケージ マニフェストを格納しており、既定では、ソリューションのスタートアップ プロジェクトになります。

      Visual Studio で、ソリューション エクスプローラー ペインと、パッケージ アプリ x マニフェスト ファイルの内容を表示しているスクリーンショット。

  7. 構成マネージャー でプロジェクトの配置を有効にします。 これらの手順で配置を有効にしないと、開発用コンピューター上でプロジェクトを実行またはデバッグしようとすると、次のようなエラーが発生します。"The project needs to be deployed before we can debug. Please enable Deploy in the Configuration Manager" (デバッグする前にプロジェクトを配置する必要があります。構成マネージャーで配置を有効にしてください).

    1. [ビルド] -> [構成マネージャー] を選択します。

    2. 構成マネージャー で、構成とプラットフォームの組み合わせごとに [配置] チェック ボックスをクリックします (たとえば、 [デバッグ][x86][デバッグ][arm64][リリース][x64] など)。

      注意

      [配置] チェックボックスと同じ行にある [構成][プラットフォーム] のドロップダウンではなく、上部にある [アクティブ ソリューション構成][アクティブ ソリューション プラットフォーム] のドロップダウンを必ず使用してください。

      構成マネージャーで [配置] を有効にする

  8. アプリ プロジェクトに新しい項目を追加するには、ソリューション エクスプローラー[ <プロジェクト名> (デスクトップ)] プロジェクト ノードを右クリックし、 [追加] -> [新しい項目] の順に選択します。 [新しい項目の追加] ダイアログ ボックスで、 [WinUI] タブを選択し、追加する項目を選択して、 [追加] をクリックします。 使用可能な項目の詳細については、「WinUI 3 の項目テンプレート」を参照してください。

    [新しい項目の追加] ダイアログ ボックスで、[インストール済み] > [Visual C シャープの項目] > [Win U I] を選択し、[空白のページ] オプションが強調表示されているスクリーンショット。

  9. 開発用コンピューター上でソリューションをビルドして実行し、アプリがエラーなしで動作することを確認します。

主要な概念

  • パッケージ アプリ: パッケージ アプリは、MSIX を使用してパッケージ化されます。 MSIX はパッケージ形式で、これによりエンドユーザーは最新の UI を使用して Windows アプリを簡単にインストール、アンインストール、および更新できます。
  • 非パッケージ アプリ: パッケージ化されていないアプリでは MSIX は使用されません。 これらは通常、.exe または .msi ファイルを使用してインストールおよび更新されます。 多くの非パッケージ アプリでは、エンドユーザーは、クラシック UI を使用してインストール ウィザードを完了します。

パッケージ化されていない C# WinUI 3 アプリの手順

Windows App SDK 1.0 を使用して、C# および .NET 5 でパッケージ化されていない WinUI 3 デスクトップ アプリを作成するには:

  1. Windows App SDK ランタイムと MSIX パッケージをインストールします。 これらは、パッケージ化されていないアプリを実行して展開するために必要です。

  2. [Blank App, Packaged (WinUI 3 in Desktop)](空のアプリ、パッケージ (WinUI 3 in Desktop)) プロジェクト テンプレートを使用して新しいアプリを作成します。 パッケージされたアプリから始めるには、XAML 診断を使用する必要があります。

  3. 次のプロパティをプロジェクト ファイルに追加します。

    <WindowsPackageType>None</WindowsPackageType>
    

    Visual Studio 2019 - &quot;なし&quot; に設定された WindowsPackageType が強調表示された C# プロジェクト ファイル

  4. Visual Studio でデバッグするには、起動ドロップダウンで "パッケージ化されていない" 起動プロファイルを選択します。 そうしないと、"プロジェクトでは、プロファイルを実行する方法が不明です ..." というエラーが表示されます。

    注意

    これは、コマンド ラインまたは Windows エクスプローラーからアプリケーション (.exe) を実行する場合は必要ありません。

    Visual Studio - C# アプリケーションのパッケージ化されていない起動プロファイルが強調表示された起動ドロップダウン

  5. まだ行っていない場合は、Windows App SDK ランタイムと MSIX パッケージをインストールします。これは、アプリを実行してデプロイするために必要です。

  6. ビルドして実行します。 展開に関する追加情報については、パッケージ化されていない C# アプリの展開に関する Windows App SDK チュートリアルを

  7. 参照してください。 このチュートリアルでは、アプリで Windows App SDK と WinUI 3 API を使用できるように、ブートストラップ API を使用して Bootstrapper コンポーネントを初期化する手順を説明します。

主要な概念

  • パッケージ アプリ: パッケージ アプリは、MSIX を使用してパッケージ化されます。 MSIX はパッケージ形式で、これによりエンドユーザーは最新の UI を使用して Windows アプリを簡単にインストール、アンインストール、および更新できます。
  • 非パッケージ アプリ: パッケージ化されていないアプリでは MSIX は使用されません。 これらは通常、.exe または .msi ファイルを使用してインストールおよび更新されます。 多くの非パッケージ アプリでは、エンドユーザーは、クラシック UI を使用してインストール ウィザードを完了します。

パッケージ化された C++ WinUI 3 アプリの手順

Windows App SDK 1.0 を使用して、C++ でパッケージ化された WinUI 3 デスクトップ アプリを作成するには:

  1. Visual Studio で、 [ファイル] -> [新規作成] -> [プロジェクト] の順に選択します。

  2. プロジェクトのドロップダウン フィルターで、 [C++][Windows] 、および [WinUI] を選択します。

  3. 次のプロジェクトの種類のいずれかを選択し、 [次へ] をクリックします。

    • Blank App, Packaged (WinUI 3 in Desktop) (空のアプリ、パッケージ (デスクトップの WinUI 3)) : WinUI ベースのユーザー インターフェイスを使用するデスクトップ C++ アプリを作成します。 生成されるプロジェクトには、パッケージ マニフェストと、アプリを MSIX パッケージにビルドするために必要なその他のサポートが構成されており、別のパッケージ プロジェクトを使用する必要はありません。 このプロジェクトの種類の詳細については、「単一プロジェクト MSIX を使用してアプリをパッケージ化する」を参照してください。

      注意

      このプロジェクトの種類は、生成される MSIX パッケージ内で 1 つの実行可能ファイルのみをサポートします。 複数の実行可能ファイルを 1 つの MSIX パッケージにまとめる必要がある場合は、Blank App, Packaged with Windows Application Packaging Project (WinUI 3 in Desktop) (空のアプリ、Windows アプリケーション パッケージ プロジェクト を使用したパッケージ (デスクトップの WinUI 3)) プロジェクト テンプレートを使用するか、Windows アプリケーション パッケージ プロジェクトをソリューションに追加する必要があります。

    • Blank App, Packaged with Windows Application Packaging Project (WinUI 3 in Desktop) (空のアプリ、Windows アプリケーション パッケージ プロジェクトを使用したパッケージ (デスクトップの WinUI 3)) : WinUI ベースのユーザー インターフェイスを使用するデスクトップ C++ アプリを作成します。 生成されるソリューションには、アプリを MSIX パッケージに組み込むよう構成されている別の Windows アプリケーション パッケージ プロジェクトが含まれています。

    新しいプロジェクトの作成ウィザードで空のアプリ パッケージ (デスクトップ内の Win U I) オプションが強調表示されている別のスクリーンショット。

  4. プロジェクト名を入力し、必要に応じてその他のオプションを選択して、 [作成] をクリックします。

  5. 次のダイアログ ボックスで、 [ターゲット バージョン] を Windows 10 バージョン 2004 (ビルド 19041) に、 [最小バージョン] を Windows 10 バージョン 1809 (ビルド 17763) に設定し、 [OK] をクリックします。

    ターゲットおよび最小バージョン

  6. この時点で、Visual Studio により、1 つ以上のプロジェクトが生成されます。

    • <プロジェクト名> (デスクトップ) : このプロジェクトには、アプリのコードが格納されています。 App.xaml と各種 App コード ファイルでは、アプリ インスタンスを表す Application クラスを定義します。また、MainWindow.xaml と各種 MainWindow コード ファイルでは、アプリによって表示されるメイン ウィンドウを表す MainWindow クラスを定義します。 これらのクラスは、WinUI に用意されている Microsoft.UI.Xaml 名前空間の型から派生します。

      Blank App, Packaged (WinUI 3 in Desktop) (空のアプリ、パッケージ (デスクトップの WinUI 3)) プロジェクト テンプレートを使用した場合、このプロジェクトにはアプリを MSIX パッケージに組み込むためのパッケージ マニフェストも含まれます。

      Visual Studio で、ソリューション エクスプローラー ペインと、単一プロジェクト MSIX のメインの Windows XAML ファイルの内容が表示されているスクリーンショット。

    • プロジェクト名 (パッケージ) : このプロジェクトは、Blank App, Packaged with Windows Application Packaging Project (WinUI 3 in Desktop) (空のアプリ、Windows アプリケーション パッケージ プロジェクトを使用したパッケージ (デスクトップの WinUI 3)) プロジェクト テンプレートを使用した場合にのみ生成されます。 このプロジェクトは、アプリを MSIX パッケージに組み込むように構成されている Windows アプリケーション パッケージ プロジェクトです。 このプロジェクトは、アプリのパッケージ マニフェストを格納しており、既定では、ソリューションのスタートアップ プロジェクトになります。

      Visual Studio で、ソリューション エクスプローラー ペインと、パッケージ アプリ x マニフェスト ファイルの内容を表示している別のスクリーンショット。

  7. アプリ プロジェクトに新しい項目を追加するには、ソリューション エクスプローラー[ <プロジェクト名> (デスクトップ)] プロジェクト ノードを右クリックし、 [追加] -> [新しい項目] の順に選択します。 [新しい項目の追加] ダイアログ ボックスで、 [WinUI] タブを選択し、追加する項目を選択して、 [追加] をクリックします。 使用可能な項目の詳細については、「WinUI 3 の項目テンプレート」を参照してください。

    新しい項目

  8. 開発用コンピューター上でソリューションをビルドして実行し、アプリがエラーなしで動作することを確認します。

主要な概念

  • パッケージ アプリ: パッケージ アプリは、MSIX を使用してパッケージ化されます。 MSIX はパッケージ形式で、これによりエンドユーザーは最新の UI を使用して Windows アプリを簡単にインストール、アンインストール、および更新できます。
  • 非パッケージ アプリ: パッケージ化されていないアプリでは MSIX は使用されません。 これらは通常、.exe または .msi ファイルを使用してインストールおよび更新されます。 多くの非パッケージ アプリでは、エンドユーザーは、クラシック UI を使用してインストール ウィザードを完了します。

パッケージ化されていない C++ WinUI 3 アプリの手順

Windows App SDK 1.0 を使用して、C++ でパッケージ化されていない WinUI 3 デスクトップ アプリを作成するには:

  1. 単一プロジェクトの MSIX パッケージ作成ツールをインストールします。

  2. Windows App SDK ランタイムと MSIX パッケージをインストールします。 これらは、パッケージ化されていないアプリを実行して展開するために必要です。

  3. 適切なアーキテクチャの Microsoft Visual C++ 再頒布可能パッケージ (VCRedist) をインストールします。

    • 最新バージョンの再頒布可能パッケージは、最新の Visual Studio GA リリースと互換性があり、Windows App SDK バイナリの構築に使用されるすべてのバージョンの Visual Studio と互換性があります。
    • Visual Studio の Insider ビルドにより、新しいバージョンの VCRedist がインストールされている可能性があります。パブリック バージョンを実行すると、次のエラーで失敗しますが、これは無視できます: エラー 0x80070666: Cannot install a product when a newer version is installed. (新しいバージョンがインストールされている場合、製品をインストールすることはできません。)

    注意

    VCRedist がターゲット デバイスにインストールされていない場合、c:\windows\system32\vcruntime140.dll への動的リンクは失敗します (これは、さまざまな方法でエンド ユーザーにマニフェストを実行できます)。

  4. [Blank App, Packaged (WinUI 3 in Desktop)](空のアプリ、パッケージ (WinUI 3 in Desktop)) プロジェクト テンプレートを使用して新しいアプリを作成します。 パッケージされたアプリから始めるには、XAML 診断を使用する必要があります。

  5. 次のプロパティをプロジェクト ファイルに追加します。

    <WindowsPackageType>None</WindowsPackageType>
    
  6. 'AppxPackage' プロパティを false に変更:

     <AppxPackage>false</AppxPackage>
    
  7. まだ行っていない場合は、Windows App SDK ランタイムと MSIX パッケージをインストールします。これは、アプリを実行してデプロイするために必要です。

  8. ビルドして実行します。 デプロイに関する追加情報については、パッケージ化されていない C++ アプリのデプロイに関する記事の Windows App SDK チュートリアルを参照してください。 このチュートリアルでは、アプリで Windows App SDK と WinUI 3 API を使用できるように、ブートストラップ API を使用して Bootstrapper コンポーネントを初期化する手順を説明します。 -->


次のステップ

お疲れさまでした。Windows App SDK による初めての WinUI 3 アプリを作成しました。 これで、開発体験を開始する準備ができました。