Acryl-MaterialAcrylic material

Herobild

Acryl ist eine Art von Pinsel, der eine durchscheinende Textur erzeugt.Acrylic is a type of Brush that creates a translucent texture. Sie können Acryl auf App-Oberflächen anwenden, um Tiefe hinzuzufügen und eine visuelle Hierarchie herzustellen.You can apply acrylic to app surfaces to add depth and help establish a visual hierarchy.

Wichtige APIs: AcrylicBrush-Klasse, Background-EigenschaftImportant APIs: AcrylicBrush class, Background property

Acryl im hellen Design Acryl im hellen DesignAcrylic in light theme Acrylic in light theme

Acryl im dunklen Design Acryl im dunklen DesignAcrylic in dark theme Acrylic in dark theme

Acryl und das Fluent Design-SystemAcrylic and the Fluent Design System

Mit dem Fluent Design-System erstellen Sie moderne Oberflächen, die Licht, Tiefe, Bewegung, Material und Skalierungsmöglichkeiten beinhalten.The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. Acryl ist eine Komponente des Fluent Design-Systems, die Ihrer App physische Struktur (Material) und Tiefe hinzufügt.Acrylic is a Fluent Design System component that adds physical texture (material) and depth to your app. Weitere Informationen finden Sie in der Übersicht über Fluent Design für UWP.To learn more, see the Fluent Design for UWP overview.

VideozusammenfassungVideo summary

BeispieleExamples

Ein Bild

XAML-SteuerelementekatalogXAML Controls Gallery
Wenn Sie die XAML-Steuerelementekatalog-App installiert haben, klicken Sie hier, um die App zu öffnen und Acryl in Aktion zu sehen.If you have the XAML Controls Gallery app installed, click here to open the app and see acrylic in action.

Beziehen der XAML-Steuerelementekatalog-App (Microsoft Store)Get the XAML Controls Gallery app (Microsoft Store)
Abrufen des Quellcodes (GitHub)Get the source code (GitHub)

AcrylmischungenAcrylic blend types

Die auffälligste Eigenschaft von Acryl ist seine Transparenz.Acrylic's most noticeable characteristic is its transparency. Es gibt zwei Acrylmischungen, die beeinflussen, welche Inhalte durch das Material sichtbar sind:There are two acrylic blend types that change what’s visible through the material:

  • 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.Background acrylic reveals the desktop wallpaper and other windows that are behind the currently active app, adding depth between application windows while celebrating the user’s personalization preferences.
  • In-App-Acryl fügt Tiefenwirkung innerhalb des App-Frames hinzu, wodurch sowohl Fokus als auch Hierarchie erzeugt werden.In-app acrylic adds a sense of depth within the app frame, providing both focus and hierarchy.

Hintergrund-Acryl

In-App-Acryl

Seien Sie beim Schichten mehrerer Acryloberflächen vorsichtig: Mehrere Schichten von Hintergrund-Acryl können ablenkende optische Täuschungen verursachen.Layer multiple acrylic surfaces with caution: multiple layers of background acrylic can create distracting optical illusions.

Wann sollte Acryl verwendet werden?When to use acrylic

  • 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.Use in-app acrylic for supporting UI, such as on surfaces that may overlap content when scrolled or interacted with.
  • Verwenden Sie Hintergrund-Acryl für kurzlebige Benutzeroberflächenelemente wie Kontextmenüs, Flyouts und einfach ausblendbare Benutzeroberflächenelemente.Use background acrylic for transient UI elements, such as context menus, flyouts, and light-dismissable UI.
    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.Using Acrylic in transient scenarios helps maintain a visual relationship with the content that triggered the transient UI.

