In-App-Acryl-Oberfläche

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

Hinweis

In WinUI 3 AcrylicBrush stellt Acrylic nur innerhalb der App bereit – es wendet auf XAML-Inhalte innerhalb des App-Fensters eine Unschärfe und Tönung an, nicht auf den Desktop oder auf Inhalte hinter dem Fenster. Die UWP-Eigenschaft BackgroundSource (die einen HostBackdrop Modus für Acryl auf Fensterebene aktiviert hat) ist in WinUI 3 nicht verfügbar. Für Acrylic auf Fensterebene, bei dem der Desktop durch das Fenster Ihrer App sichtbar ist, setzen Sie Window.SystemBackdrop auf DesktopAcrylicBackdrop. Verwenden Sie SystemBackdropElement, um ein Systemkulissematerial (Mica oder Acryl vom Betriebssystemkompositor) auf ein bestimmtes UI-Element anstelle eines ganzen Fensters anzuwenden.

Ö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 Höhe der Sättigung, die zulässig ist, durch die Acryloberfläche des Hintergrunds.
  • FallbackColor: Die Volltonfarbe, die Acryl ersetzt, wenn der Effekt nicht gerendert werden kann , z. B. im Stromsparmodus, wenn der Benutzer Transparenzeffekte in den Einstellungen > Personalisierungsfarben > oder auf Low-End-Hardware deaktiviert.

Acrylmuster für das helle Design

Acrylmuster für das dunkle Thema

Deckkraft der Leuchtdichte im Vergleich zur Farbton-Deckkraft

Um einen Acrylpinsel hinzuzufügen, definieren Sie die drei Ressourcen für dunkle, helle und kontrastreiche Themen. Bei hohem Kontrast wird die Verwendung eines SolidColorBrush mit demselben x:Key wie für den dunklen/hellen AcrylicBrush empfohlen.

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.Background = myBrush;
  • Last updated on