标签: fluent-design

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

更新:

微软发布了官方的丙烯酸材料文件

注意:

如果有人不知道丙烯酸口音.Acrylic Accent是Windows 10 Creators Update中的新功能,允许应用程序背景模糊和透明.

随着微软Fluent设计系统的出现以及新的丙烯酸材料在Windows生态系统中的传播,我认为在某些Web布局中使用它会很棒.

Acoording到规范,丙烯酸层的组成是:

所以我开始尝试一种仅受CSS影响的方法,灵感来自该图片中的图层,这样:

body {
  margin: 0;
  font: 1em/1.4 Sans-serif;
  background: url("https://cdn.pixabay.com/photo/2017/03/27/16/50/beach-2179624_1280.jpg") center center;
  background-size: 100vw auto;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.acrylic {
  padding: 4em 6em;
  position: relative;
  overflow: hidden;
}

.acrylic::before {
  background: url("https://cdn.pixabay.com/photo/2017/03/27/16/50/beach-2179624_1280.jpg") center center;
  background-size: 100vw auto;
  filter: blur(10px);
  content: "";
  position: absolute;
  left: -10px;
  top: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  z-index: -1;
}

.acrylic::after {
  content: "";
  position: …

由于微软最近发布了一个名为"Fluent Design"的设计系统,将它应用于网页设计是否合适？

我的大部分搜索都是针对所有Microsoft平台,C#app,F#等.我从未在网页设计中看到任何相关内容.

微软的 Fluent design 基本上是设计应用程序的指南，但它们也包括如何在 UWP 应用程序中实现它们的代码片段和工具。UWP 有很多工具和片段可用，但我找不到 xamarin 表单的任何内容。如何以 xamarin 形式实施这些实践。

微软最近透露了他们的新“流畅”设计语言，其中一部分是“丙烯酸”材料。此效果使元素透明并模糊背景。可以将其应用于窗口，以使基础窗口的某些部分可以通过（背景丙烯酸）发光，也可以应用于窗口中的各个元素，以便其他控件可以通过（应用程序内的丙烯酸）发光。从概念和视觉上讲，它与macOS上的活力非常相似。

它在XAML中作为特殊的画笔实现，但我想知道是否可以在常规Win32应用程序中使用它（背景丙烯酸）吗？这种效果看起来与应用于开始菜单和任务栏的模糊效果（由SetWindowCompositionAttribute处理）非常相似，这使我相信可以通过类似的标记将其激活。

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

我想在 Windows 10 上的 QML 中获得一个半透明的模糊窗口，类似于 Fluent Design 指南（示例）。我知道你可以制作一个透明的窗口：

Window{
    visible: true
    color: "transparent"
}

但这并没有达到我正在看的模糊效果。我也知道可以使用QtGraphicalEffectslike模糊窗口内的元素，FastBlur但我想模糊整个窗口本身。有没有办法实现这一目标？我也尝试过使用QtWinExtras模块并调用，QtWin::enableBlurBehindWindow但这也不起作用：

    QObject *root = engine.rootObjects()[0];
    QQuickWindow *window = qobject_cast<QQuickWindow *>(root);
    if (!window) {
        qFatal("Error: Your root item has to be a window.");
        return -1;
    }
    QtWin::enableBlurBehindWindow(window);

我希望在悬停时使用流畅的设计风格将卡片提升效果添加到我的自举卡片中.您可以在微软设计网站上看到我的意思.

这是我尝试过的,但是有些东西缺失了,我无法抓住它.

我试过了:

.card {
  box-shadow: -3px 6px 5px 0px rgba(176,164,176,1);
  transition: all .3s ease-in-out;
}

.card:hover {
  box-shadow: -3px 18px 20px 0px rgba(99,89,99,1);
}

<div class="card" style="width:19.5rem">
  <div class="card-body">
   Lorem ipsum dolor sit ameta, card content
  </div>
</div>

请感谢您的帮助.