Acryl-Material

Acryl ist eine Art von Pinsel, der eine durchscheinende Textur erzeugt. Sie können Acryl auf App-Oberflächen anwenden, um Tiefe hinzuzufügen und eine visuelle Hierarchie herzustellen.

Wichtige APIs:AcrylicBrush-Klasse, Background-Eigenschaft

Acryl im Lichtdesign

Acryl in dunklem Design

Acryl und das Fluent Design-System

Mit dem Fluent Design-System erstellen Sie moderne Oberflächen, die Licht, Tiefe, Bewegung, Material und Skalierungsmöglichkeiten beinhalten. Acryl ist eine Komponente des Fluent Design-Systems, die Ihrer App physische Struktur (Material) und Tiefe hinzufügt. Weitere Informationen finden Sie in der Übersicht über Fluent Design.

Beispiele

WinUI 2-Katalog
Wenn Sie die WinUI 2 Gallery-App installiert haben, klicken Sie hier , um die App zu öffnen und Acryl in Aktion zu sehen.

Abrufen der WinUI 2-Katalog-App (Microsoft Store)
Abrufen des Quellcodes (GitHub)

Acrylmischungen

Die auffälligste Eigenschaft von Acryl ist seine Transparenz. Es gibt zwei Acrylmischungen, die beeinflussen, welche Inhalte durch das Material sichtbar sind:

• Hintergrund-Acryl zeigt den Desktophintergrund und andere Fenster, die sich hinter der derzeit aktiven App befinden. Dabei wird Tiefe zwischen den Fenstern der Anwendung hinzugefügt, während die Personalisierungseinstellungen des Benutzers angewendet werden.
• In-App-Acryl fügt Tiefenwirkung innerhalb des App-Frames hinzu, wodurch sowohl Fokus als auch Hierarchie erzeugt werden.

Vermeiden Sie das Überschichten mehrerer Acryloberflächen: Mehrere Acrylschichten im Hintergrund können störende optische Täuschungen erzeugen.

Wann sollte Acryl verwendet werden?

• Verwenden Sie In-App-Acryl zur Unterstützung der Benutzeroberfläche, z. B. auf Oberflächen, die beim Scrollen oder während der Interaktion mit ihnen Inhalte überlappen können.
• Verwenden Sie Hintergrund-Acryl für kurzlebige Benutzeroberflächenelemente wie Kontextmenüs, Flyouts und einfach ausblendbare Benutzeroberflächenelemente.
  Die Verwendung von Acryl in kurzlebigen Szenarios hilft dabei, eine visuelle Beziehung zu dem Inhalt aufrechtzuerhalten, von dem das kurzlebige Benutzeroberflächenelement ausgelöst wurde.

Wenn Sie In-App-Acryl auf Navigationsoberflächen verwenden, sollten Sie den Inhalt unter dem Acrylbereich erweitern, um den Flow in Ihrer App zu verbessern. „NavigationView“ erledigt dies automatisch für Sie. Um einen Streifenbildungseffekt zu vermeiden, versuchen Sie nicht, mehrere Acrylelemente Rand an Rand zu platzieren, da dies zu einem unerwünschten Rand zwischen den beiden weichgezeichneten Oberflächen führen kann. Acryl ist ein Werkzeug, um Visuelle Harmonie in Ihre Designs zu bringen, aber wenn es falsch verwendet wird, kann es zu visuellem Rauschen führen.

Berücksichtigen Sie die folgenden Verwendungsmuster, um zu entscheiden, wie sich Acryl am besten in Ihre App integrieren lässt:

Vertikale Bereiche

Für vertikale Bereiche oder Oberflächen, die dabei helfen, Inhalte Ihrer App abzuteilen, empfehlen wir, dass Sie einen nicht transparenten Hintergrund anstelle von Acryl verwenden. Wenn sich Ihre vertikalen Bereiche auf bzw. vor Inhalten öffnen, wie in den Modi Compact oder Minimal von „NavigationView “, sollten Sie In-App-Acryl verwenden, um den Kontext der Seite beizubehalten, wenn der Benutzer diesen Bereich geöffnet hat.

Kurzlebige Oberflächen

Für Apps mit Kontextmenüs, Flyouts, nicht modalen Popups oder Lichtfenstern wird empfohlen, Acryl im Hintergrund zu verwenden, insbesondere wenn diese Oberflächen außerhalb des Rahmens des Standard App-Fensters zeichnen.

Viele XAML-Steuerelemente zeichnen standardmäßig Acryl. MenuFlyout, AutoSuggestBox, ComboBox und ähnliche Steuerelemente mit Light-Dismiss-Popups verwenden alle Acryl, während sie geöffnet sind.

Hinweis

Das Rendern von Acryloberflächen ist GPU-intensiv, wodurch der Energieverbrauch des Geräts erhöht und die Akkulaufzeit verkürzt werden kann. Acryleffekte werden automatisch deaktiviert, wenn ein Gerät in den Energiesparmodus wechselt. Benutzer können Acryleffekte für alle Apps deaktivieren, indem sie die Transparenzeffekte in Einstellungen > Personalisierung > Farben deaktivieren.

