WinUI3开发_Acrylic（亚巧克力效果）

原创已于 2025-07-13 21:59:00 修改 · 533 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#WinUI3 #Acrylic

于 2025-06-19 14:39:25 首次发布

Windows_核心编程专栏收录该内容

92 篇文章

订阅专栏

什么是Acrylic？

Acrylic中文翻译是丙烯酸，也叫亚巧克力，是一种半透明模糊效果，也就是毛玻璃效果，这个命名取自真实的材料丙烯酸，该材料有良好的透明度，并且呈现的是一种半透明效果，常用在玻璃上，后来在UI设计上实现了这一种效果，所以命名也以Acrylic来命名。
在这里插入图片描述

如何在WinUI3中使用它？

在WinUI3中对Acrylic的自定义支持较少，因为WinUI3的理念是Fluent Design设计体系，一切都应跟随系统主题，当你在你的应用程序中使用了Acrylic时，它的透明程度、颜色都跟随系统主题，而使用它也非常简单，只需要创建一个DesktopAcrylicBackdrop然后将它设置到SystemBackdrop就可以了。
首先包含头文件与去除名字空间：

#include <winrt/impl\Microsoft.UI.Xaml.Media.2.h>
using namespace winrt::Microsoft::UI::Xaml::Media;

然后实例类并用SystemBackdrop设置样式

DesktopAcrylicBackdrop acrylic = DesktopAcrylicBackdrop();
this->SystemBackdrop(acrylic);
// 将窗口内容主题扩展到标题栏
this->ExtendsContentIntoTitleBar(true);

如果是XAML可以使用Window.SystemBackdrop元素在里面设置DesktopAcrylicBackdrop属性：

<Window.SystemBackdrop>
	<DesktopAcrylicBackdrop/>
</Window.SystemBackdrop>

运行效果（深色主题）：
在这里插入图片描述
把主题调整为浅色，应用程序会跟随系统主题自适应改变：

这就是Fluent Design设计哲学之一，在深色时它的透明颜色是偏黑色，在浅色时它的透明颜色偏白色，它的透明颜色和透明的是无法通过代码来调节的（除非你自定义），如果要调节只能通过Windows的设置->个性化里来调整系统主题，WinUI3会自动跟随变化，Fluent Design的理念就是设计出来的程序就像是Windows自带的应用一样，完全统一。
如果在Windows里将这个半透明效果关掉那么Acrylic就没有任何效果了
在这里插入图片描述