Bei Verwendung von In-App-Acryl auf Navigationsoberflächen sollten Sie erwägen, den Inhalt unter dem Acrylbereich auszudehnen, um den Flow in Ihrer App zu verbessern.If you are using in-app acrylic on navigation surfaces, consider extending content beneath the acrylic pane to improve the flow on your app. „NavigationView“ erledigt dies automatisch für Sie.Using NavigationView will do this for you automatically. 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.However, to avoid creating a striping effect, try not to place multiple pieces of acrylic edge-to-edge - this can create an unwanted seam between the two blurred surfaces. Acryl ist ein Tool zum Erzeugen von visueller Harmonie in Ihren Designs, bei inkorrekter Verwendung können sich jedoch visuelle Störungen ergeben.Acrylic is a tool to bring visual harmony to your designs, but when used incorrectly, can result in visual noise.

Berücksichtigen Sie die folgenden Verwendungsmuster, um zu entscheiden, wie sich Acryl am besten in Ihre App integrieren lässt:Consider the following usage patterns to decide how best to incorporate acrylic into your app:

Horizontale Navigation oder SteuerungHorizontal navigation or commanding

Wenn sich „NavigationView“ in Ihrer App nicht verwenden lässt und Sie Acryl selbst hinzufügen möchten, empfehlen wir die Verwendung von relativ durchscheinendem Acryl mit einer Farbton-Deckkraft von 60 %.If your app is not able to leverage NavigationView and you plan on adding acrylic on your own, we recommend using relatively translucent acrylic with 60% tint opacity.

  • Wenn der Bereich als Überlagerung von anderen Inhalten der App geöffnet wird, sollte dies 60 % In-App-Acryl sein.When the pane opens as an overlay above other app content, this should be 60% in-app acrylic

Karten-App mit horizontaler In-App-Steuerung

Zusätzlich erhält Ihre App dadurch, dass sich Ihr Inhalt unter dem oben liegenden Acryl ausdehnt oder scrollt, eine immersivere und nahtlosere Erfahrung.In addition, having your content extend or scroll under the acrylic at the top will give your app a more immersive and seamless experience.

Vertikale BereicheVertical Panes

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.For vertical panes or surfaces that help section off content of your app, we recommend you use an opaque background instead of acrylic. 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.If your vertical panes open on top of content, like in NavigationView's Compact or Minimal modes, we suggest you use in-app acrylic to help maintain the page's context when the user has this pane open.

Kurzlebige OberflächenTransient surfaces

Für Apps mit Menü-Flyouts, nicht modalen Popups oder einfach ausblendbaren Bereichen empfiehlt sich die Verwendung von Hintergrund-Acryl.For apps with menu flyouts, non-modal popups, or light-dismiss panes, it is recommended to use background acrylic.

E-Mail-App-Muster mit einem Informations-Flyout

Viele unserer Steuerelemente verwenden standardmäßig Acryl.Many of our controls will use acrylic by default. MenuFlyouts, AutoSuggestBox, ComboBox und ähnliche Steuerelemente mit einfach ausblendbaren Popups verwenden alle das kurzlebige Acryl, wenn sie aufgerufen werden.MenuFlyouts, AutoSuggestBox, ComboBox and similar controls with light-dismiss popups will all use the transient acrylic when they are invoked.

Hinweis

Das Rendern von Acryloberflächen ist GPU-intensiv, wodurch der Energieverbrauch des Geräts erhöht und die Akkulaufzeit verkürzt werden kann.Rendering acrylic surfaces is GPU-intensive, which can increase device power consumption and shorten battery life. Acryleffekte werden automatisch deaktiviert, wenn Geräte in den Stromsparmodus versetzt werden, und die Benutzer können Acryleffekte für alle Apps wahlweise deaktivieren.Acrylic effects are automatically disabled when devices enter Battery Saver mode, and users can disable acrylic effects for all apps, if they choose.

Benutzerfreundlichkeit und AnpassungsfähigkeitUsability and adaptability

Acryl passt seine Darstellung automatisch an eine Vielzahl von Geräten und Kontexten an.Acrylic automatically adapts its appearance for a wide variety of devices and contexts.

