问题标签 [fluent-design]

我找不到任何使用 Acrylic Accent ( CreateBackdropBrush ) 的详细文档。我在 StackOverflow 中找到了一篇文章，它有些用处，但对入门没有帮助。所以请为这篇文章创建一个详细的答案，以便每个人都可以学习。

更新：

微软已发布官方亚克力材质文档

笔记：

如果有人不知道亚克力口音。Acrylic Accent 是 Windows 10 Creators Update 中的新功能，可让应用背景变得模糊和透明。

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

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

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

正如微软最近发布了一个名为“Fluent Design”的设计系统，是否适合将其应用到网页设计中？

我的大部分搜索都是针对所有 Microsoft 平台、C# 应用程序、F# 等。我从未见过任何有关网页设计的内容。

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

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

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

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

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

更新

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

如何使用 CSS 或其他工具创建 Microsoft Fluent Design 透明度？我喜欢这种设计语言，并想在我的网页中添加一些元素。

关注此帖子后：如何在 Windows 10 Creators Update 中使用 Acrylic Accent？

我已经在创作者更新上成功地将亚克力添加到我的应用程序中。不幸的是，当在 Windows 的颜色设置中禁用透明度时，我的应用程序的背景在浅色主题中是非常深的灰色，或者在深色主题中几乎完全是黑色，尽管我将网格的背景设置在相关面板上方使窗口对以下内容透明：Background="{ThemeResource CommandBarBackground}"。

有谁知道如何在创建者更新中实现后备颜色，以便在禁用透明度时，背景切换到设置的原始背景颜色。

我有一个 UWP 应用程序（在 Windows 应用商店中发布），并且我的应用程序具有“正常”设计，我喜欢为 Fluent Design System 更新我的应用程序。但我想在我的应用程序的设置中添加一个选项，以便用户可以选择他想要流畅的设计系统（丙烯酸和透明效果）还是普通/传统设计。有可能的？如果是这样，我该怎么做？我已经尝试寻找解决方案，但我找不到任何东西

我想尽可能在​​我的自定义控件中使用流畅的设计，并且仍然支持旧系统。我该怎么做呢？这需要我更改现有的 XAML 文件，并且当我这样做时，它不会在旧版本的 Windows 中运行。

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

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

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

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

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

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

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

我发现这个来自 Fluent Design System 的 Post CSS-only Acrylic Material很棒，但它有一个大问题。当我尝试使用多于一个background image时，它不再起作用，因为需要以下代码：

但我想为页面部分使用不同的背景图像：

我需要能够在页面上的任何地方使用亚克力材质效果，如下所示：

所以我需要亚克力表面作为一个通用的设计组件，不受原帖的限制。如果有人知道该怎么做，我将非常感谢任何帮助。谢谢（对不起，我写得不好——我不是母语人士，所以我希望你能理解我写的一切：））