Benutzerfreundlichkeit und Anpassungsfähigkeit

Acryl passt seine Darstellung automatisch an eine Vielzahl von Geräten und Kontexten an.

Im Modus mit hohem Kontrast wird Benutzern anstelle von Acryl weiterhin die vertraute Hintergrundfarbe ihrer Wahl angezeigt. Darüber hinaus werden sowohl das Hintergrund- als auch das In-App-Acryl in den folgenden Fällen als Volltonfarben angezeigt:

• Wenn der Benutzer die Transparenzeffekte in einstellungen > Personalisierungsfarben > deaktiviert.
• Wenn der Stromsparmodus aktiviert ist.
• Wenn die App auf Low-End-Hardware ausgeführt wird.

Darüber hinaus werden in den folgenden Fällen nur beim Hintergrund-Acryl Durchsichtigkeit und Textur durch eine Volltonfarbe ersetzt:

• Wenn ein App-Fenster auf dem Desktop deaktiviert wird.
• Wenn die App auf Xbox, HoloLens oder im Tablet-Modus ausgeführt wird.

Hinweise zur Lesbarkeit

Es muss sichergestellt werden, dass Texte, die in der App dargestellt werden, die Kontrastverhältnisse erfüllen (siehe Anforderungen für barrierefreien Text). Wir haben die Acrylressourcen so optimiert, dass Text den Kontrastverhältnissen auf dem Acryl entspricht. Es wird nicht empfohlen, akzentfarbenen Text auf Ihren Acryloberflächen zu platzieren, da diese Kombinationen die Mindestkontrastverhältnisse beim Standardmäßigen Schriftgrad von 14 Pixeln wahrscheinlich nicht erfüllen. Platzieren Sie möglichst keine Hyperlinks über Acrylelementen. Wenn Sie sich für die Anpassung der Acrylfarbfarbe oder der Deckkraft entscheiden, sollten Sie auch die Auswirkungen auf die Lesbarkeit im Auge behalten.

Acryl-Designressourcen

Mithilfe der XAML AcrylicBrush - oder vordefinierten AcrylBrush-Designressourcen können Sie Acryl ganz einfach auf die Oberflächen Ihrer App anwenden. Zunächst müssen Sie entscheiden, ob Sie In-App- oder Hintergrund-Acryl verwenden möchten. Prüfen Sie die zuvor in diesem Artikel beschriebenen allgemeinen App-Muster auf Empfehlungen.

Wir haben eine Sammlung von Pinsel-Designressourcen sowohl für Hintergrund- als auch In-App-Acrylarten erstellt, die das Design der App berücksichtigen und nach Bedarf wieder auf Volltonfarben zurückgreifen. Für WinUI 2 befinden sich diese Designressourcen in der AcrylicBrush-Themeresources-Datei im GitHub-Repository microsoft-ui-xaml. Ressourcen, die Hintergrund in ihren Namen enthalten, stellen Hintergrundacryl dar, während InApp auf In-App-Acryl bezieht.

Um eine bestimmte Oberfläche zu zeichnen, wenden Sie eine der WinUI 2-Designressourcen auf Elementhintergründe an, genau wie jede andere Pinselressource.

<Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}">

Benutzerdefinierter Acrylpinsel

Sie können dem Acryl Ihrer App einen Farbton hinzufügen, um das Branding anzuzeigen oder ein optisches Gleichgewicht mit anderen Elementen auf der Seite zu erzeugen. Um Farbe und keine 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.
• BackgroundSource: die Kennzeichnung zum Festlegen, ob Sie Hintergrund- oder In-App Acryl verwenden möchten.
• FallbackColor: die Volltonfarbe, durch die Acryl im Stromsparmodus ersetzt wird. Im Fall von Hintergrund-Acryl ersetzt die Fallbackfarbe das Acryl auch, wenn Ihre App nicht im aktiven Desktopfenster angezeigt wird oder wenn die App auf dem Telefon oder der Xbox ausgeführt wird.

Um einen Acrylpinsel hinzuzufügen, definieren Sie die Ressourcen für das dunkle und das helle Design und für das Design mit hohem Kontrast. Beachten Sie, dass wir bei hohem Kontrast die Verwendung eines „SolidColorBrush“ mit demselben X:Key wie für den dunklen/hellen AcrylicBrush empfehlen.

Hinweis

Wenn Sie keinen „TintLuminosityOpacity“-Wert angeben, passt das System seinen Wert automatisch auf Grundlage Ihrer Werte für „TintColor“ und „TintOpacity“ an.

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Default">
        <AcrylicBrush x:Key="MyAcrylicBrush"
            BackgroundSource="HostBackdrop"
            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"
            BackgroundSource="HostBackdrop"
            TintColor="#FFFF0000"
            TintOpacity="0.8"
            TintLuminosityOpacity="0.5"
            FallbackColor="#FFFF7F7F"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