Im Modus mit hohem Kontrast wird Benutzern anstelle von Acryl weiterhin die vertraute Hintergrundfarbe ihrer Wahl angezeigt.In High Contrast mode, users continue to see the familiar background color of their choosing in place of acrylic. Darüber hinaus werden sowohl das Hintergrund- als auch das In-App-Acryl in den folgenden Fällen als Volltonfarben angezeigt:In addition, both background acrylic and in-app acrylic appear as a solid color:

  • Bei Deaktivierung der Transparenz in „Einstellungen“ > „Personalisierung“ > „Farbe“When the user turns off transparency in Settings > Personalization > Color
  • Bei aktivem StromsparmodusWhen Battery Saver mode is activated
  • Bei Ausführen der App auf Low-End-HardwareWhen the app runs on low-end hardware

Darüber hinaus werden in den folgenden Fällen nur beim Hintergrund-Acryl Durchsichtigkeit und Textur durch eine Volltonfarbe ersetzt:In addition, only background acrylic will replace its translucency and texture with a solid color:

  • Bei Deaktivierung eines App-Fensters auf dem DesktopWhen an app window on desktop deactivates
  • Bei Ausführen der UWP-App auf einem Telefon, der Xbox, HoloLens oder einem TabletWhen the UWP app is running on phone, Xbox, HoloLens or tablet mode

Hinweise zur LesbarkeitLegibility considerations

Es muss sichergestellt werden, dass Texte, die in der App dargestellt werden, die Kontrastverhältnisse erfüllen.It’s important to ensure that any text your app presents to users meets contrast ratios. Wir haben die Acrylzusammensetzung optimiert, damit Texte in Schwarz oder Weiß mit hoher Farbauflösung oder in Mittelgrau auf Acryl die Kontrastverhältnisse erfüllen.We’ve optimized the acrylic recipe so that high-color black, white or even medium-color gray text meets contrast ratios on top of acrylic. Die von der Plattform bereitgestellten Designressourcen nehmen standardmäßig kontrastierende Färbungen mit 80 % Deckkraft an.The theme resources provided by the platform default to contrasting tint colors at 80% opacity. Beim Platzieren von Textkörper mit hoher Farbauflösung auf Acryl können Sie die Farbton-Deckkraft verringern und gleichzeitig die Lesbarkeit erhalten.When placing high-color body text on acrylic, you can reduce tint opacity while maintaining legibility. Im dunklen Modus kann die Farbton-Deckkraft 70 % betragen, während das Acryl im hellen Modus ein Kontrastverhältnis von 50 % Deckkraft erfüllt.In dark mode, tint opacity can be 70%, while light mode acrylic will meet contrast ratios at 50% opacity.

Es wird davon abgeraten, akzentfarbigen Text auf Ihren Acryloberflächen zu platzieren, da diese Kombinationen bei einem Schriftgrad von 15px wahrscheinlich nicht die Mindestanforderungen an das Kontrastverhältnis erfüllen.We don't recommend placing accent-colored text on your acrylic surfaces because these combinations are likely to not pass minimum contrast ratio requirements at 15px font size. Platzieren Sie möglichst keine Hyperlinks über Acrylelementen.Try to avoid placing hyperlinks over acrylic elements. Vergessen Sie darüber hinaus nicht die Auswirkungen auf die Lesbarkeit, wenn Sie den Acrylfarbton oder die Deckkraftstufe auf Werte außerhalb der von der Designressource bereitgestellten Plattformstandardeinstellungen einstellen möchten.Also, if you choose to customize the acrylic tint color or opacity level outside of the platform defaults provided by the theme resource, keep the impact on legibility in mind.

Acryl-DesignressourcenAcrylic theme resources

