Как изменить прозрачность акрилового материала

Question

Я пытаюсь узнать кое-что о UWP с помощью примера, который я загрузил с GitHub (я совершенно не разбираюсь в UWP и знаю, что было бы лучше прочитать книгу для начинающих). В этом примере на левой панели используется Background="{ThemeResource ApplicationPageBackgroundThemeBrush} ", а правая панель использует Background="#7F000000"

В правой панели я понял, как изменить цвет и процент прозрачности. Но я не понял, как это сделать на левой панели.

РЕДАКТИРОВАТЬ: и почему у верхнего левого края есть белые пиксельные артефакты?

      <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>

Образец изображения

Answer 1

Я попробовал ваш код, но он показывает совершенно другое поведение. Левая панель показывает акриловый эффект, а правая часть не имеет акрилового эффекта. Я предполагаю, что это привело к тому, что я использую часть кода в вашем образце.

Поскольку вы пытаетесь понять, как использовать и модифицировать акриловый материал, я хотел бы предложить еще одно предложение для вашего сценария. Чтобы понять, как использовать акриловый эффект, вы можете взглянуть на официальный документ: Акриловый материал вместо сторонней библиотеки. Официальный документ знакомит с типом акрила, как его использовать и как он выглядит. Есть также фрагменты кода, которые легко понять и протестировать. Например, показано, как настроить акриловую кисть по собственному желанию.