WinUI 3 アプリケーションを作成する (ブランクアプリケーションの作成)

WinUI 3のアプリケーションを作成する手順を紹介します。

事前準備

Visual Studio 2019 をインストールし、Project Reunion Visual Studio 拡張パッケージをインストールします。 インストールの手順はこちらの記事を参照してください。

アプリケーション作成手順

ソリューションにプロジェクトを作成します。プロジェクト作成ダイアログを表示し、フィルタで[WinUI]を設定すると、WinUI 3のアプリケーションテンプレートが表示されます。
WinUI 3 アプリケーションを作成する (ブランクアプリケーションの作成):画像1

WinUI 3のアプリケーションを作成しますので[Blank App, Packaged (WinUI 3 in Desktop)]の項目をクリックして選択します。 [次へ]ボタンをクリックします。
WinUI 3 アプリケーションを作成する (ブランクアプリケーションの作成):画像2

プロジェクト名を設定します。入力ができたら[作成]ボタンをクリックします。
WinUI 3 アプリケーションを作成する (ブランクアプリケーションの作成):画像3

下図の[新しいユニバーサル Windows プラットフォーム プロジェクト]のダイアログが表示されます。
[ターゲット バージョン]と[最小バージョン]を設定します。今回はデフォルトのままとします。[OK]ボタンをクリックします。
WinUI 3 アプリケーションを作成する (ブランクアプリケーションの作成):画像4

プロジェクトの作成処理が始まります。
WinUI 3 アプリケーションを作成する (ブランクアプリケーションの作成):画像5

プロジェクトが作成されると下図の画面となります。
WinUI 3 アプリケーションを作成する (ブランクアプリケーションの作成):画像6

[ソリューション エクスプローラー]のウィンドウにアプリケーションのプロジェクトと、パッケージのプロジェクトの2つのプロジェクトのノードが作成されます。
WinUI 3 アプリケーションを作成する (ブランクアプリケーションの作成):画像7

アプリケーションの実行

Visual Studioでプロジェクトを実行します。ビルドは完了しますが、デフォルトの状態では下図のダイアログが表示されます。
[いいえ]ボタンをクリックして実行を停止します。

メッセージ
配置エラーが発生しました。続行しますか?

WinUI 3 アプリケーションを作成する (ブランクアプリケーションの作成):画像8


配置エラーのアプリケーションが表示されると、下図の[開発者向け]設定画面が表示されます。
[開発者用モード]セクションの[圧縮されていないファイルも含め、任意のソースからのアプリをインストールします。]のスイッチをクリックしてオンにします。
WinUI 3 アプリケーションを作成する (ブランクアプリケーションの作成):画像9

スイッチをオンにすると下図の確認ダイアログが表示されます。[はい]ボタンをクリックして、開発者モードにします。
WinUI 3 アプリケーションを作成する (ブランクアプリケーションの作成):画像10

スイッチがオンになりました。
WinUI 3 アプリケーションを作成する (ブランクアプリケーションの作成):画像11

再度Visual Studioでプロジェクトを実行します。ビルドが実行され、アプリケーションが起動します。下図のウィンドウが表示されます。
WinUI 3 アプリケーションを作成する (ブランクアプリケーションの作成):画像12

ウィンドウ中央の[Click Me]ボタンをクリックします。クリックすると[Clicked]にボタンのキャプションが変わります。
WinUI 3 アプリケーションを作成する (ブランクアプリケーションの作成):画像13

パッケージ形式のアプリケーションのため、プロジェクトを実行するとスタートメニューにアプリケーションのショートカットが追加されます。
WinUI 3 アプリケーションを作成する (ブランクアプリケーションの作成):画像14 WinUI 3 アプリケーションを作成する (ブランクアプリケーションの作成):画像15

AuthorPortraitAlt
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
作成日: 2021-04-04
Copyright © 1995–2025 iPentec all rights reserverd.