Mit der neuen Designressource „XAML AcrylicBrush“ oder der vordefinierten „AcrylicBrush“ können Sie Acryl ganz einfach auf die Oberflächen Ihrer App anwenden.You can easily apply acrylic to your app’s surfaces using the new XAML AcrylicBrush or predefined AcrylicBrush theme resources. Zunächst müssen Sie entscheiden, ob Sie In-App- oder Hintergrund-Acryl verwenden möchten.First, you’ll need to decide whether to use in-app or background acrylic. Prüfen Sie die zuvor in diesem Artikel beschriebenen allgemeinen App-Muster auf Empfehlungen.Be sure to review common app patterns described earlier in this article for recommendations.

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.We’ve created a collection of brush theme resources for both background and in-app acrylic types that respect the app’s theme and fall back to solid colors as needed. Ressourcen mit der Benennung AcrylicWindow stellen Hintergrund-Acryl dar, während sich AcrylicElement auf In-App-Acryl bezieht.Resources named AcrylicWindow represent background acrylic, while AcrylicElement refers to in-app acrylic.

RessourcenschlüsselResource key Farbton-DeckkraftTint opacity Fallbackfarbe Fallback color
SystemControlAcrylicWindowBrush, SystemControlAcrylicElementBrushSystemControlAcrylicWindowBrush, SystemControlAcrylicElementBrush
SystemControlChromeLowAcrylicWindowBrush, SystemControlChromeLowAcrylicElementBrushSystemControlChromeLowAcrylicWindowBrush, SystemControlChromeLowAcrylicElementBrush
SystemControlBaseHighAcrylicWindowBrush, SystemControlBaseHighAcrylicElementBrushSystemControlBaseHighAcrylicWindowBrush, SystemControlBaseHighAcrylicElementBrush
SystemControlBaseLowAcrylicWindowBrush, SystemControlBaseLowAcrylicElementBrushSystemControlBaseLowAcrylicWindowBrush, SystemControlBaseLowAcrylicElementBrush
SystemControlAltHighAcrylicWindowBrush, SystemControlAltHighAcrylicElementBrushSystemControlAltHighAcrylicWindowBrush, SystemControlAltHighAcrylicElementBrush
SystemControlAltLowAcrylicWindowBrush, SystemControlAltLowAcrylicElementBrushSystemControlAltLowAcrylicWindowBrush, SystemControlAltLowAcrylicElementBrush
80 %80% ChromeMediumChromeMedium
ChromeLowChromeLow

BaseHighBaseHigh

BaseLowBaseLow

AltHighAltHigh

AltLowAltLow
Empfohlene Verwendung: Hierbei handelt es sich um allgemeine Acrylressourcen, die sich in einer Vielzahl von Verwendungsarten gut einsetzen lassen.Recommended usage: These are general-purpose acrylic resources that work well in a wide variety of usages. Wenn Ihre App sekundären Text in der Farbe „AltMedium“ mit einer kleineren Textgröße als 18px verwendet, platzieren Sie eine Acrylressource von 80 % hinter dem Text, um die Anforderungen an das Kontrastverhältnis zu erfüllen.If your app uses secondary text of AltMedium color with text size smaller than 18px, place an 80% acrylic resource behind the text to meet contrast ratio requirements.
SystemControlAcrylicWindowMediumHighBrush, SystemControlAcrylicElementMediumHighBrushSystemControlAcrylicWindowMediumHighBrush, SystemControlAcrylicElementMediumHighBrush
SystemControlBaseHighAcrylicWindowMediumHighBrush, SystemControlBaseHighAcrylicElementMediumHighBrushSystemControlBaseHighAcrylicWindowMediumHighBrush, SystemControlBaseHighAcrylicElementMediumHighBrush
70 %70% ChromeMediumChromeMedium

