问题标签 [acrylic-material]

微软最近公布了他们新的“流利”设计语言，其中一部分是“亚克力”材料。此效果使元素透明并模糊背景。它既可以应用于窗口，使底层窗口的一部分发光（背景丙烯酸），也可以应用于窗口中的单个元素，以便其他控件发光（应用内丙烯酸）。它在概念上和视觉上与 macOS 上的活力非常相似。

它在 XAML 中作为特殊的 Brush 实现，但我想知道有没有办法在常规 Win32 应用程序中使用它（背景丙烯酸）？该效果看起来与应用于开始菜单和任务栏（由SetWindowCompositionAttribute处理）的模糊非常相似，这让我相信它可能可以通过类似的标志激活。

一个子问题：我想知道它是如何实现的？它只是您可以在窗口上设置的标志，然后在 DWM 中应用（如 SetWindowCompositionAttribute，或如 Vista 和 7 中的 Aero Glass）？还是 UWP 对 DWM 有某种控制，并且可以设置着色器来控制它的渲染方式？在 Vista 下，当 DWM 第一次被引入时，它与 WPF 有共同的代码，并且它实际上共享（类似 DirectX 的）缓冲区和场景图，所以这样的技巧是可能的。magifier 实用程序可以像矢量图像一样清晰地放大 WPF 应用程序，但该功能后来丢失了。MS 在该页面上呈现“丙烯酸”的方式（作为不同的图层，并作为 XAML 画笔实现）让我认为您必须以某种方式将图层注入 DWM 场景图中，这将使其更难或无法使用来自 Win32。

随着 Microsoft Fluent Design System的出现以及新的 Acrylic Material 在 Windows 生态系统中的传播，我认为在某些 Web 布局中使用它会很棒。

根据规范，亚克力层的组成为：

所以我尝试了一种受该图片中图层启发的纯 CSS 方法，这样：

结果非常接近规范并且响应也很灵敏，但有一个大问题：只需堆叠另一个.acrylicdiv 并且后台技巧不再起作用。

问题是： 有没有更聪明的方法来高斯模糊而不为每个孩子复制身体背景？或者也许是一些更聪明的方法来动态计算它的位置？

更新

由于backdrop-filterCSS 功能终于在 7 月 29 日在 Chrome 76中发布，我们有一个非常简化的方法来解决它，使原来的问题比以前容易得多。

我想使用丙烯酸刷子绘制堆栈面板表面。

它对我有用，但是当我想更改色调颜色和不透明度时会出现问题。有以下代码可以更改它：

我不知道我应该把它放在哪里并为此重命名画笔？

感谢帮助。PS 你需要 Windows Insider SDK 和系统版本 16190 或更高版本

根据微软的文档，

Acrylic 会自动调整其外观以适应各种设备和环境。

在高对比度模式下，用户继续看到他们选择的熟悉的背景颜色，而不是丙烯酸。此外，背景亚克力和应用内亚克力均显示为纯色

此外，只有背景亚克力会用纯色替换其透明度和纹理

我有两个关于亚克力刷的疑问。

1）是否可以检测到低端设备何时禁用丙烯酸刷？

2)是否有用户订阅启用/禁用丙烯酸刷的任何事件？因为有一个设置可用于在所有应用程序中切换丙烯酸笔刷。

PS：我没有尝试使用后备颜色。

我有一个 UWP 应用程序，我想将它升级到流利的设计系统。我使用 Windows Template Studio 创建了一个新项目，我的导航是使用 Pivot 进行的。

现在我想把亚克力背景放在pivot 的标题上。正如 uwp 的设计指南中所述，建议在这种情况下使用 70% 的丙烯酸。

所以我尝试使用 70% 的丙烯酸和以下代码。

其中 MainPivot 是我正在使用的枢轴，这个加载的方法是该枢轴的加载事件。

问题是它仅适用于浅色或深色主题（取决于在应用程序的上次运行期间设置的主题），但是当应用程序运行并且我更改主题并在浅色或深色主题之间切换时，它无法正常工作对于这两个主题，例如，如果我使主题变暗，丙烯酸颜色仍然是白色，并且枢轴标题文本也是白色，因此会产生混乱的 UI。

此外，FallBack Color也没有任何意义，因为浅色主题的后备颜色是黑色（与黑色文本混合），并且在深色主题中也会出现同样的问题。

我之所以从后面的代码中执行此操作，是因为我的应用程序的最小项目目标是没有丙烯酸刷的创作者更新。

如何将丙烯酸材料应用于TitleBarUWP 中的唯一（就像 Microsoft Edge）。在像枢轴这样的场景中。您使用将视图扩展到标题栏。但是如果它只是一个普通的单页应用程序，你想把标题栏做成亚克力怎么办？

我正在创建一个 XamarinFroms 解决方案，并且我想在我的 UWP 应用程序中实现 Fluent Design 或部分它。您可能知道，大多数 Fluent Design 构建块都是 ThemeResources。所以我试着做：

但我得到了一个意外

如果我无法在我的 UWP 项目的代码中检索这些主题资源，我将无法访问任何预定义的画笔，或者我永远无法实现显示样式

我正在尝试为效果所附加的控件应用背景。

首先，我制作了为 UWP 中具有填充或背景属性的控件应用背景的效果。但问题是很多控件在 UWP 中呈现给 FrameworkElement。并且 FrameworkElement 没有 Background 属性。在 VisualElementRenderer Xamarin 表单中，解决了在内容后面应用背景层的问题，但这是一种效果。有什么方法可以为附加的效果应用背景吗？我正在应用 AcrylicBrush 所以它必须直接分配给控件。

我之前写的代码：

我正在研究 UWP 的亚克力选项并遇到了一个奇怪的问题。本质上，我试图让导航视图使用自定义亚克力画笔。但是，主窗口背景比 Navigationview 更透明。我需要让 NavigationView 与当前主视图一样透明。我附上了一张图片来帮助澄清这一点。很难解释：

正如您在左侧看到的，导航视图不像右侧的主要功能窗口那样透明。我需要交换它，以便 NavigationView 比 MainPage 更透明。

这是我的 App.XAML

这是我的 MainPage.XAML

先感谢您。

如何将特定图像设置为 Fluent DesignAcrylicBackgroundSource以在 PIP 模式 ( CompactOverlay) 中使用，例如 Groove Music PIP 功能