In-App-Acryl-Oberfläche

Sie können In-App-Acryl auf die Oberflächen Ihrer App mit einem XAML AcrylicBrush oder vordefinierten AcrylicBrush Themenressourcen anwenden.

Öffnen Sie die WinUI Gallery-App und sehen Sie Acryl in Aktion

WinUI enthält eine Sammlung von Pinseldesignressourcen, die das Design der App respektieren und bei Bedarf auf Volltonfarben zurückgreifen. Um eine spezifische Oberfläche zu streichen, wenden Sie eine der Themenressourcen auf Elementhintergründe an, genauso wie Sie es mit jeder anderen Pinselresource tun würden.

<Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

Hinweis

Sie können diese Ressourcen in der AcrylicBrush-Designressourcendatei in der Microsoft-ui-xaml-GitHub-Repository anzeigen.

Benutzerdefinierter Acrylpinsel

Sie können dem Acryl Ihrer App einen Farbton hinzufügen, um Branding anzuzeigen oder ein visuelles Gleichgewicht mit anderen Elementen auf der Seite zu erzielen. Um Farbe anstelle von Graustufen anzuzeigen, müssen Sie ihre eigenen Acrylpinsel mithilfe der folgenden Eigenschaften definieren.

• TintColor: die Überlagerungsschicht der Farbe/des Farbtons.
• TintOpacity: die Deckkraft der Farbtonschicht.
• TintLuminosityOpacity: Steuert die Menge der Sättigung, die durch die Acryloberfläche aus dem Hintergrund zugelassen wird.
• FallbackColor: die Volltonfarbe, die im Stromsparmodus das Acryl ersetzt. Bei Hintergrund-Acryl ersetzt die Fallbackfarbe auch Acryl, wenn sich Ihre App nicht im aktiven Desktopfenster befindet.

Um einen Acrylpinsel hinzuzufügen, definieren Sie die drei Ressourcen für dunkle, helle und kontrastreiche Themen. Im Modus für hohen Kontrast empfehlen wir, einen SolidColorBrush zu verwenden, der dem dunklen/hellen x:Key entspricht.

Hinweis

Wenn Sie keinen TintLuminosityOpacity Wert angeben, passt das System seinen Wert automatisch basierend auf Ihrer TintColor und TintOpacity an.

<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>

Im folgenden Beispiel wird gezeigt, wie ein AcrylBrush im Code deklariert wird.

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;

Verwandte Artikel

• Materialübersicht
• Systemhintergründe (Mica/Acryl)
• Acryl-Designleitfaden