Windows アプリの素材

マテリアルは、UI サーフェスに適用される視覚効果であり、深度、階層、視覚的な関心を作成します。 WinUI 3 には、材料を適用するための 4 つのメカニズムが用意されており、それぞれ異なるシナリオに適しています。

Important

AcrylicBrush は アプリ内アクリルのみ であり、アプリ ウィンドウ内の XAML コンテンツをぼかします。 アプリの背後にデスクトップやその他のウィンドウは表示されません。 デスクトップシースルー効果の場合は、 Window.SystemBackdrop または SystemBackdropElementを使用します。

どの素材を使用する必要がありますか?

Scenario 材料 API
マイカの背景を持つアプリ ウィンドウ (壁紙が色付き) Mica Window.SystemBackdrop = new MicaBackdrop()
シースルーフロストガラスの背景を持つアプリ ウィンドウ デスクトップ アクリル Window.SystemBackdrop = new DesktopAcrylicBackdrop()
アクリル背景のフライアウト、ポップアップ、またはコンテキスト メニュー 画面上のシステム バックドロップ SystemBackdrop、FlyoutBaseなどにPopupを設定します。
マイカまたはアクリルを使用したサイドバー、パネル、または要素 (ウィンドウ全体ではなく) SystemBackdropElement <SystemBackdropElement> コントロール
アプリ内ぼかし効果を持つナビゲーション ウィンドウまたはコンテンツ パネル アプリ内アクリル {ThemeResource AcrylicInAppFillColorDefaultBrush}

素材なし (既定値)

マテリアルが適用されていない場合、ウィンドウの背景はアクティブなライトテーマまたはダークテーマから描画された純色であり、ぼかしや半透明性はありません。

マテリアルが適用されていない WinUI 3 アプリ ウィンドウのスクリーンショット。白い背景がフラットに表示されています。

マテリアルは、ハードウェアのサポートとユーザー設定を必要とするコンポジター効果に依存します。 WinUI 3 は、マテリアルをレンダリングできない場合に、純色に正常にフォールバックします。

  • リモート デスクトップまたは仮想マシン — コンポジターは RDP 経由でデスクトップ コンテンツとブレンドできないため、SystemBackdropマテリアルは自動的にフォールバックします。
  • グラフィックス ハードウェアが不足しています 。マイカとデスクトップ アクリルには DirectX 11 と適切な GPU メモリが必要です。 しきい値を満たさないデバイスは、単色のテーマカラーに切り替わります。
  • 透明度効果は無効になっています。>の透過性効果をオフにすると、すべてのSystemBackdropマテリアルとAcrylicBrushが単色の代替にフォールバックします。
  • バッテリー セーバーのアクティブ — Windowsは、バッテリー セーバーがオンの場合にアクリル (DesktopAcrylicBackdropとAcrylicBrush) を無効にします。 マイカは影響を受けません。
  • ハイコントラストモード - すべての材料が抑制されます。代わりに、ハイ コントラストテーマの色が適用されます。

アプリでこれらの条件を検出する必要はありません。API はフォールバックを自動的に処理します。 設定する FallbackColor またはテーマの背景が、無地の単色でも見やすいことを確認してください。

Mica

マイカは、ミュートされたパーソナライズされた背景にユーザーのデスクトップの壁紙の色を組み込みます。 これは、メイン アプリ ウィンドウの背景 (特にタイトル バーとナビゲーション ウィンドウ領域) 用に設計されています。

  • API: Window.SystemBackdrop = new MicaBackdrop()
  • バリアント: MicaKind.Base (既定) または MicaKind.BaseAlt (セカンダリ サーフェスの場合は軽量)
  • Windowsバージョン: Windows 11のみ。 Windows 10の単色のテーマにフォールバックします。

MicaBackdrop が適用された WinUI 3 アプリのスクリーンショット。ユーザーのデスクトップの壁紙によって濃い青灰色の微妙な背景が示されています。

デスクトップアクリル

デスクトップ アクリルは、アプリ ウィンドウの背後にあるデスクトップとコンテンツをライブでぼかして表示し、すりガラスのような見た目を生み出します。

  • API: Window.SystemBackdrop = new DesktopAcrylicBackdrop()
  • バリアント: DesktopAcrylicKind.Base (より不透明) または DesktopAcrylicKind.Thin (より透明)
  • Windows バージョン: Windows 10 (ビルド 17763) 以降。

DesktopAcrylicBackdrop が適用された WinUI 3 アプリのスクリーンショット。ウィンドウの背後にあるデスクトップ コンテンツの曇りガラスのぼかしが示されています。

アクリルは、SystemBackdrop、FlyoutBase、Popup、またはMenuFlyoutPresenterにCommandBarFlyoutCommandBar設定された一時的なサーフェスにも適用できます。 完全な一覧については 、「システムの背景 」を参照してください。

SystemBackdropElement

SystemBackdropElement は、ウィンドウ全体ではなく、OS コンポジターから特定の XAML 要素に Mica または Desktop Acrylic マテリアルを適用します。 サイドバー、パネル、またはカードがウィンドウの残りの部分とは別に独自のマイカまたはアクリルの背景を必要とする場合に使用します。

アプリ内 Acrylic (AcrylicBrush)

AcrylicBrush は、アプリ ウィンドウ内の XAML コンテンツをぼかします。 その表面越しにデスクトップや他のウィンドウは表示されません。 これは、半透明のアプリ内効果が必要なナビゲーション ウィンドウ、サイドバー、またはコンテンツ パネルに使用します。

  • API: {ThemeResource AcrylicInAppFillColorDefaultBrush}を要素Backgroundに適用するか、AcrylicBrush、TintColor、およびTintOpacityを使用してカスタム TintLuminosityOpacityを定義します。
  • UWP BackgroundSource = HostBackdrop プロパティは WinUI 3 では使用できません。
  • 詳細とコード サンプルについては、 アプリ内アクリルを参照してください。

AcrylicBrush が適用された WinUI 3 アプリのスクリーンショット。アプリ ウィンドウ内の XAML コンテンツをぼかしる半透明のパネルが示されています。

  • Last updated on