Adding Fluent Design Acrylic Material to UWP via Xamarin.Forms.

At Build Microsoft made a big deal out of the new Fluent Design that they’re encouraging developers to start taking advantage of. Out of the box it’s a little harder to take advantage of these features but using BuildIt.Forms it’s easy to start using acrylic material resources. Let’s extend the example I’ve covered in the last couple of posts (Visual States in Xamarin.Forms using BuildIt.Forms and Xamarin.Forms Visual States with View Models). I’ve added a Grid, that will span the whole page (the StackLayout was positioned to keep all the elements in the centre of the page) and included the BackgroundEffect to set the background of the whole page.

<Grid>
     <Grid.Effects>
         <ctrls:BackgroundEffect Resource=”SystemControlAcrylicWindowBrush” />
     </Grid.Effects>
     <StackLayout VerticalOptions=”Center”
                     HorizontalOptions=”Center”>

        <Label x_Name=”WelcomeText”
                 Text=”{Binding WelcomeText}” />
         <StackLayout Orientation=”Horizontal”>
             <Button Text=”Show”
                     Clicked=”ShowClicked” />
             <Button Text=”Hide”
                     Clicked=”HideClicked” />
         </StackLayout>
     </StackLayout>

</Grid>

The Resource attribute defines the UWP brush resource that will be used as the background. In this case the SystemControlAcrylicWindowBrush is one of the build in arcylic brushes. As you can see the page appears as translucent, allowing what’s behind the app to taint the background of the app.

It’s also possible to use a custom acrylic resource, defined in the App.xaml of the UWP application

<Application
     x_Class=”FormsWithStates.UWP.App”
     “>“
     “>“
    
     RequestedTheme=”Light”>
     <Application.Resources>
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
                 <ResourceDictionary x_Key=”Default”>
                    <AcrylicBrush x_Key=”MyAcrylicBrush”
                                   BackgroundSource=”HostBackdrop”
                                   TintColor=”#FFFF0000″
                                   TintOpacity=”0.4″
                                   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.4″
                                   FallbackColor=”#FFFF7F7F” />
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
         </ResourceDictionary>
     </Application.Resources>
</Application>