How to use Acrylic Accent in Windows 10 Creators Update?

CREATOR UPDATE XAML You need to use a component that you put on the background of your app, let’s say a RelativePanel <RelativePanel Grid.Column=”0″ Grid.ColumnSpan=”2″ MinWidth=”40″ x:Name=”MainGrid” SizeChanged=”Page_SizeChanged”/> <RelativePanel Grid.Column=”0″ Width=”{Binding ElementName=MainGrid,Path=Width}” Background=”#28000000″/> <Grid> <!–Having content here, for example textblock and so on–> </Grid> The second RelativePanel is used to set the shadow color above … Read more

CSS-only Acrylic Material from Fluent Design System

EDIT: 2022-05-07 Made backdrop-filter the first option with much better browser support now. I can think of two ways to do this… backdrop-filter on .acrylic for modern browsers Blurred bg on .acrylic for all (including legacy) browsers 1. backdrop-filter on .acrylic (Modern browsers) main { display: flex; align-items: center; justify-content: center; height: 100vh; } .acrylic … Read more

tech