What are the uses of acrylic rendering

Acrylic material

  • 9 minutes to read

Acrylic is a type of brush that creates a translucent texture. You can apply acrylic to app surfaces to add depth and create a visual hierarchy.

Important APIs:AcrylicBrush class, Background property

Acrylic in a light design

Acrylic in a dark design

Acrylic and the Fluent Design System

With the Fluent Design System, you create modern surfaces that incorporate light, depth, movement, material and scaling options. Acrylic is a component of the Fluent Design System that adds physical texture (material) and depth to your app. For more information, see the Fluent Design overview.

Video summary

Examples

Acrylic mixes

The most striking property of acrylic is its transparency. There are two acrylic blends that affect what content is visible through the material:

  • Background acrylic shows the desktop background and other windows behind the currently active app. It adds depth between application windows while applying the user's personalization settings.
  • In-app acrylic adds depth within the app frame, creating both focus and hierarchy.

Use caution when layering multiple acrylic surfaces: multiple layers of background acrylic can create distracting optical illusions.

When should acrylic be used?

  • Use in-app acrylic to support the user interface, e.g. B. on surfaces that can overlap content while scrolling or interacting with them.
  • Use background acrylic for ephemeral UI elements like context menus, flyouts, and easily collapsible UI elements.
    Using acrylic in ephemeral scenarios helps maintain a visual relationship with the content that triggered the ephemeral UI element.

When using in-app acrylic on navigation surfaces, consider expanding the content below the acrylic area to improve the flow of your app. "NavigationView" does this for you automatically. To avoid a banding effect, try not to place multiple acrylic panels edge to edge as this can create an unwanted edge between the two blurred surfaces. Acrylic is a tool used to create visual harmony in your designs, but if used incorrectly, it can result in visual glitches.

Consider the following usage patterns to help you decide how best to incorporate acrylic into your app:

Vertical areas

For vertical areas or surfaces that help separate your app's content, we recommend that you use a non-transparent background instead of acrylic. When your vertical areas open on or in front of content, as in the modes Compact or Minimal from NavigationView, you should use in-app acrylic to keep the context of the page when the user has that area open.

Short-lived surfaces

For apps with menu flyouts, non-modal popups or areas that can be easily hidden, we recommend using background acrylic.

Many of our controls use acrylic by default. MenuFlyouts, AutoSuggestBox, ComboBox, and similar controls with easy-to-collapse popups all use the ephemeral acrylic when called.

Note

Rendering acrylic surfaces is GPU intensive, which can increase the power consumption of the device and reduce battery life. Acrylic effects are automatically turned off when devices are put into sleep mode, and users can choose to turn acrylic effects off for all apps.

Ease of use and adaptability

Acrylic automatically adapts its representation to a variety of devices and contexts.

In high contrast mode, users will still see the familiar background color of their choice instead of acrylic. Additionally, both the background and in-app acrylic will show up as solid colors in the following cases:

  • If the transparency is deactivated in "Settings"> "Personalization"> "Color"
  • When the power saving mode is active
  • When running the app on low-end hardware

In addition, the transparency and texture of the background acrylic are only replaced by a solid color in the following cases:

  • When deactivating an app window on the desktop
  • When running the Windows app on a phone, Xbox, HoloLens, or tablet

Notes on readability

It must be ensured that texts that are displayed in the app meet the contrast ratios (see requirements for accessible text). We have optimized the acrylic composition so that texts in black or white with high color resolution or in medium gray on acrylic meet the contrast ratios. The design resources provided by the platform take on contrasting tints with 80% opacity by default. When placing high-resolution body text on acrylic, you can lower the hue opacity while maintaining legibility. In the dark mode, the hue opacity can be 70%, while in the light mode the acrylic meets a contrast ratio of 50% opacity.

It is not recommended to place accent colored text on your acrylic surfaces, as these combinations are unlikely to meet the minimum contrast ratio requirements with a font size of 15px. Avoid placing hyperlinks over acrylic elements if possible. Additionally, if you want to set the acrylic hue or opacity level to values ​​outside of the platform defaults provided by the design resource, don't forget about the legibility implications.

Acrylic design resources

With the new design resource "XAML AcrylicBrush" or the predefined "AcrylicBrush" you can easily apply acrylic to the surfaces of your app. First of all, you need to decide whether you want to use in-app or background acrylic. Review the generic app patterns described earlier in this article for recommendations.

We've created a collection of brush design resources for both background and in-app acrylics that take the app's design into account and revert to using solid colors as needed. Resources with the naming AcrylicWindow represent background acrylic while standing AcrylicElement refers to in-app acrylic.

Resource keyHue opacityFallback color
SystemControlAcrylicWindowBrush, SystemControlAcrylicElementBrush
SystemControlChromeLowAcrylicWindowBrush, SystemControlChromeLowAcrylicElementBrush
SystemControlBaseHighAcrylicWindowBrush, SystemControlBaseHighAcrylicElementBrush
SystemControlBaseLowAcrylicWindowBrush, SystemControlBaseLowAcrylicElementBrush
SystemControlAltHighAcrylicWindowBrush, SystemControlAltHighAcrylicElementBrush
SystemControlAltLowAcrylicWindowBrush, SystemControlAltLowAcrylicElementBrush
80 % ChromeMedium
ChromeLow

BaseHigh

BaseLow

AltHigh

