アプリ内アクリル

XAML AcrylicBrush または定義済みの AcrylicBrush テーマ リソースを使用して、アプリ内アクリルをアプリのサーフェイスに適用できます。

WinUI には、アプリのテーマを尊重し、必要に応じて純色にフォールバックするブラシ テーマ リソースのコレクションが含まれています。 特定のsurfaceを描画するには、他のブラシ リソースを適用するのと同様に、テーマ リソースの 1 つを要素の背景に適用します。

<Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

カスタム アクリル ブラシ

アプリのアクリルに色の濃淡を追加してブランドを表示したり、ページ上の他の要素と視覚的なバランスを取ったりすることができます。 グレースケールではなく色を表示するには、次のプロパティを使用して独自のアクリル ブラシを定義する必要があります。

• TintColor: 色/濃淡のオーバーレイ レイヤーです。
• TintOpacity: 濃淡レイヤーの不透明度です。
• TintLuminosityOpacity: 背景からアクリル サーフェスの間で許容される彩度の量を制御します。
• FallbackColor: 効果をレンダリングできない場合にアクリルの代わりに使用される単色。たとえば、バッテリー節約モードのとき、ユーザーが [設定] [個人用設定] > [色] で > をオフにしているとき、または低性能なハードウェア上で使用されます。

アクリル ブラシを追加するには、ダーク テーマ、ライト テーマ、ハイ コントラスト テーマの 3 つのリソースを定義します。 高コントラストでは、濃色/明るい AcrylicBrush と同じを持つ x:Key を使用することをお勧めします。

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FF7F0000"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="HighContrast">
        <SolidColorBrush x:Key="MyAcrylicBrush"
            Color="{ThemeResource SystemColorWindowColor}"/>
    </ResourceDictionary>

    <ResourceDictionary x:Key="Light">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

次のサンプルは、コードで AcrylicBrush を宣言する方法を示しています。

AcrylicBrush myBrush = new AcrylicBrush();
myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
myBrush.TintOpacity = 0.6;

grid.Background = myBrush;

関連資料

• 資料の概要
• システム背景 (マイカ/アクリル)
• Windows 11設計ガイダンスの資料
• アクリル設計ガイダンス
• WinUI ギャラリー — アクリル サンプル (GitHub)