<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p data-line="2" class="code-line">WinUI 3（Windows App SDK）での開発は地獄です。不可解な設計、足りなすぎる機能、多すぎるバグ（しかも長年放置）、などなど。</p>
<p data-line="4" class="code-line">しかしそれでもなお WinUI 3 を使っているのは、それなりに「いいところ」もあるからです。今回は私が思う WinUI 3 のメリットをまとめました。</p>
<h2 id="fluent-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" data-line="6" class="code-line">
<a class="header-anchor-link" href="#fluent-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" aria-hidden="true"></a> Fluent デザイン</h2>
<p data-line="8" class="code-line">WinUI 3 の分かりやすいメリットは、GUI の見た目です。</p>
<p data-line="10" class="code-line">WinForms（フォーム）や WPF のデザインは（デフォルトでは）味気ない直線ですが、WinUI 3 はデフォルトで Fluent デザインとなっており、モダンな感じになります。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--1sXOC9Ny--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/1a4182814b82d986824a8622.png%3Fsha%3D88992275db0c69763a2444bedd1aeb08fa2480c0" width="256" class="md-img" loading="lazy"></p>
<p data-line="13" class="code-line">メニューなどがやや半透明になってメインウィンドウの内容の色がうっすらと反映される「アクリル効果」も付いてきますし、テーマを OS に合わせることも可能です。</p>
<p data-line="15" class="code-line">ちょっとしたツールのようにボタンとラベル程度しか使わない GUI だとあまり差は出ませんが、それでも WinUI 3 のほうが多少マシな感じはします。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--thi1v522--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/940cd3fe05a7a7bef899400e.png%3Fsha%3Da316f16410124182591b3b981a652e47321c19c0" width="256" class="md-img" loading="lazy"></p>
<p data-line="18" class="code-line">コントロールの種類も豊富で、WPF に標準では備わっていないトグルスイッチ（左右にスライドするオンオフ）やレーティングコントロールなどもあります。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--r9v4jJdv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/fcf468b0dcbc42817351e207.png%3Fsha%3Ddc190cd4181af821349739c063b264ad2fdf8005" width="256" class="md-img" loading="lazy"></p>
<p data-line="21" class="code-line">WPF も <a href="https://learn.microsoft.com/ja-jp/dotnet/desktop/wpf/whats-new/net90#apply-the-theme" target="_blank" rel="nofollow noopener noreferrer">.NET 9 以降ならば Fluent デザインを使用できるようになりました</a>が、コントロールのラインナップでは WinUI 3 に一日の長があるようです（とはいえ、DataGrid のように逆に WinUI 3 に無いコントロールもありますが）。</p>
<h2 id="gui-%E6%A9%9F%E8%83%BD" data-line="23" class="code-line">
<a class="header-anchor-link" href="#gui-%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> GUI 機能</h2>
<p data-line="25" class="code-line">GUI 関連ではデザイン面だけではなく機能面でも気に入っている点がいくつかあり、以下に挙げます。</p>
<h3 id="%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%83%90%E3%83%BC" data-line="27" class="code-line">
<a class="header-anchor-link" href="#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%83%90%E3%83%BC" aria-hidden="true"></a> カスタムタイトルバー</h3>
<p data-line="29" class="code-line">WinUI 3 ではカスタムタイトルバーを簡単に作成することができます。ボタンやラベルなども自由にタイトルバーに埋め込めます。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--u4AvxDqJ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/a04cf1dc9c16b047485197c1.png%3Fsha%3D7fd4eb77d2fed180c8fbb664a5f51392c8f5ec08" width="256" class="md-img" loading="lazy"></p>
<p data-line="32" class="code-line">右側のボタン類（最大化ボタンなど）の動作については再実装する必要はなく、ノーコードでデフォルト動作してくれるのも嬉しい点です。</p>
<p data-line="34" class="code-line">カスタムタイトルバーの作り方については<a href="https://zenn.dev/shinta0806/articles/rich-title-bar" target="_blank">こちらの記事</a>をご覧ください。</p>
<h3 id="%E3%83%88%E3%83%BC%E3%82%B9%E3%83%88%E9%80%9A%E7%9F%A5" data-line="36" class="code-line">
<a class="header-anchor-link" href="#%E3%83%88%E3%83%BC%E3%82%B9%E3%83%88%E9%80%9A%E7%9F%A5" aria-hidden="true"></a> トースト通知</h3>
<p data-line="38" class="code-line">WinUI 3 では簡単にトースト通知を出すことができます。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--CbcgSAmz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/00af62d886b88a90539913c9.png%3Fsha%3D7ba3246b032eac636fd126e0e3d6c4dd74e01cce" width="256" class="md-img" loading="lazy"></p>
<h3 id="%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88" data-line="41" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88" aria-hidden="true"></a> アイコンフォント</h3>
<p data-line="43" class="code-line">Windows には Segoe MDL2 Assets / Segoe Fluent Icons というピクトグラム的なフォントが標準でインストールされています。</p>
<p data-line="45" class="code-line">WinUI 3 ではこれらのピクトグラムを <a href="https://learn.microsoft.com/ja-jp/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.fonticon" target="_blank" rel="nofollow noopener noreferrer">FontIcon</a> でボタンなどに組み込めます。WPF でも TextBlock などでフォント指定すれば組み込めるとは思いますが、WinUI 3 のほうが専用コントロールになっている分フォールバックなどで有利かなと思います。</p>
<h3 id="%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%82%AD%E3%83%BC%E8%A1%A8%E7%A4%BA" data-line="47" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%82%AD%E3%83%BC%E8%A1%A8%E7%A4%BA" aria-hidden="true"></a> アクセスキー表示</h3>
<p data-line="49" class="code-line">アクセスキーを設定している場合、Alt キーを押して離すとアクセスキーが表示されます（Excel などと同じ動作）。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--4wJ8MWqw--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/d7c033f72304b463ce7f9018.png%3Fsha%3De80d9d249f83015ed1cb2483ee9d745e0c17afc6" width="256" class="md-img" loading="lazy"></p>
<p data-line="52" class="code-line">アイコンフォントでピクトグラムだけ表示しているボタンがある場合などは特に有用だと思います。</p>
<h3 id="relativepanel" data-line="54" class="code-line">
<a class="header-anchor-link" href="#relativepanel" aria-hidden="true"></a> RelativePanel</h3>
<p data-line="56" class="code-line">WPF の <a href="https://learn.microsoft.com/ja-jp/dotnet/api/system.windows.controls.dockpanel" target="_blank" rel="nofollow noopener noreferrer">DockPanel</a> は LastChildFill が便利で、ウィンドウサイズの変更に追随して残りの領域をコントロールが埋めてくれます。</p>
<p data-line="58" class="code-line">しかし例えば、ラベル、テキストボックス、ボタンの順に配置してテキストボックスが LastChildFill で伸び縮みする場合、タブオーダーは（見た目の順番とは異なり）テキストボックスが最後になってしまうので違和感が出てしまいます。</p>
<p data-line="60" class="code-line">WinUI 3 では DockPanel の代わりに <a href="https://learn.microsoft.com/ja-jp/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.relativepanel" target="_blank" rel="nofollow noopener noreferrer">RelativePanel</a> が登場しました。残念ながら DockPanel のようなお手軽さはないのですが、その代わり、見た目の順番とタブオーダーを揃えることが可能で、個人的には気に入っています。</p>
<h2 id="native-aot-%E5%AF%BE%E5%BF%9C" data-line="62" class="code-line">
<a class="header-anchor-link" href="#native-aot-%E5%AF%BE%E5%BF%9C" aria-hidden="true"></a> Native AOT 対応</h2>
<p data-line="64" class="code-line">WinUI 3 アプリは Native AOT（.NET 中間コードではなくネイティブコードによるバイナリでの高速動作）（以降「AOT」）に対応可能です。</p>
<p data-line="66" class="code-line">WinForms や WPF は AOT の前提となる「トリミング」に<a href="https://learn.microsoft.com/ja-jp/dotnet/core/deploying/trimming/incompatibilities#wpf" target="_blank" rel="nofollow noopener noreferrer">（少なくとも公式では）対応しておらず</a>、AOT できません。</p>
<p data-line="68" class="code-line">本稿執筆時点では AOT 自体が発展途上のため、実アプリに AOT を適用するのはまだまだ困難が待ち受けている段階です。元から地獄の WinUI 3 アプリ開発に AOT が混じると地獄レベルがさらにアップしてしまいます。とはいえ、まがりなりにも「対応可能」というのは明確にメリットです。</p>
<p data-line="70" class="code-line">AOT のやり方については<a href="https://zenn.dev/shinta0806/articles/winui3-native-aot" target="_blank">こちらの記事</a>をご覧ください。</p>
<h2 id="%E9%9D%99%E7%9A%84%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89" data-line="72" class="code-line">
<a class="header-anchor-link" href="#%E9%9D%99%E7%9A%84%E3%83%90%E3%82%A4%E3%83%B3%E3%83%89" aria-hidden="true"></a> 静的バインド</h2>
<p data-line="74" class="code-line">WinUI 3 の MVVM では、データバインド（ビューとビューモデルのデータ受け渡し）に静的バインド（<code>{x:Bind}</code>）が使用可能です。</p>
<p data-line="76" class="code-line">C# を好んで使う方は、ビルド時にきちんとエラーが出ることを好ましく思っているはずですが、WPF のデータバインドは動的バインド（<code>{Binding}</code>）なので、データバインド部分にミスがあってもビルドが通ってしまい、バグの温床になっています。個人的には WPF の不満トップクラスが動的バインドでした。</p>
<p data-line="78" class="code-line">WinUI 3 の静的バインドではきちんとビルドエラーが出ますし、そもそもサジェストされるのでミスも減っています。</p>
<p data-line="80" class="code-line">また、個人的にはさほど気にしていないのですが、パフォーマンスも静的バインドのほうが高いようです。</p>
<p data-line="82" class="code-line">ちなみに、WinUI 3 でも動的バインドは使用可能です。</p>
<h2 id="%E5%A4%9A%E8%A8%80%E8%AA%9E%E5%8C%96" data-line="84" class="code-line">
<a class="header-anchor-link" href="#%E5%A4%9A%E8%A8%80%E8%AA%9E%E5%8C%96" aria-hidden="true"></a> 多言語化</h2>
<p data-line="86" class="code-line">WinUI 3 ではアプリの多言語化が比較的簡単なので、グローバルにアプリをリリースできます。</p>
<p data-line="88" class="code-line">多言語化については<a href="https://zenn.dev/shinta0806/articles/winui3-multi-lang" target="_blank">こちらの記事</a>をご覧ください。</p>
<h2 id="winui-3-%E3%82%A2%E3%83%97%E3%83%AA" data-line="90" class="code-line">
<a class="header-anchor-link" href="#winui-3-%E3%82%A2%E3%83%97%E3%83%AA" aria-hidden="true"></a> WinUI 3 アプリ</h2>
<p data-line="92" class="code-line">以上のようなメリットを感じているので、筆者はこれまでに以下のようなアプリを WinUI 3 で開発してきました。</p>
<h3 id="%E3%83%8B%E3%82%B3%E3%82%AB%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC-3" data-line="94" class="code-line">
<a class="header-anchor-link" href="#%E3%83%8B%E3%82%B3%E3%82%AB%E3%83%A9%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC-3" aria-hidden="true"></a> ニコカラメーカー 3</h3>
<p data-line="96" class="code-line"><a href="https://shinta.coresv.com/software/nicokaramaker3-jpn/" target="_blank" rel="nofollow noopener noreferrer">ニコカラメーカー 3</a> はカラオケ字幕動画（ニコカラ）を手軽に作るためのアプリです。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--MffJH4AN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/b9a3fedde2127831c5882ff6.png%3Fsha%3Dc5f74b69f4b9055de04b148c0137409e91b77afb" width="256" class="md-img" loading="lazy"></p>
<h3 id="%E3%82%82%E3%81%A1%E3%81%8B%E3%82%89%E3%83%97%E3%83%AD%E3%83%87%E3%83%A5%E3%83%BC%E3%82%B5%E3%83%BC" data-line="99" class="code-line">
<a class="header-anchor-link" href="#%E3%82%82%E3%81%A1%E3%81%8B%E3%82%89%E3%83%97%E3%83%AD%E3%83%87%E3%83%A5%E3%83%BC%E3%82%B5%E3%83%BC" aria-hidden="true"></a> もちからプロデューサー</h3>
<p data-line="101" class="code-line"><a href="https://shinta.coresv.com/software/mochikara-producer-ja-jp/" target="_blank" rel="nofollow noopener noreferrer">もちからプロデューサー</a>は動画持ち込みカラオケ（持ちカラ）で動画を検索・予約・再生するためのリモコンアプリです。ニコニコ動画にも対応しています。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--ROMsgDQL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/befb3105354ff62cf35bdbe9.png%3Fsha%3Db63c9f5d9643ee545f271c2a33f97b5bfda5990d" width="256" class="md-img" loading="lazy"></p>
<h3 id="%E3%81%97%E3%82%83%E3%81%B9%E3%81%A3%E3%81%A6%E5%94%84%E8%A9%A0" data-line="104" class="code-line">
<a class="header-anchor-link" href="#%E3%81%97%E3%82%83%E3%81%B9%E3%81%A3%E3%81%A6%E5%94%84%E8%A9%A0" aria-hidden="true"></a> しゃべって唄詠</h3>
<p data-line="106" class="code-line"><a href="https://shinta.coresv.com/software/utayomi-vc-ja-jp/" target="_blank" rel="nofollow noopener noreferrer">しゃべって唄詠</a>は UTAU 音源（音声合成）でのおしゃべりを、音声入力で手軽に実現します。<br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--5LxwvKR9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/bef4dcc13c07520c4eb41278.png%3Fsha%3D6d1a2bf190c0c8fd026fbca56dfba9fcb493f321" width="256" class="md-img" loading="lazy"></p>
<h2 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" data-line="109" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h2>
<p data-line="111" class="code-line">本稿で挙げたメリットは極めて個人的な感想なので、他の方はまた別のメリットを感じているかと思います。</p>
<p data-line="113" class="code-line">みなさんが思うメリットをコメントに書いていただければ幸いです。</p>
<h2 id="%E7%A2%BA%E8%AA%8D%E7%92%B0%E5%A2%83" data-line="115" class="code-line">
<a class="header-anchor-link" href="#%E7%A2%BA%E8%AA%8D%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 確認環境</h2>
<table data-line="117" class="code-line">
<thead data-line="117" class="code-line">
<tr data-line="117" class="code-line">
<th>項目</th>
<th>環境</th>
</tr>
</thead>
<tbody data-line="119" class="code-line">
<tr data-line="119" class="code-line">
<td>OS</td>
<td>Windows 11 Pro 23H2</td>
</tr>
<tr data-line="120" class="code-line">
<td>Visual Studio</td>
<td>2022 17.14.9</td>
</tr>
<tr data-line="121" class="code-line">
<td>.NET</td>
<td>9.0</td>
</tr>
<tr data-line="122" class="code-line">
<td>Template Studio for WinUI</td>
<td>5.5</td>
</tr>
<tr data-line="123" class="code-line">
<td>WinUIEx</td>
<td>2.6.0</td>
</tr>
<tr data-line="124" class="code-line">
<td>Windows App SDK</td>
<td>1.7.250606001 (1.7.3)</td>
</tr>
</tbody>
</table>
<h2 id="%E5%8F%82%E8%80%83%E3%83%AA%E3%83%B3%E3%82%AF" data-line="126" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%83%AA%E3%83%B3%E3%82%AF" aria-hidden="true"></a> 参考リンク</h2>
<ul data-line="128" class="code-line">
<li data-line="128" class="code-line"><a href="https://learn.microsoft.com/ja-jp/dotnet/api/system.windows.controls.dockpanel" target="_blank" rel="nofollow noopener noreferrer">DockPanel クラス</a></li>
<li data-line="129" class="code-line"><a href="https://learn.microsoft.com/ja-jp/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.fonticon" target="_blank" rel="nofollow noopener noreferrer">FontIcon Class</a></li>
<li data-line="130" class="code-line"><a href="https://learn.microsoft.com/ja-jp/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.relativepanel" target="_blank" rel="nofollow noopener noreferrer">RelativePanel Class</a></li>
<li data-line="131" class="code-line"><a href="https://zenn.dev/shinta0806/articles/rich-title-bar" target="_blank">WinUI 3 タイトルバーにコントロールを載せる（Visual Studio のように）</a></li>
<li data-line="132" class="code-line"><a href="https://zenn.dev/shinta0806/articles/winui3-native-aot" target="_blank">WinUI 3 で Native AOT が簡単になっていた</a></li>
<li data-line="133" class="code-line"><a href="https://zenn.dev/shinta0806/articles/winui3-multi-lang" target="_blank">WinUI 3 の多言語化</a></li>
<li data-line="134" class="code-line"><a href="https://learn.microsoft.com/ja-jp/dotnet/desktop/wpf/whats-new/net90" target="_blank" rel="nofollow noopener noreferrer">WPF for .NET 9 の新機能</a></li>
<li data-line="135" class="code-line"><a href="https://learn.microsoft.com/ja-jp/dotnet/core/deploying/trimming/incompatibilities" target="_blank" rel="nofollow noopener noreferrer">既知のトリミングの非互換性</a></li>
<li data-line="136" class="code-line"><a href="https://shinta.coresv.com/software/utayomi-vc-ja-jp/" target="_blank" rel="nofollow noopener noreferrer">しゃべって唄詠</a></li>
<li data-line="137" class="code-line"><a href="https://shinta.coresv.com/software/nicokaramaker3-jpn/" target="_blank" rel="nofollow noopener noreferrer">ニコカラメーカー 3</a></li>
<li data-line="138" class="code-line"><a href="https://shinta.coresv.com/software/mochikara-producer-ja-jp/" target="_blank" rel="nofollow noopener noreferrer">もちからプロデューサー</a></li>
</ul>
<h2 id="%E4%B8%BB%E3%81%AA%E6%94%B9%E8%A8%82%E5%B1%A5%E6%AD%B4" data-line="140" class="code-line">
<a class="header-anchor-link" href="#%E4%B8%BB%E3%81%AA%E6%94%B9%E8%A8%82%E5%B1%A5%E6%AD%B4" aria-hidden="true"></a> 主な改訂履歴</h2>
<ul data-line="142" class="code-line">
<li data-line="142" class="code-line">2025/07/28 初版。</li>
<li data-line="143" class="code-line">「Native AOT 対応」に加筆。</li>
</ul>


WinUI 3 のいいところ

odakaz

SHINTA

<p data-line="0" class="code-line">静的バインドは確かに嬉しいです。<br>
WPFではDataContextが一文字違いでバグるとか不毛な事が起きてましたし。<br>
逆に、WPFでは簡単にできてたけどWinUI3では自前でビヘイビア実装とか、下手するとP/Invokeが必要になるものがまだあるのが辛いです。</p>


<p data-line="0" class="code-line">コメントありがとうございます。静的バインドいいですよね。<br>
今回は「いいところ」がテーマなのでダメなところはあえて蓋をしていますが、まぁダメなところ多いですよね……。</p>


Discussion