BaseHighBaseHigh
Empfohlene Verwendung: Wenn Ihre App sekundären Text in der Farbe AltMedium mit einer Textgröße von 18px oder mehr verwendet, können Sie diese 70 % durchscheinenden Acrylressourcen hinter dem Text platzieren.Recommended usage: If your app uses secondary text of AltMedium color with a text size of 18px or larger, you can place these more translucent 70% acrylic resources behind the text. Wir empfehlen die Verwendung dieser Ressourcen in den oberen horizontalen Navigations- und Steuerungsbereichen in Ihrer App.We recommend using these resources in your app's top horizontal navigation and commanding areas.
SystemControlChromeHighAcrylicWindowMediumBrush, SystemControlChromeHighAcrylicElementMediumBrushSystemControlChromeHighAcrylicWindowMediumBrush, SystemControlChromeHighAcrylicElementMediumBrush
SystemControlChromeMediumAcrylicWindowMediumBrush, SystemControlChromeMediumAcrylicElementMediumBrushSystemControlChromeMediumAcrylicWindowMediumBrush, SystemControlChromeMediumAcrylicElementMediumBrush
SystemControlChromeMediumLowAcrylicWindowMediumBrush, SystemControlChromeMediumLowAcrylicElementMediumBrushSystemControlChromeMediumLowAcrylicWindowMediumBrush, SystemControlChromeMediumLowAcrylicElementMediumBrush
SystemControlBaseHighAcrylicWindowMediumBrush, SystemControlBaseHighAcrylicElementMediumBrushSystemControlBaseHighAcrylicWindowMediumBrush, SystemControlBaseHighAcrylicElementMediumBrush
SystemControlBaseMediumLowAcrylicWindowMediumBrush, SystemControlBaseMediumLowAcrylicElementMediumBrushSystemControlBaseMediumLowAcrylicWindowMediumBrush, SystemControlBaseMediumLowAcrylicElementMediumBrush
SystemControlAltMediumLowAcrylicWindowMediumBrush, SystemControlAltMediumLowAcrylicElementMediumBrushSystemControlAltMediumLowAcrylicWindowMediumBrush, SystemControlAltMediumLowAcrylicElementMediumBrush
60 %60% ChromeHighChromeHigh

ChromeMediumChromeMedium

ChromeMediumLowChromeMediumLow

BaseHighBaseHigh

BaseLowBaseLow

AltMediumLowAltMediumLow
Empfohlene Verwendung: Wenn nur primärer Text der Farbe AltHigh über Acryl platziert wird, kann Ihre App diese Ressourcen von 60 % verwenden.Recommended usage: When placing only primary text of AltHigh color over acrylic, your app can utilize these 60% resources. Es wird empfohlen, den vertikalen Navigationsbereich Ihrer App, d. h. das Hamburger-Menü, mit 60 % Acryl zu zeichnen.We recommend painting your app's vertical navigation pane, i.e. hamburger menu, with 60% acrylic.

Zusätzlich zu farbneutralem Acryl haben wir Ressourcen hinzugefügt, mit denen sich das Acryl mithilfe von benutzerdefinierten Akzentfarben färben lässt.In addition to color-neutral acrylic, we've also added resources that tint acrylic using the user-specified accent color. Wir empfehlen, farbiges Acryl sparsam zu verwenden.We recommend using colored acrylic sparingly. Platzieren Sie für die bereitgestellten Varianten „dark1“ und „dark2“ weißen bzw. hellfarbigen Text der Textfarbe des dunklen Designs entsprechend über diesen Ressourcen.For the dark1 and dark2 variants provided, place white or light-colored text consistent with dark theme text color over these resources.

RessourcenschlüsselResource key Farbton-DeckkraftTint opacity Farbton und Fallbackfarben Tint and Fallback colors
SystemControlAccentAcrylicWindowAccentMediumHighBrush, SystemControlAccentAcrylicElementAccentMediumHighBrushSystemControlAccentAcrylicWindowAccentMediumHighBrush, SystemControlAccentAcrylicElementAccentMediumHighBrush 70 %70% SystemAccentColorSystemAccentColor
SystemControlAccentDark1AcrylicWindowAccentDark1Brush, SystemControlAccentDark1AcrylicElementAccentDark1BrushSystemControlAccentDark1AcrylicWindowAccentDark1Brush, SystemControlAccentDark1AcrylicElementAccentDark1Brush 80 %80% SystemAccentColorDark1SystemAccentColorDark1
SystemControlAccentDark2AcrylicWindowAccentDark2MediumHighBrush, SystemControlAccentDark2AcrylicElementAccentDark2MediumHighBrushSystemControlAccentDark2AcrylicWindowAccentDark2MediumHighBrush, SystemControlAccentDark2AcrylicElementAccentDark2MediumHighBrush 70 %70% SystemAccentColorDark2SystemAccentColorDark2

