デスクトップ アプリ用の WinUI 3 の概要Get started with WinUI 3 for desktop apps

WinUI 3 - Project Reunion 0.5 には、全面的に WinUI ベースのユーザー インターフェイスを採用した、マネージド C#/.NET 5 およびネイティブ C++/Win32 デスクトップ アプリを作成できるプロジェクト テンプレートが用意されています。WinUI 3 - Project Reunion 0.5 includes project templates that enable you to create managed C#/.NET 5 and native C++/Win32 desktop apps with an entirely WinUI-based user interface. これらのプロジェクト テンプレートを使用してアプリを作成すると、アプリケーションのユーザー インターフェイス全体が、WinUI 3 で提供されるウィンドウ、コントロール、その他の種類の UI を使用して実装されます。When you create apps using these project templates, the entire user interface of your application is implemented using windows, controls, and other UI types provided by WinUI 3. プロジェクト テンプレートの完全な一覧については、「WinUI 3 のプロジェクト テンプレート」を参照してください。For a complete list of the project templates, see Project templates for WinUI 3.

WinUI 3 は、Project Reunion パッケージに含まれます。WinUI 3 ships as a part of the Project Reunion package. Project Reunion の詳細については、「Project Reunion 0.5 を使用してデスクトップ Windows アプリをビルドする (2021 年 3 月)」を参照してください。For more on Project Reunion, see Build desktop Windows apps with Project Reunion 0.5 (March 2021).

前提条件Prerequisites

この記事で説明されているデスクトップ用の WinUI 3 プロジェクト テンプレートを使用するには、開発用コンピューターを構成して、Project Reunion 0.5 Visual Studio 拡張機能をインストールします。To use the WinUI 3 for desktop project templates described in this article, configure your development computer and install the Project Reunion 0.5 Visual Studio extension. 詳細については、「開発環境を設定する」を参照してください。For details, see Set up your development environment.

