Windows App SDK 1.0 をインストールする - Visual Studio

Windows App SDK 1.0 をインストールする手順を紹介します。

概要

Windows App SDK 1.0 が公開されました。インストールして動作を確認します。

ダウンロードとインストール (Stable)

ダウンロードページ(https://docs.microsoft.com/ja-jp/windows/apps/windows-app-sdk/stable-channel)にアクセスします。


Version 1.0 (1.0.0) のセクションの Download のセクションからVisual Studio extensions (VSIX)のインストーラーとWindows App SDKのインストーラーをダウンロードできます。


今回はVisual Studio 2022のC#用のVisual Studio 拡張機能のインストーラーとWindows App SDKのインストーラーをダウンロードしました。

Windows App SDK Visual Studio 2022 拡張機能のインストール

ダウンロードした Visual Studio 2022の拡張機能をインストールします。
インストーラーを実行します。


下図の画面が表示されます。ダイアログの[Modify]ボタンをクリックします。


インストールが始まります。


インストールが完了すると下図の画面が表示されます。[Close]ボタンをクリックしてインストーラーを終了します。

Windows App SDK のインストール

ダウンロードしたインストーラーのZIPファイルを展開します。


展開したフォルダを開きます。


(ZIPファイルのルート)\WindowsAppSDK-Installer-x64\WindowsAppRuntimeInstall.exe のインストーラーを実行します。


コンソールウィンドウが表示され、インストールが始まります。

インストールの確認

インストールが完了すると、Visual Studioでプロジェクトの作成画面に WinUI3 のプロジェクトのテンプレートが追加されます。

ダウンロードとインストール (Preview3)

ダウンロードページ(https://docs.microsoft.com/en-us/windows/apps/windows-app-sdk/preview-channel)にアクセスします。
Version 1.0 Preview 3 (1.0.0-preview3) のセクションの Download のセクションからVisual Studio extensions (VSIX)のインストーラーをダウンロードできます。


または(https://docs.microsoft.com/en-us/windows/apps/windows-app-sdk/downloads)のページからもダウンロードできます。


今回はVisual Studio 2022のC#で利用するため、"C# Visual Studio 2022 extension" のインストーラーと、"Installer and MSIX packages" をダウンロードします。

C# Visual Studio 2022 extension のインストール

ダウンロードしたインストーラーを実行します。今回は、Visual Studio 2022 のC#用Extensionをダウンロードしました。


インストーラーの初期化が始まります。


インストールされる項目が表示されます。"Windows App SDK C# VS2022 Templates" と "Single-project MSIX Packaging Tools for VS 2022" がインストールされます。 ダイアログ右下の [Modify] ボタンをクリックします。


インストールが始まります。


インストールが完了すると下図の画面が表示されます。[Close]ボタンをクリックしてダイアログを閉じます。


プロジェクトの新規作成で"WinUI"のテンプレートを確認します。まだ、パッケージ化されたアプリのテンプレートのみがインストールされる状態のようです。

Windows APP SDK Preview 3 Runtime Installer and MSIX packages

Windows APP SDKのラインタイムをインストールします。先ほどのページからダウンロードした、"Installer and MSIX packages" のZIPファイルを展開します。



解凍したファイル内の、WindowsAppSDK-Installer-x64 フォルダにある、WindowsAppRuntimeInstall.exe を実行します。


コマンドウィンドウが表示され、ランタイムのパッケージのインストールが始まります。



インストールが完了するとウィンドウは自動で消えます。
ランタイムのインストールは以上で完了です。

MSIXパッケージを利用しないWinUI3アプリケーションのビルド

こちらのページに手順の記載があります。
https://docs.microsoft.com/en-us/windows/apps/winui/winui3/create-your-first-winui3-app?tabs=csharp%2Ccsharp-unpackaged#instructions-for-winui-3-unpackaged-desktop-apps
詳しいビルド手順はこちらの記事を参照してください。

ダウンロードとインストール (Preview2)

ダウンロードページ(https://docs.microsoft.com/en-us/windows/apps/windows-app-sdk/preview-channel)にアクセスします。
Version 1.0 Preview 2 (1.0.0-preview2) のセクションの Download のセクションからインストーラーをダウンロードできます。


ダウンロードしたvsixインストーラーを実行すると、Windows App SDK用のVisual Studioの拡張機能をインストールできます。

ダウンロードとインストール (Preview1)

Windows App SDK のプレビュー版のページ(https://docs.microsoft.com/en-us/windows/apps/windows-app-sdk/preview-channel)にアクセスします。 下図のページが表示されます。ページ中ほどの[Version 1.0 Preview 1] セクションの [Donwload]ボタンをクリックします。


ページ下部にジャンプしてダウンロードボタンのセクションが表示されます。C#用とC++用のVisual Studio Extension がダウンロードできます。 また、Visual Studio 2019とVisual Studio 2022 とでExtension のインストーラーは別のものになっています。


WindowsAppSDK.Cs.Extension.Dev17.Standalone.vsix が Visual Studio 2022用のC# Extension、 WindowsAppSDK.Cs.Extension.Dev16.Standalone.vsix が Visual Studio 2019用のC# Extension、となっています。

Visual Studio 2019へのインストール

Visual Studio 2019 へExtensionをインストールします。インストーラーを実行します。


下図のインストール確認画面が表示されます。ウィンドウの[Install]ボタンをクリックします。


インストールが始まります。


インストールが完了すると下図の画面が表示されます。[Close]ボタンをクリックしてインストーラーを終了します。

Visual Studio 2022へのインストール

Visual Studio 2019 へExtensionをインストールします。インストーラーを実行します。


下図のインストール確認画面が表示されます。ウィンドウの[Install]ボタンをクリックします。


インストールが始まります。


インストールが完了すると下図の画面が表示されます。[Close]ボタンをクリックしてインストーラーを終了します。

動作確認

動作確認します。Visual Studioを起動し、プロジェクトの新規作成を実行します。


[新しいプロジェクトの作成] ダイアログが表示されます。


右側のエリアの中央のプラットフォームのコンボボックスで "Windows App SDK" でフィルタします。 "Class Library (WionUI 3 in Desktop)" と "Blank App Packaged with WAP (WinUI 3 in Desktop)" の2つが表示されます。

補足:Visual Studio 2022の場合

Visual Studio 2022でもプロジェクトテンプレートは同様のものが表示されます。



Windows App SDK 1.0 のPreview版をインストールできました。

その後の手順

Unpackaged App のコーディング方法はこちらの記事を参照してください。