Das folgende Beispiel zeigt, wie Sie AcrylicBrush in Code deklarieren. Wenn Ihre App mehrere Betriebssystemziele unterstützt, müssen Sie sicherstellen, dass diese API auf dem Gerät des Benutzers verfügbar ist.

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.AcrylicBrush"))
{
    Windows.UI.Xaml.Media.AcrylicBrush myBrush = new Windows.UI.Xaml.Media.AcrylicBrush();
    myBrush.BackgroundSource = Windows.UI.Xaml.Media.AcrylicBackgroundSource.HostBackdrop;
    myBrush.TintColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.FallbackColor = Color.FromArgb(255, 202, 24, 37);
    myBrush.TintOpacity = 0.6;

    grid.Fill = myBrush;
}
else
{
    SolidColorBrush myBrush = new SolidColorBrush(Color.FromArgb(255, 202, 24, 37));

    grid.Fill = myBrush;
}

Ausdehnen von Acryl in die Titelleiste

Um Ihrem App-Fenster ein nahtloses Aussehen zu verleihen, können Sie im Acryl im Titelleistenbereich verwenden. In diesem Beispiel wird Acryl in die Titelleiste ausgedehnt, indem die ApplicationViewTitleBar der Eigenschaften des Objekts ButtonBackgroundColor und ButtonInactiveBackgroundColor auf Colors.Transparent festgelegt werden.

private void ExtendAcrylicIntoTitleBar()
{
    CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
    ApplicationViewTitleBar titleBar = ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;
    titleBar.ButtonInactiveBackgroundColor = Colors.Transparent;
}

Dieser Code kann in die OnLaunched-Methode Ihre App eingefügt werden (App.xaml.cs), nach dem Aufruf von Window.Activate wie hier gezeigt, oder auf der ersten Seite Ihrer App.

// Call your extend acrylic code in the OnLaunched event, after
// calling Window.Current.Activate.
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    Frame rootFrame = Window.Current.Content as Frame;

    // Do not repeat app initialization when the Window already has content,
    // just ensure that the window is active
    if (rootFrame == null)
    {
        // Create a Frame to act as the navigation context and navigate to the first page
        rootFrame = new Frame();

        rootFrame.NavigationFailed += OnNavigationFailed;

        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
        {
            //TODO: Load state from previously suspended application
        }

        // Place the frame in the current Window
        Window.Current.Content = rootFrame;
    }

    if (e.PrelaunchActivated == false)
    {
        if (rootFrame.Content == null)
        {
            // When the navigation stack isn't restored navigate to the first page,
            // configuring the new page by passing required information as a navigation
            // parameter
            rootFrame.Navigate(typeof(MainPage), e.Arguments);
        }
        // Ensure the current window is active
        Window.Current.Activate();

        // Extend acrylic
        ExtendAcrylicIntoTitleBar();
    }
}

Darüber hinaus müssen Sie den Titel der App, der normalerweise automatisch in der Titelleiste angezeigt wird, mit einem TextBlock zeichnen, der CaptionTextBlockStyle verwendet. Weitere Informationen finden Sie unter Anpassen der Titelleiste.

Empfohlene und nicht empfohlene Vorgehensweisen

• Verwenden Sie Acryl auf vorübergehenden Oberflächen.
• Dehnen Sie das Acryl auf mindestens einen Rand der App aus, um durch eine dezente Vermischung mit der Umgebung der App eine nahtlose Oberfläche bereitzustellen.
• Platzieren Sie desktop-Acryl nicht auf großen Hintergrundoberflächen Ihrer App.
• Platzieren Sie nicht mehrere Acrylscheiben nebeneinander, da dies zu einer unerwünschten sichtbaren Naht führt.
• Platzieren Sie keinen akzentfarbigen Text über Acryloberflächen.

Unser Ansatz beim Entwurf von Acryl

Wir haben die Hauptkomponenten von Acryl optimiert, um seine individuelle Darstellung und einzigartigen Eigenschaften zu erhalten. Wir haben damit begonnen, flachen Oberflächen mithilfe von Durchsichtigkeit, Weichzeichnung und Rauschen visuelle Tiefe und Dimension hinzuzufügen. Dann haben wir eine Ausschluss-Mischmodus-Ebene hinzugefügt, um den Kontrast und die Lesbarkeit der auf dem Acrylhintergrund platzierten UI sicherzustellen. Zuletzt haben wir Farbtöne hinzugefügt, um Personalisierungen zu ermöglichen. Zusammen ergeben diese Ebenen ein neues, einsatzbereites Material.

Das Acryl setzt sich folgendermaßen zusammen: Hintergrund, Weichzeichnung, Ausschluss-Mischung, Überlagerung der Farbe/des Farbtons, Rauschen

Beispielcode herunterladen

• WinUI 2-Katalogbeispiel : Sehen Sie sich alle XAML-Steuerelemente in einem interaktiven Format an.

Verwandte Artikel

Fluent Design-Übersicht