2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

WPF UI に憧れたけれど、最終的に .NET MAUI Blazor Hybrid に戻ってきた話

2
Posted at

序章

WPF UI のデザインに憧れて
公式ドキュメントを読みながら
公式デモ のようなカッコいい画面を作れるようになりたくて
3か月ほどコツコツ学習を続けてきました。

ただ、実際に触っていくと画面制御がなかなか難しく、並行して勉強していた .NET MAUI Blazor Hybrid アプリ のほうが自分には合っていると感じたため、そのあたりの所感をまとめてみます。

目指していたもの

目指していたのは、公式デモのようなカッコいい UI です。

公式Gallery

頑張って作ったサンプル

アコーディオンで開閉できるナビゲーションメニューや、テーマを選択できる画面までは作ることができました。

image.png

スクロールバー上でマウスホイールを動かすとスクロールしてくれるのですが、スクロールバー以外の箇所でマウスホイールを操作しても動かない場面がありました。
このあたりはプログラム側で制御する必要があり、画面制御についてはかなり勉強になりました。

開発環境

今回検証した環境は以下のとおりです。

  • Visual Studio 2026 Ver. 18.5.2

結局、Blazor に戻ってきた

WPF UI を使ってしばらく画面を作ってみましたが、最終的には Blazor に戻ってきました。
理由としては、普段から Bootstrap や Blazor の書き方に慣れているためです。
WPF UI はデザインがとても魅力的で、うまく使いこなせればかなりカッコいいデスクトップアプリを作れそうです。
ただ、実際に作り込んでいくと、画面の状態管理やスクロール制御など、細かい UI 制御を自分で考える場面が多くありました。
その点、Blazor に慣れている人であれば、.NET MAUI Blazor Hybrid アプリ のほうがスムーズに開発できるのではないかと感じました。

image.png

なぜか Visual Studio 上から iOS ターゲットのチェックを外せない

Visual Studio 上では、なぜか iOS ターゲットのチェックを外せませんでした。
csproj を直接変更すれば対応できそうですが、今回は特に問題にならなかったため、そのまま進めました。

なお、Android ターゲットのチェックは外せます。

image.png

ビルド・発行時に exe 直下へ大量のファイルが出力される

exe を作りたいだけなのですが、発行すると 500 近いファイルが出力されます。
できれば 1 ファイルにまとめられないかと思い、単一 exe 化を試してみました。

※ exe とクラスフォルダのように分かれてくれるだけでも、まだ扱いやすいのですが

調べてみると、単一 exe 化はまだ難しそうな内容も見つかりました。

一方で、「できた」という報告も見かけたため、実際に試してみます。

csproj ファイルを変更する

Visual Studio 上で設定する方法が分からなかったため、csproj ファイルを直接編集しました。

実際に設定した内容

<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">
    <WindowsAppSDKSelfContained>true</WindowsAppSDKSelfContained>
    <SelfContained>true</SelfContained>
    <PublishSingleFile>true</PublishSingleFile>
</PropertyGroup>

<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows' and '$(RuntimeIdentifierOverride)' != ''">
    <RuntimeIdentifier>$(RuntimeIdentifierOverride)</RuntimeIdentifier>
</PropertyGroup>

SelfContained は、.NET ランタイムをアプリに含めるための設定です。

WindowsAppSDKSelfContained は、Windows App SDK のランタイムをアプリ側に含めるための設定です。

そのため、どちらも true に設定します。

また、PublishSingleFile は、できるだけ 1 つの exe にまとめて発行するための設定です。

ビルドする

以下のコマンドで発行しました。

win-x64\publish の中にファイルが出力されます。

dotnet publish .\MauiAppTest.csproj `
-f net10.0-windows10.0.19041.0 `
-c Release `
-p:RuntimeIdentifierOverride=win-x64 `
-p:WindowsPackageType=None `
-p:WindowsAppSDKSelfContained=true `
-p:SelfContained=true `
-p:PublishSingleFile=true `
-p:IncludeNativeLibrariesForSelfExtract=true `
-p:IncludeAllContentForSelfExtract=true `
-p:EnableCompressionInSingleFile=true `
-p:PublishTrimmed=false `
-p:DebugType=embedded `
-p:DebugSymbols=false

publish フォルダの中を見ると、完全に 1 ファイルにはできていないようでした。

image.png

さらに、起動してみるとレイアウトが崩れていました。

wwwroot フォルダを持ってきても改善しませんでした。

image.png

一方で、win-x64 にある exe から起動すると、正常に動作しました。

その他試したこと

WinForms + WebView2

WinForms の機能はそのまま使いつつ、WebView2 を利用して WinForms 上にカッコいい UI を作れる構成も試してみました。

ただ、実際に触ってみると「これなら WinForms のままでいいかもしれない」と感じてしまいました。

まとめ

WPF UI は見た目が非常に魅力的で、公式デモのような画面を作れたらかなり楽しそうだと感じました。

一方で、実際に作り込んでいくと画面制御で考えることが多く、自分にとっては少し難しく感じる場面もありました。

その点、Blazor に慣れている場合は .NET MAUI Blazor Hybrid のほうが、これまでの知識を活かしやすく、開発しやすい印象です。

WPF UI を触ったことで、デスクトップアプリの画面制御について学べた部分も多かったので、今回の寄り道はかなり良い勉強になりました。

2
2
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?