exeファイル形式(Unpackaged)の WinUI 3 アプリケーションを作成する - WinUI

exeファイル形式(Unpackaged)の WinUI3 アプリケーションを作成する手順とコードを紹介します。

概要

これまでのWinUIアプリケーションはUWPアプリケーションと同様にMSIXパッケージでビルドして実行する方式が基本ですが、 Windows App SDK 1.0以降では、exeファイル形式(Unpackaged形式)でビルドできるようになりました。 この記事では、Unpackaged Desktop Apps をビルドする手順を紹介します。

事前準備

Visual Studio 2022 と Windows App SDK 1.0をインストールします。
Visual Studio 2022 のインストールはこちらの記事を参照してください。 Windows App SDK 1.0 のインストールはこちらの記事を参照してください。

プログラム例

プロジェクトの作成

プロジェクトを新規作成します。
新しいプロジェクトを追加ダイアログで、WinUIのプロジェクトテンプレートを表示します。 テンプレートの "空のアプリ、パッケージ化(デスクトップの WinUI 3)" のテンプレートをクリックして選択します。 選択後ダイアログ右下の[次へ]ボタンをクリックします。


[新しいプロジェクトを構成します]ダイアログが表示されます。[プロジェクト名]のテキストボックスに 作成するプロジェクトの名前を設定します。設定ができたら[次へ]ボタンをクリックします。


WinUI 3のプロジェクトが作成されます。作成した状態ではMSIXのパッケージ化されるアプリケーション設定になっています。

Microsoft.WindowsAppSDK のパッケージのインストール

NuGetを利用して、Microsoft.WindowsAppSDK パッケージをインストールします。
インストールするパッケージは以下の Microsoft.WIndowsAppSDK パッケージになります。

GUIでインストールする場合

ソリューションエクスプローラーでルートのソリューションのノードを選択し右クリックします。ポップアップメニューが表示されますので [ソリューションの NuGet パッケージの管理]の項目をクリックします。


[NuGet - ソリューション]ウィンドウが表示されます。[参照]のタブをクリックして選択し、"WindowsAppSDK" で検索します。 Microsoft.WindowsAppSDKが左側の一覧に表示されますのでクリックして選択します。選択後、右側のプロジェクトの一覧からパッケージをインストールするプロジェクトにチェックをつけます。


#(caption="補足"){[ Preview版のSDKがインストールされている場合は、NuGetの更新を実行すると、最新のWindows App SDKのパッケージに更新できます。

]]
インストールするプロジェクトにチェックをつけ、[インストール]ボタンをクリックします。


下図の[変更プレビュー]ダイアログが表示されます。[OK]ボタンをクリックして続行します。


[ライセンスへの同意]ダイアログが表示されます。ダイアログ下部の[同意する]ボタンをクリックして インストールを進めます。


インストールができました。

NuGet パッケージマネージャーコンソールでインストールする場合

NuGetパッケージマネージャーでコマンドを実行してインストール進方法もあります。
[ツール]メニューの[NuGet パッケージ マネージャー]のサブメニューの[パッケージ マネージャー コンソール] の項目をクリックします。


メインウィンドウの下部に、NuGet パッケージマネージャー コンソールのウィンドウが表示されます。


NuGet パッケージマネージャー コンソールのコマンドプロンプトに、 NuGetのサイトに掲載されているインストールコマンドを入力して実行します。
今回のコマンドは下記です。

Install-Package Microsoft.WindowsAppSDK -Version 1.0.0

コマンドを実行すると、既定のプロジェクトのコンボボックスで選択されているプロジェクトに NuGetパッケージがインストールされます。

WindowsPackageTypeの追加 (プロジェクトファイルの編集)

ソリューションエクスプローラーのパネルで、作成したプロジェクトのノードをクリックして選択します。右クリックしてポップアップメニューを表示します。 メニューの[プロジェクト ファイルの編集]の項目をクリックします。


プロジェクトファイルのXMLのコードが表示されます。