Um eine bestimmte Oberfläche zu zeichnen, wenden Sie eines der oben genannten Designressourcen auf Elementhintergründe an. Verfahren Sie dabei genauso, wie Sie die anderen Pinselressourcen anwenden würden.To paint a specific surface, apply one of the above theme resources to element backgrounds just as you would apply any other brush resource.

<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">

Benutzerdefinierter AcrylpinselCustom acrylic brush

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.You may choose to add a color tint to your app’s acrylic to show branding or provide visual balance with other elements on the page. Um Farbe und keine Graustufen anzuzeigen, müssen Sie Ihre eigenen Acrylpinsel mithilfe der folgenden Eigenschaften definieren.To show color rather than greyscale, you’ll need to define your own acrylic brushes using the following properties.

  • TintColor: die Überlagerungsschicht der Farbe/des Farbtons.TintColor: the color/tint overlay layer. Sie sollten sowohl den RGB-Farbwert als auch die Deckkraft des Alphakanals angeben.Consider specifying both the RGB color value and alpha channel opacity.
  • TintOpacity: die Deckkraft der Farbtonschicht.TintOpacity: the opacity of the tint layer. Wir empfehlen 80 % Deckkraft als Ausgangspunkt, obwohl verschiedene Farben bei anderer Durchsichtigkeit möglicherweise ansprechender aussehen.We recommend 80% opacity as a starting point, although different colors may look more compelling at other translucencies.
  • TintLuminosityOpacity: steuert die Höhe der Sättigung, die zulässig ist, durch die Acryloberfläche des Hintergrunds.TintLuminosityOpacity: controls the amount of saturation that is allowed through the acrylic surface from the background.
  • BackgroundSource: die Kennzeichnung zum Festlegen, ob Sie Hintergrund- oder In-App Acryl verwenden möchten.BackgroundSource: the flag to specify whether you want background or in-app acrylic.
  • FallbackColor: die Volltonfarbe, durch die Acryl im Stromsparmodus ersetzt wird.FallbackColor: the solid color that replaces acrylic in Battery Saver. 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.For background acrylic, fallback color also replaces acrylic when your app isn’t in the active desktop window or when the app is running on phone and Xbox.

Acrylmuster für das helle Design

Acrylmuster für das dunkle Design

Deckkraft der Leuchtdichte im Vergleich zur Farbton-Deckkraft

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.To add an acrylic brush, define the three resources for dark, light and high contrast themes. Beachten Sie, dass wir bei hohem Kontrast die Verwendung eines „SolidColorBrush“ mit demselben X:Key wie für den dunklen/hellen AcrylicBrush empfehlen.Note that in high contrast, we recommend using a SolidColorBrush with the same x:Key as the dark/light AcrylicBrush.

Hinweis

Wenn Sie keinen „TintLuminosityOpacity“-Wert angeben, passt das System seinen Wert automatisch auf Grundlage Ihrer Werte für „TintColor“ und „TintOpacity“ an.If you don't specify a TintLuminosityOpacity value, the system will automatically adjust its value based on your TintColor and TintOpacity.

<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.The following sample shows how to declare AcrylicBrush in code. Wenn Ihre App mehrere Betriebssystemziele unterstützt, müssen Sie sicherstellen, dass diese API auf dem Gerät des Benutzers verfügbar ist.If your app supports multiple OS targets, be sure to check that this API is available on the user’s machine.

