初めての WinUI 3

WinUI 3 とは

WinUI は、Windows デスクトップと UWP の両方のアプリケーションに対応したネイティブ ユーザー エクスペリエンス (UX) フレームワークです。

すべてのエクスペリエンス、コントロール、スタイルに Fluent Design System を組み込むことで、WinUI は最新のユーザー インターフェイス (UI) パターンを使用して、一貫性のある直感的でアクセスしやすいエクスペリエンスを提供します。

デスクトップ アプリと UWP アプリの両方をサポートすることで、最初から WinUI を使用してビルドしたり、C++、C#、Visual Basic、JavaScript などの使い慣れた言語 ( React Native for Desktop を使用) を使用して、既存の MFC、WinForms、WPF アプリを段階的に移行したりできます。

要約すると、マルチプラットフォームならMAUI、Windowsアプリ専用ならWinUI 3がイケオジってことね？
やってみよう。

開発環境

• Microsoft Visual Studio Community 2022 (64 ビット) - Version 17.14.2
• Visual Studio Installer で [デスクトップとモバイル] - [WinUI アプリケーション開発]を追加

2025/05/31 追加

この記事書いた後に、ほかにも変更が必要だったので追加願う。

• 最新のWindows App SDKのインストール

プロジェクトを作成する

[空のアプリ、パッケージ化]を選択して[次へ]　※お好きな言語でどうぞ

プロジェクト名を入力して[作成]

ソースフォルダは Cドライブに作りましょう。
デバック実行時に、「配置に失敗しました。」的なエラーになります。

プロジェクトの構成

出来上がったプロジェクトはこんな感じ

2025/05/31 追加

この記事書いた後に、ほかにも設定が必要だったので追加願う。

• Package.appxmanifestを開いて、[既定の言語]を「en-US」⇒「ja-JP」に変更

• .NET Community Toolkit の Nugetパッケージの追加

• csprojに「言語バージョンをプレビュー」を追加

xml WinUI3Demo.csproj

  <PropertyGroup>
    <LangVersion>preview</LangVersion>
  </PropertyGroup>

設定せずに.NET Community Toolkitを使うと下記の警告が出る。
https://learn.microsoft.com/ja-jp/dotnet/communitytoolkit/mvvm/generators/errors/mvvmtk0045
これを止めるためには、partial propertyに変更しなきゃいけないのですが、どうやらプレビュー機能のようです。
INotifyPropertyChanged 地獄 だけは嫌なので使っていくよ。

とりまデバッグ実行

画面が起動しました。

画面にラベルを追加したい

画面をデザイン／制御する仕組みは、WPFやMAUIと同じくXAML/MVVM方式ですね。
ホットデプロイできるはずなので、デバッグ実行したまま、画面にラベル(TextBlock)を追加します。

xaml MainWindow.xaml

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="WinUI3Demo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI3Demo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="WinUI3Demo">

    <Window.SystemBackdrop>
        <MicaBackdrop />
    </Window.SystemBackdrop>

    <Grid>
        <TextBlock Text="WinUI 3 のデモです。" /> <!-- 追加 -->
    </Grid>
</Window>

ソースファイルを保存すると、デバッグ中の画面にラベルが追加されます。

ふと思ったのですが、ダークモードですね。
デバッグ起動中のまま、ライトモードに変えてみます。

システム色に応じて切り替わりました。
よし、これで一貫性のある直感的でアクセスしやすいエクスペリエンスを提供できるはず(？)

いろんなコントロール試したい

MSが公開している 「WinUI 3 Gallery」がお勉強になりますです。
動かすだけなら Microsoft Storeから

ソースはgithubからどうぞ

また、次回があればどうぞ。