How to modify the transparency of acrylic material

Question

I'm trying to learn a few things about UWP through an example I downloaded from GitHub (I am totally amateur about UWP and I know it would be best to read a book for beginners) In the example the left pane uses Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" and the right panel uses Background="#7F000000"

In the right panel, I understood how to change the color and the percentage of transparency. But I didn't understand how to do this on the left panel.

EDIT: and why does the top left edge have white pixelated artifacts?

<Page
x:Class="AcrylicControls.Example.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:resources="using:AcrylicControls.Example.Resources"
mc:Ignorable="d" d:DesignWidth="600">
<Page.Resources>
    <resources:Lorem x:Key="Lorem"/>

    <DataTemplate x:Key="ExampleListViewItem"
                  x:DataType="x:String">
        <TextBlock Text="{Binding}"
                   ToolTipService.ToolTip="This item does nothing"/>
    </DataTemplate>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <RelativePanel x:Name="AcrylicBackground" 
                   Grid.Column="0" 
                   Grid.ColumnSpan="2"
                   MinWidth="40" 
                   SizeChanged="Page_SizeChanged"/>
    <Grid Column="0"
          Width="{Binding Width, ElementName=AcrylicBackground}"
          Background="{StaticResource SystemControlAcrylicWindowBrush}">
        <ListView Width="150" 
                  ItemTemplate="{StaticResource ExampleListViewItem}">
            <x:String>Item 1</x:String>
            <x:String>Item 2</x:String>
            <x:String>Item 3</x:String>
            <x:String>Item 4</x:String>
            <x:String>Test</x:String>
        </ListView>
    </Grid>
    
    <Grid Column="1"
          Background="#7F000000">
        <Pivot Title="I'm sample content. Look at me!">
            <PivotItem Header="Lorem Ipsum">
                <TextBlock Text="{Binding Source={StaticResource Lorem}, Path=Ipsum}"
                           TextWrapping="Wrap"/>
            </PivotItem>
            <PivotItem Header="BlurryControls">
                <WebView Source="https://github.com/ConfusedHorse/BlurryControls"/>
            </PivotItem>
        </Pivot>
    </Grid>
</Grid>

Sample Picture

score 0 · Answer 1 · answered Dec 24 '21 at 01:57

I tried your code but it shows totally different behavior. The left panel shows the acrylic effect and the right part doesn't have an acrylic effect. I guess it caused I'm using part of the code in your sample.

Since you are trying to understand how to use and modify the acrylic material, so I'd like to offer another suggestion for your scenario. To understand how to use the acrylic effect, you could take a look at the official document: Acrylic material instead of the third-party library. The official document introduces the type of acrylic, how to use acrylic and what it looks like. There are also code snippets that are easy to understand and test. For example, it shows how to custom acrylic brush on your own request.

Thanks Roy. I tried to upvote you but as my account is a new one so a receive this popup message "Thanks for the feedback! You need at least 15 reputation to cast a vote, but your feedback has been recorded." — Sarcastic Bender, Dec 24 '21 at 11:04

How to modify the transparency of acrylic material

1 Answers1