WinUI3_给控件添加Acrylic效果-优快云博客

简介

关于Acrylic的简介可以参考我的这篇文章：WinUI3开发_Acrylic（亚巧克力效果）
这篇文章主要说如何使用SystemBackdrop设置Acrylic样式，本篇文章主要介绍如何在窗口里创建Acrylic样式的控件。

如何使用它？

本文示例是在Image控件上面增加Acrylic效果，首先定义一个Image控件：

<Grid Width="400" Height="300" Margin="0, 0, 0, 40">
    <Image VerticalAlignment="Top" Source="C:\\Users\\stephen\\Downloads\\test.jpg" Stretch="UniformToFill" />
</Grid>

运行示例：
在这里插入图片描述
WinUI3为我们提供了一些Acrylic默认的主题样式，例如AcrylicInAppFillColorDefaultBrush就是常用在Fill上面的

 <Rectangle Fill="{ThemeResource AcrylicInAppFillColorDefaultBrush}" />

运行效果：
在这里插入图片描述
这样图片上面就附加了一层半透明黑色并且模糊的Rectangle，如果不想使用WinUI3提供的默认的，也可以自己通过Resource来自定义Acrylic效果，例如透明度、背景颜色、无效时（也就是系统关闭Acrylice效果时）颜色。

<Grid.Resources>
    <ResourceDictionary x:Key="Default">
        <media:AcrylicBrush x:Key="CustomAcrylicBrush"
    TintOpacity="0" TintColor="#FF000000" FallbackColor="#FF008000" />
    </ResourceDictionary>
</Grid.Resources>

在使用AcrylicBrus之前需要在xml里将它声明出来，它属于Microsoft.UI.Xaml.Media里的功能：

xmlns:media="using:Microsoft.UI.Xaml.Media

下面解释一下AcrylicBrush的几个属性：
TintColor：颜色
TintOpacity：颜色透明度
FallbackColor：无效时颜色
AlwaysUseFallback：强制使用无效颜色，即使系统支持Acrylic
注意模糊程度是无法修改的，这是系统自带的属性。
上面是常用的属性，还有一个TintLuminosityOpacity，是用于控制背景穿透透明度的，下面会介绍它。
以下是使用该自定义Acrylic主题后的运行效果：
在这里插入图片描述
由于TintOpacity设置为0，所以只有模糊，下面是将它设置为1可以看到模糊但还是有点透明，这是因为TintOpacity设置的是颜色透明度，如果想设置背景透明度也就是穿透度，可以使用TintLuminosityOpacity参数来配置
在这里插入图片描述
下图是将1TintLuminosityOpacity1设置为1的效果，可以看到已经显示为纯TintColor色了。