AltLow
Recommended use: These are general acrylic resources that work well in a variety of uses. If your app uses AltMedium secondary text with a text size smaller than 18px, place an 80% acrylic resource behind the text to meet the contrast ratio requirements.
SystemControlAcrylicWindowMediumHighBrush, SystemControlAcrylicElementMediumHighBrush
SystemControlBaseHighAcrylicWindowMediumHighBrush, SystemControlBaseHighAcrylicElementMediumHighBrush
70 % ChromeMedium

BaseHigh
Recommended use: If your app uses AltMedium color secondary text with a text size of 18px or more, you can place these 70% translucent acrylic resources behind the text. We recommend using these resources in the top horizontal navigation and control areas in your app.
SystemControlChromeHighAcrylicWindowMediumBrush, SystemControlChromeHighAcrylicElementMediumBrush
SystemControlChromeMediumAcrylicWindowMediumBrush, SystemControlChromeMediumAcrylicElementMediumBrush
SystemControlChromeMediumLowAcrylicWindowMediumBrush, SystemControlChromeMediumLowAcrylicElementMediumBrush
SystemControlBaseHighAcrylicWindowMediumBrush, SystemControlBaseHighAcrylicElementMediumBrush
SystemControlBaseMediumLowAcrylicWindowMediumBrush, SystemControlBaseMediumLowAcrylicElementMediumBrush
SystemControlAltMediumLowAcrylicWindowMediumBrush, SystemControlAltMediumLowAcrylicElementMediumBrush
60 % ChromeHigh

ChromeMedium

ChromeMediumLow

BaseHigh

BaseLow

AltMediumLow
Recommended use: Placing only AltHigh color primary text over acrylic will allow your app to use these 60% resources. It is recommended to use the vertical navigation area of ​​your app; H. the hamburger menu, drawing with 60% acrylic.

In addition to color neutral acrylic, we've added resources that can be used to color the acrylic using custom accent colors. We recommend using colored acrylic sparingly. For the provided variants "dark1" and "dark2", place white or light-colored text corresponding to the text color of the dark design above these resources.

Resource keyHue opacityShade and fallback colors
SystemControlAccentAcrylicWindowAccentMediumHighBrush, SystemControlAccentAcrylicElementAccentMediumHighBrush 70 % SystemAccentColor
SystemControlAccentDark1AcrylicWindowAccentDark1Brush, SystemControlAccentDark1AcrylicElementAccentDark1Brush 80 % SystemAccentColorDark1
SystemControlAccentDark2AcrylicWindowAccentDark2MediumHighBrush, SystemControlAccentDark2AcrylicElementAccentDark2MediumHighBrush 70 % SystemAccentColorDark2

To draw a specific surface, apply one of the above design resources to element backgrounds. Do this in exactly the same way as you would apply the other brush resources.

Custom acrylic brush

You can add a hue to your app's acrylic to show branding or create a visual balance with other elements on the page. To display color rather than grayscale, you'll need to define your own acrylic brushes using the following properties.

  • TintColor: the overlay of the color / hue. You should specify both the RGB color value and the opacity of the alpha channel.
  • TintOpacity: the opacity of the hue layer. We recommend 80% opacity as a starting point, although different colors may look more appealing with different transparency.
  • TintLuminosityOpacity: controls the amount of saturation allowed by the acrylic surface of the background.
  • BackgroundSource: the identifier for specifying whether you want to use background or in-app acrylic.
  • FallbackColor: the solid color that replaces acrylic in low power mode. In the case of background acrylic, the fallback color will also replace the acrylic if your app is not in the active desktop window or if the app is running on the phone or Xbox.

To add an acrylic brush, define the resources for the dark and light design and for the high contrast design. Note that we recommend using a “SolidColorBrush” with the same X: Key as for the dark / light AcrylicBrush for high contrast.

Note

If you don't specify a “TintLuminosityOpacity” value, the system will automatically adjust its value based on your “TintColor” and “TintOpacity” values.

The following example shows how to declare AcrylicBrush in code. If your app supports multiple operating system targets, you need to ensure that this API is available on the user's device.

Stretching acrylic into the title bar

To give your app window a seamless look, you can use acrylic in the title bar area. This example extends acrylic into the title bar by setting the ApplicationViewTitleBar of the ButtonBackgroundColor and ButtonInactiveBackgroundColor object properties to Colors.Transparent.

This code can be inserted into the OnLaunched method of your app (App.xaml.cs), after calling Window.Activate as shown here, or on the first page of your app.

In addition, you need to draw the title of the app, which usually appears automatically in the title bar, with a TextBlock that uses. For more information, see Customizing the Title Bar.

Recommended and non-recommended practices

  • Use acrylic as the background material on non-primary app surfaces such as navigation areas.
  • Extend the acrylic to at least one edge of the app to create a seamless surface by blending it gently with the app's surroundings.
  • Do not place desktop acrylic on large background surfaces of your app - this violates the very purpose of acrylic, which is primarily used for short-lived surfaces.
  • Avoid placing the in-app and background acrylic side by side to avoid visual tension around the edges.
  • Avoid placing multiple acrylic areas of the same shade and opacity side by side, as this will create an unwanted, visible border.
  • Do not place accent colored text over acrylic surfaces.

Our approach to acrylic design

We have optimized the main components of acrylic to preserve its individual appearance and unique properties. We started adding visual depth and dimension to flat surfaces using transparency, soft focus, and noise. Then we added an Exclusion Blend Mode layer to ensure the contrast and legibility of the UI placed on the acrylic background. Lastly, we added color tones to allow for customization. Together, these levels create a new, ready-to-use material.


The acrylic is composed as follows: background, soft focus, exclusion mixture, overlay of color / shade, noise

Download sample code

Related articles

Fluent design overview