プロジェクトファイルのXMLのコードの<PropertyGroup>タグ内に <WindowsPackageType> タグを記述します。

<WindowsPackageType>None</WindowsPackageType>

修正後のプロジェクトファイルは以下のコードになります。

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net5.0-windows10.0.19041.0</TargetFramework>
    <TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
    <RootNamespace>UnpackagedBlankApp</RootNamespace>
    <ApplicationManifest>app.manifest</ApplicationManifest>
    <Platforms>x86;x64;arm64</Platforms>
    <RuntimeIdentifiers>win10-x86;win10-x64;win10-arm64</RuntimeIdentifiers>
    <PublishProfile>win10-$(Platform).pubxml</PublishProfile>
    <UseWinUI>true</UseWinUI>
    <EnablePreviewMsixTooling>true</EnablePreviewMsixTooling>
    <WindowsPackageType>None</WindowsPackageType>
  </PropertyGroup>
  <ItemGroup>
    <Content Include="Assets\SplashScreen.scale-200.png" />
    <Content Include="Assets\LockScreenLogo.scale-200.png" />
    <Content Include="Assets\Square150x150Logo.scale-200.png" />
    <Content Include="Assets\Square44x44Logo.scale-200.png" />
    <Content Include="Assets\Square44x44Logo.targetsize-24_altform-unplated.png" />
    <Content Include="Assets\StoreLogo.png" />
    <Content Include="Assets\Wide310x150Logo.scale-200.png" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.WindowsAppSDK" Version="1.0.0-preview3" />
    <PackageReference Include="Microsoft.Windows.SDK.BuildTools" Version="10.0.20348.19" />
    <Manifest Include="$(ApplicationManifest)" />
  </ItemGroup>
</Project>

Package.appxmanifest ファイルの削除

Package.appxmanifest ファイルをプロジェクトから削除します。 ソリューションエクスプローラーでプロジェクトノード内の Package.appxmanifest ファイルをクリックして選択します。


右クリックしてポップアップメニューを表示します。メニューの[削除]の項目をクリックします。


下図のメッセージダイアログが表示されます。[OK]ボタンをクリックして Package.appxmanifest ファイルを削除します。


Package.appxmanifest ファイルが削除できました。

デバッグプロファイルの設定

上記の設定後、デバッグを実行しても下記のエラーメッセージが表示されデバッグできません。


プロジェクトのプロパティを表示します。下図の画面が表示されます。


左側のメニューで[デバッグ]の項目をクリックします。下図の画面に切り替わります。[デバッグ]の[General]セクションの[デバッグ起動プロファイル UI を開く]のリンクをクリックします。


下図の[プロファイルの起動]ダイアログが表示されますが、プロファイルが一つもない状態です。


[ソリューションエクスプローラー]のプロジェクトのノードの"Properties"フォルダ内の launchSettings.json ファイルを開きます。


JSONファイルの"profiles"オブジェクト内のプロジェクト名のオブジェクト内の"commandName" の値が MsixPackage になっていることが確認できます。


"commandName" の値を Project に変更します。


変更後のコードは下記になります。

{
  "profiles": {
    "UnpackagedBlankApp": {
      "commandName": "Project"
    }
  }
}

プロジェクトをビルドします。
ビルド後に、再度、プロジェクトのプロパティ設定画面で[デバッグ]の[General]セクションの[デバッグ起動プロファイル UI を開く]リンクをクリックして、 プロファイルの起動ダイアログを表示します。プロファイルが追加されていることが確認できます。


プロジェクトをデバッグ開始します。ビルド後にアプリケーションが起動できます。下図のウィンドウが表示されます。


画面中央のボタンをクリックします。ボタンのキャプションが[Clicked]に変わります。

exeファイルを直接実行する

エクスプローラーでプロジェクトファイルのあるフォルダを開きます。


\bin\x64\Debug\ フォルダ以下のビルド結果のフォルダを開きます。


フォルダ内の exe ファイルをダブルクリックして実行します。


アプリケーションが起動し、ウィンドウが表示されます。