C# および .NET 5 用の WinUI 3 デスクトップ アプリを作成するCreate a WinUI 3 desktop app for C# and .NET 5

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

  2. プロジェクトのドロップダウン フィルターで、 [C#][Windows] 、および [WinUI] をそれぞれ選択します。In the project drop-down filters, select C#, Windows, and WinUI, respectively.

  3. プロジェクトの種類として [空のアプリ、パッケージ (WinUI 3 in Desktop)] を選択し、 [次へ] をクリックします。Select the Blank App, Packaged (WinUI 3 in Desktop) project type and click Next.

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

  4. プロジェクト名を入力し、必要に応じてその他のオプションを選択して、 [作成] をクリックします。Enter a project name, choose any other options as desired, and click Create.

  5. 次のダイアログ ボックスで、 [ターゲット バージョン] を Windows 10 バージョン 2004 (ビルド 19041) に、 [最小バージョン] を Windows 10 バージョン 1809 (ビルド 17763) に設定し、 [OK] をクリックします。In the following dialog box, set the Target version to Windows 10, version 2004 (build 19041) and Minimum version to Windows 10, version 1809 (build 17763) and then click OK.

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

  6. この時点で、Visual Studio では次の 2 つのプロジェクトが生成されます。At this point, Visual Studio generates two projects:

    • <プロジェクト名> (デスクトップ) : このプロジェクトには、アプリのコードが格納されています。Project name (Desktop): This project contains your app's code. App.xaml ファイルと App.xaml.cs 分離コード ファイルでは、アプリ インスタンスを表す Application クラスが定義されます。The App.xaml file and App.xaml.cs code-behind file define an Application class that represents your app instance. MainWindow.xaml ファイルと MainWindow.xaml.cs 分離コード ファイルでは、アプリによって表示されるメイン ウィンドウを表す MainWindow クラスが定義されます。The MainWindow.xaml file and MainWindow.xaml.cs code-behind file define a MainWindow class that represents the main window displayed by your app. これらのクラスは、WinUI に用意されている Microsoft.UI.Xaml 名前空間の型から派生します。These classes derive from types in the Microsoft.UI.Xaml namespace provided by WinUI.

      Visual Studio で、ソリューション エクスプローラー ペインと、メインの Windows X A M L ドット C S ファイルの内容を表示しているスクリーンショット。

    • <プロジェクト名> (パッケージ) : これは、アプリを MSIX パッケージに組み込むように構成されている Windows アプリケーション パッケージ プロジェクトです。Project name (Package): This is a Windows Application Packaging Project that is configured to build the app into an MSIX package. これによって、最新のデプロイ エクスペリエンスがもたらされ、パッケージ拡張機能を使用して Windows 10 の機能と統合できるなど、さまざまなメリットがあります。This provides a modern deployment experience, the ability to integrate with Windows 10 features via package extensions, and much more. このプロジェクトは、アプリのパッケージ マニフェストを格納しており、既定では、ソリューションのスタートアップ プロジェクトになります。This project contains the package manifest for your app, and it is the startup project for your solution by default.

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

  7. アプリ プロジェクトに新しい項目を追加するには、ソリューション エクスプローラー[ <プロジェクト名> (デスクトップ)] プロジェクト ノードを右クリックし、 [追加] -> [新しい項目] の順に選択します。To add a new item to your app project, right-click the Project name (Desktop) project node in Solution Explorer and select Add -> New Item. [新しい項目の追加] ダイアログ ボックスで、 [WinUI] タブを選択し、追加する項目を選択して、 [追加] をクリックします。In the Add New Item dialog box, select the WinUI tab, choose the item you want to add, and then click Add. 使用可能な項目の詳細については、「WinUI 3 の項目テンプレート」を参照してください。For more details about the available items, see Item templates for WinUI 3.

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

  8. ソリューションをビルドして実行し、アプリがエラーなしで実行されることを確認します。Build and run your solution to confirm that the app runs without errors.

C++/Win32 用の WinUI 3 デスクトップ アプリを作成するCreate a WinUI 3 desktop app for C++/Win32

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

  2. プロジェクトのドロップダウン フィルターで、 [C++][Windows] 、および [WinUI] を選択します。In the project drop-down filters, select C++, Windows, and WinUI.

  3. プロジェクトの種類として [空のアプリ、パッケージ (WinUI 3 in Desktop)] を選択し、 [次へ] をクリックします。Select the Blank App, Packaged (WinUI 3 in Desktop) project type and click Next.

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

  4. プロジェクト名を入力し、必要に応じてその他のオプションを選択して、 [作成] をクリックします。Enter a project name, choose any other options as desired, and click Create.

  5. 次のダイアログ ボックスで、 [ターゲット バージョン] を Windows 10 バージョン 20004 (ビルド 19041) に、 [最小バージョン] を Windows 10 バージョン 1809 (ビルド 17763) に設定し、 [OK] をクリックします。In the following dialog box, set the Target version to Windows 10, version 20004 (build 19041) and Minimum version to Windows 10, version 1809 (build 17763) and then click OK.

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

  6. この時点で、Visual Studio では次の 2 つのプロジェクトが生成されます。At this point, Visual Studio generates two projects:

    • <プロジェクト名> (デスクトップ) : このプロジェクトには、アプリのコードが格納されています。Project name (Desktop): This project contains your app's code. App.xaml と各種 App コード ファイルでは、アプリ インスタンスを表す Application クラスを定義します。また、MainWindow.xaml と各種 MainWindow コード ファイルでは、アプリによって表示されるメイン ウィンドウを表す MainWindow クラスを定義します。The App.xaml and various App code files define an Application class that represents your app instance, and the MainWindow.xaml and various MainWindow code files define a MainWindow class that represents the main window displayed by your app. これらのクラスは、WinUI に用意されている Microsoft.UI.Xaml 名前空間の型から派生します。These classes derive from types in the Microsoft.UI.Xaml namespace provided by WinUI.

      Visual Studio で、ソリューション エクスプローラー ペインと、メインの Windows X A M L ファイルの内容を表示しているスクリーンショット。

    • <プロジェクト名> (パッケージ) : これは、アプリを MSIX パッケージに組み込むように構成されている Windows アプリケーション パッケージ プロジェクトです。Project name (Package): This is a Windows Application Packaging Project that is configured to build the app into an MSIX package. これによって、最新のデプロイ エクスペリエンスがもたらされ、パッケージ拡張機能を使用して Windows 10 の機能と統合できるなど、さまざまなメリットがあります。This provides a modern deployment experience, the ability to integrate with Windows 10 features via package extensions, and much more. このプロジェクトは、アプリのパッケージ マニフェストを格納しており、既定では、ソリューションのスタートアップ プロジェクトになります。This project contains the package manifest for your app, and it is the startup project for your solution by default.

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

  7. アプリ プロジェクトに新しい項目を追加するには、ソリューション エクスプローラー[ <プロジェクト名> (デスクトップ)] プロジェクト ノードを右クリックし、 [追加] -> [新しい項目] の順に選択します。To add a new item to your app project, right-click the Project name (Desktop) project node in Solution Explorer and select Add -> New Item. [新しい項目の追加] ダイアログ ボックスで、 [WinUI] タブを選択し、追加する項目を選択して、 [追加] をクリックします。In the Add New Item dialog box, select the WinUI tab, choose the item you want to add, and then click Add. 使用可能な項目の詳細については、「WinUI 3 の項目テンプレート」を参照してください。For more details about the available items, see Item templates for WinUI 3.

    新しい項目

  8. ソリューションをビルドして実行し、アプリがエラーなしで実行されることを確認します。Build and run your solution to confirm that the app runs without errors.

    注意

    パッケージ化されたプロジェクトのみが起動されるため、スタートアップ プロジェクトとして設定されていることを確認してください。Only the packaged project will launch, so make sure that one is set as the Startup Project.

WinUI デスクトップ アプリのローカライズLocalizing your WinUI desktop app

WinUI デスクトップ アプリで複数の言語をサポートし、そのパッケージ プロジェクトが適切にローカライズされるようにするには、適切なリソースをプロジェクトに追加し (「アプリ リソースとリソース管理システム」を参照)、サポート対象となる各言語をプロジェクトの package.appxmanifest ファイル内で宣言します。To support multiple languages in a WinUI desktop app, and ensure proper localization of your packaged project, add the appropriate resources to the project (see App resources and the Resource Management System) and declare each supported language in the package.appxmanifest file of your project. プロジェクトをビルドすると、指定した言語が生成されたアプリ マニフェスト (AppxManifest.xml) に追加され、対応するリソースが使用されます。When you build the project, the specified languages are added to the generated app manifest (AppxManifest.xml) and the corresponding resources are used.

  1. テキスト エディターで .wapproj の package.appxmanifest を開き、次のセクションを探します。Open the .wapproj's package.appxmanifest in a text editor and locate the following section:

    <Resources>
        <Resource Language="x-generate"/>
    </Resources>
    
  2. <Resource Language="x-generate"> を、サポートされている各言語の <Resource /> 要素に置き換えます。Replace the <Resource Language="x-generate"> with <Resource /> elements for each of your supported languages. たとえば、次のマークアップにより、"en-US" および "es-ES" のローカライズされたリソースが使用可能であることが指定されます。For example, the following markup specifies that "en-US" and "es-ES" localized resources are available:

    <Resources>
        <Resource Language="en-US"/>
        <Resource Language="es-ES"/>
    </Resources>
    

既知の問題と制限事項Known issues and limitations

Windows UI ライブラリ 3 - Project Reunion 0.5」の「制限事項と既知の問題」のセクションを参照してください。See the Limitations and known issues section of Windows UI Library 3 - Project Reunion 0.5.

Windows UI ライブラリ 3 - Project Reunion 0.5Windows UI Library 3 - Project Reunion 0.5