7

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

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

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

4

4 回答 4

10

Sciter 4.2增加了对丙烯酸背景的支持（在 Windows 和 MacOS 上）：

Sciter 中的亚克力主题和类似 UWP 的控件（CSS 样式）：

Sciter 中的亚克力主题和类似 UWP 的控件

uSciter 演示浏览器，Windows：

uSciter 演示浏览器，Windows

uSciter 演示浏览器，MacOS：

uSciter 演示浏览器，MacOS

Windows 上的 Sciter 是一个普通的 Win32 应用程序（不是 UWP）。

为了呈现该模糊，它执行以下操作：

创建带有WS_EX_NOREDIRECTIONBITMAPex 标志的窗口。

来电：

struct WINDOWCOMPOSITIONATTRIBDATA {
  WINDOWCOMPOSITIONATTRIB dwAttrib;
  PVOID                   pvData;
  SIZE_T                  cbData;
};

enum ACCENT_STATE {
  ACCENT_DISABLED = 0,
  ACCENT_ENABLE_GRADIENT = 1,
  ACCENT_ENABLE_TRANSPARENTGRADIENT = 2,
  ACCENT_ENABLE_BLURBEHIND = 3,
  ACCENT_ENABLE_ACRYLIC_BLURBEHIND = 4,
  ACCENT_INVALID_STATE = 5
};

ACCENT_POLICY accent = { ACCENT_ENABLE_ACRYLIC_BLURBEHIND, 0, clr, 0 };
WINDOWCOMPOSITIONATTRIBDATA data;
data.dwAttrib = WCA_ACCENT_POLICY;
data.pvData = &accent;
data.cbData = sizeof(accent);
SetWindowCompositionAttribute(get_hwnd(), &data);

其中 clr 是 AGBR，类似于0xCC000000背景后面的暗模糊。

使用附加到窗口交换链的 DirectComposition Visual 上设置的 Direct2D 表面呈现内容IDXGIFactory2::CreateSwapChainForComposition

这一切的细节有点模糊和 COM 冗长，叹息（我是 Sciter 的作者）。

至少您应该使用 Direct2D 进行绘图，以便渲染这样的东西。

于 2018-07-13T17:53:47.927 回答
3

亚克力效果 Sciter 使用的是使用 SetWindowCompositionAttribute()，目前它是滞后的，但我想出了另一种方法来实现相同的亚克力效果，但方法不同。

使用 IDComposition 和 Direct2D查看这个Win32 Acrylic 效果

于 2021-07-28T03:47:06.723 回答
3

我刚刚发现这个项目将丙烯酸带入 WPF：https ://github.com/bbougot/AcrylicWPF

看来你的假设是好的。它使用 SetWindowsCompositionAttribute 并在其上应用着色器。

于 2017-06-20T09:55:01.927 回答
2

它的效果是使用较低级别的 XAML 组合 API 创建的，它使用 UWP 的 XAML 合成器，所以我会说我怀疑你能否在 Win32 中本机实现这一点。如果您真的想要它，您可以将您的应用程序带到桌面桥，然后转换 UI，或者使用当今可用的技术模仿效果。（Chrome 等浏览器设法将 Window Chrome 进一步引入他们的应用程序，尽管我不确定您将如何实现亚克力效果）。

于 2017-05-13T09:53:59.570 回答