if (Windows.Foundation.Metadata.ApiInformation.IsTypePresent("Windows.UI.Xaml.Media.XamlCompositionBrushBase"))
{
    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 TitelleisteExtend acrylic into the title bar

Um Ihrem App-Fenster ein nahtloses Aussehen zu verleihen, können Sie im Acryl im Titelleistenbereich verwenden.To give your app's window a seamless look, you can use acrylic in the title bar area. In diesem Beispiel wird Acryl in die Titelleiste ausgedehnt, indem die ApplicationViewTitleBar der Eigenschaften des Objekts ButtonBackgroundColor und ButtonInactiveBackgroundColor auf Colors.Transparent festgelegt werden.This example extends acrylic into the title bar by setting the ApplicationViewTitleBar object's ButtonBackgroundColor and ButtonInactiveBackgroundColor properties to Colors.Transparent.

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.This code can be placed in your app's OnLaunched method (App.xaml.cs), after the call to Window.Activate, as shown here, or in your app's first page.

// 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.In addition, you'll need to draw your app's title, which normally appears automatically in the title bar, with a TextBlock using CaptionTextBlockStyle. Weitere Informationen finden Sie unter Anpassen der Titelleiste.For more info, see Title bar customization.

Empfohlene und nicht empfohlene VorgehensweisenDo's and don'ts

  • Verwenden Sie Acryl als Hintergrundmaterial von nicht primären App-Oberflächen wie Navigationsbereichen.Do use acrylic as the background material of non-primary app surfaces like navigation panes.
  • 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.Do extend acrylic to at least one edge of your app to provide a seamless experience by subtly blending with the app’s surroundings.
  • Platzieren Sie kein Desktop-Acryl auf großen Hintergrundoberflächen Ihrer-App – dies verletzt die eigentliche Absicht von Acryl, das primär für kurzlebige Oberflächen verwendet wird.Don't put desktop acrylic on large background surfaces of your app - this breaks the mental model of acrylic being used primarily for transient surfaces.
  • Platzieren Sie In-App- und Hintergrund-Acryl nicht direkt nebeneinander, um visuelle Spannung an den Rändern zu vermeiden.Don’t place in-app and background acrylics directly adjacent to avoid visual tension at the seams.
  • Platzieren Sie nicht mehrere Acrylbereiche mit demselben Farbton und derselben Deckkraft nebeneinander, da dies einen unerwünschten, sichtbaren Rand erzeugt.Don't place multiple acrylic panes with the same tint and opacity next to each other because this results in an undesirable visible seam.
  • Platzieren Sie keinen akzentfarbigen Text über Acryloberflächen.Don’t place accent-colored text over acrylic surfaces.

Unser Ansatz beim Entwurf von AcrylHow we designed acrylic

Wir haben die Hauptkomponenten von Acryl optimiert, um seine individuelle Darstellung und einzigartigen Eigenschaften zu erhalten.We fine-tuned acrylic’s key components to arrive at its unique appearance and properties. Wir haben damit begonnen, flachen Oberflächen mithilfe von Durchsichtigkeit, Weichzeichnung und Rauschen visuelle Tiefe und Dimension hinzuzufügen.We started with translucency, blur and noise to add visual depth and dimension to flat surfaces. Dann haben wir eine Ausschluss-Mischmodus-Ebene hinzugefügt, um den Kontrast und die Lesbarkeit der auf dem Acrylhintergrund platzierten UI sicherzustellen.We added an exclusion blend mode layer to ensure contrast and legibility of UI placed on an acrylic background. Zuletzt haben wir Farbtöne hinzugefügt, um Personalisierungen zu ermöglichen.Finally, we added color tint for personalization opportunities. Zusammen ergeben diese Ebenen ein neues, einsatzbereites Material.In concert these layers add up to a fresh, usable material.

Acrylzusammensetzung Acrylic recipe
Das Acryl setzt sich folgendermaßen zusammen: Hintergrund, Weichzeichnung, Ausschluss-Mischung, Überlagerung der Farbe/des Farbtons, RauschenThe acrylic recipe: background, blur, exclusion blend, color/tint overlay, noise

Beispielcode herunterladenGet the sample code

Reveal HighlightReveal highlight