デスクトップの背景(壁紙)設定アプリを作りたい その2 WPFでWindows 11のMicaに対応する

スポンサーリンク
Multi Backgrounds

Windows 11のMicaとは

マイカは、アプリや設定などの長時間のウィンドウの背景を塗り分け、テーマとデスクトップの壁紙を組み込んだ不透明で動的な素材です。

マイカ素材 – Windows apps | Microsoft Docs

Mica(マイカ)は、Windows 11のエクスプローラーのタイトル部分や「設定」のウインドウに適用されている素材?です。
ウィンドウがアクティブな時のみ、 ウィンドウに壁紙を非常にぼかした色が適用されます。
透過であればWindows Vistaの頃からAero Glassがありましたが、それとの違いは、対象のウィンドウの背面に他の ウィンドウがあったとしても、壁紙のみが使われることです。
ポップアップメニュー等で自分より背面にあるウインドウを含めて透過させたい場合はAcrylic(アクリル)を使用するようです。

WPFでMicaに対応する

せっかく今からWindows向けアプリを作るのであれば、Micaを使用したウィンドウにしたいところです。
さらに言えば背景設定アプリを作ろうとしているので、「設定」画面と近い見た目にすると分かりやすそうです。
しかし、Micaが含まれるBackdropMaterialクラスはWinUI 2.6, 2.6-prerelease, 2.7, 2.7-prerelease, 2.8-prereleaseのみのようです。
今回はWPFで作成しようと考えているため、WinUI 2.6や2.7は使えません。
XAML Islandsを使用すればWPFからWinUIを使用することもできるようですが、Micaはできるかどうか良く分からず、何より面倒臭そうなのでXAML Islands以外の方法を探しました。

WPFでMicaを使用する方法を探した結果、Apply Mica to a WPF app on Windows 11というサイトを見つけることができました。
10月13日に投稿されたばかりで、現段階で正式と言える方法なのかは分かりませんが、こちらを使用させていただくことでWPFでMicaを使用することができました。
こちらを使用したウィンドウと「設定」画面を同じ位置に置いてそれぞれアクティブにした場合のスクリーンショットはこんな感じです。

WPFでMicaを使用(NavigationViewを追加して、NavigationViewの背景色を透過とした状態です)
Windows 11の設定画面

同じですね。
著作権の都合で背景画像は見せられませんが、背景に応じたカラーリングとなっています。

こんな感じでWPF+ModernWPFでMicaを使ったウィンドウをベースとして、アプリを作っていこうと思います。

コメント

  1. […] その2 WPFでWindows 11のMicaに対応するで書いた通り、Windows 11の「設定」画面と近い感じの見た目(UI)にしようとしていました。最終的にこれで行こうかなぁという見た目がこちら。 […]

タイトルとURLをコピーしました