Win32应用程序中的丙烯酸材料 [英] Acrylic material in win32 app

问题描述

Microsoft最近发布了他们的新流利"设计语言，其中一部分是.此效果使元素透明并模糊背景.它既可以应用于窗口，从而使下层窗口的某些部分虽然可以发光(背景丙烯酸)，也可以应用于窗口中的各个元素，所以其他控件也可以通过(应用程序内的丙烯酸)发光.从概念和视觉上讲，它与macOS上的振动非常相似.

Microsoft recently revealed their new "fluent" design langauge, and one part of it is the "acrylic" material. This effect makes an element transparent and blurs the background. It can either be applied to a window, such that parts of underlying windows shine though (background acrylic), or to individual elements in the window, so other controls shine through (in-app acrylic). It is conceptually and visually very similar to vibrancy on macOS.

它在XAML中作为特殊的画笔实现，但我想知道是否可以在常规Win32应用程序中使用它(背景丙烯酸)吗?效果与应用于开始菜单和任务栏的模糊效果非常相似(由

It is implemented as a special Brush in XAML, but I wonder it there is a way to use it (background acrylic) in a regular Win32 app? The effect looks very similar to the blur applied to start menu and taskbar (which is handled by SetWindowCompositionAttribute) which leads me to believe that it might be activatable by a similar flag.

一个子问题:我想知道它是如何实现的?仅仅是可以在窗口上设置然后在DWM中应用的标志(例如SetWindowCompositionAttribute或Vista和7中的Aero Glass)吗?还是UWP可以控制DWM，并且可以设置着色器来控制其渲染方式?在Vista下，首次引入DWM时，它与WPF具有通用代码，并且实际上共享(类似于DirectX的)缓冲区和场景图，因此可以实现类似的技巧. magifier实用程序可以像矢量图像一样大幅放大WPF应用程序，但是后来该功能丢失了. MS在该页面上显示丙烯酸"的方式(作为不同的层，并实现为XAML画笔)，使我认为您必须以某种方式将层注入DWM场景图中，这将使它变得更难或更不可能使用从Win32.

A subquestion: I wonder how it is implemented? Is it just a flag that you can set on a window, and then applied in the DWM (like SetWindowCompositionAttribute, or like Aero Glass in Vista and 7)? Or does UWP have some kind of control over the DWM, and can set shaders to control how it is rendered? Under Vista, when DWM was first introduced, it had common code with WPF, and it actually shared the (DirectX-like) buffers and scene-graph, so tricks like that were possible. The magifier utility could magnify WPF apps sharply like vector images, but that functionality was lost later. The way MS presents "acrylic" on that page (as different layers, and implemented as an XAML brush), leads me to think that you'd somehow have to inject layers into the DWM scenegraph, which would make it harder or impossible to use from Win32.

推荐答案

Sciter 4.2 添加了对丙烯酸背景的支持(在Windows和MacOS上):

Sciter 4.2 adds support of acrylic backgrounds (on Windows and MacOS):

Sciter中的丙烯酸主题和类似UWP的控件(CSS样式):

Acrylic theme and UWP alike controls (CSS styled) in Sciter:

uSciter演示浏览器，Windows:

uSciter demo browser, Windows:

uSciter演示浏览器，MacOS:

uSciter demo browser, MacOS:

Windows上的Sciter是普通的Win32应用程序(不是UWP).

Sciter on Windows is an ordinary Win32 application (not UWP).

为了在其后面渲染效果，请执行以下操作:

In order to render that blurbehind it does the following:

使用WS_EX_NOREDIRECTIONBITMAP ex标志创建窗口.

Creates window with WS_EX_NOREDIRECTIONBITMAP ex flag.

通话:

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，用于背景后面的暗模糊.

Where clr is AGBR, something like 0xCC000000 for dark blur behind background.

使用IDXGIFactory2::CreateSwapChainForComposition

这一切的细节有些晦涩，COM冗长，叹息(我是Sciter的作者).

Details of all this are a bit murky and COM-verbose, sigh (I am an author of the Sciter).

至少您应使用Direct2D进行绘制，以渲染类似这样的内容.

At least you shall use Direct2D for drawing in order to render something like this.

这篇关于Win32应用程序中的丙烯酸材料的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！