アプリ内アクリル

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.Fill = myBrush;

関連資料

• 資料の概要
• システム背景 (マイカ/アクリル)
• アクリル設計ガイダンス