Windows 应用中的材料

材料是应用于 UI 图面的视觉效果，用于创建深度、层次结构和视觉兴趣。 WinUI 3 提供了四种用于应用材料的机制，每个机制都适合不同的方案。

Important

AcrylicBrush 是仅应用内 Acrylic — 它对应用窗口内的 XAML 内容进行模糊处理。 它不显示应用后面的桌面或其他窗口。 如需桌面透视效果，请使用 Window.SystemBackdrop 或 SystemBackdropElement。

我应该使用哪种材料？

Scenario 材料 API
带有 Mica 背景（壁纸着色）的应用窗口 Mica Window.SystemBackdrop = new MicaBackdrop()
具有半透明毛玻璃背景的应用窗口 桌面亚克力 Window.SystemBackdrop = new DesktopAcrylicBackdrop()
带有 Acrylic 背景的浮出控件、弹出项或上下文菜单 图面上的系统背景 在 SystemBackdrop、FlyoutBase 等上设置 Popup。
带有 Mica 或 Acrylic 的侧边栏、面板或元素（非整个窗口） SystemBackdropElement <SystemBackdropElement> 控件
具有应用内模糊效果的导航窗格或内容面板 应用内 Acrylic {ThemeResource AcrylicInAppFillColorDefaultBrush}

无材质（默认）

如果未应用材料，窗口背景是从活动浅色或深色主题中绘制的纯色，无模糊或半透明。

WinUI 3 应用窗口的屏幕截图，其中未应用任何材料，显示平面白色背景。

材料依赖于需要硬件支持和用户偏好的合成器效果。 当无法渲染材质时，WinUI 3 会优雅地回退为纯色：

  • 远程桌面或虚拟机 — 合成器无法通过 RDP 与桌面内容混合，因此 SystemBackdrop 材料会自动回退。
  • 图形硬件不足 - Mica 和桌面亚克力需要 DirectX 11 和足够的 GPU 内存。 未达到阈值的设备会回退到纯主题色。
  • 禁用透明度效果 — 如果用户关闭中的>，则所有>材料并回退到其纯色替代项。
  • 电池节能模式激活 — Windows 在电池节能模式开启时会禁用 Acrylic（DesktopAcrylicBackdrop 和 AcrylicBrush）。 Mica 不受影响。
  • 高对比度模式 - 所有材料均被抑制;系统会改为应用高对比度主题颜色。

你的应用不需要检测这些条件 ， API 会自动处理回退。 确保你配置的任何 FallbackColor 或主题背景在纯色模式下也具有良好可读性。

Mica

Mica 将用户桌面壁纸的颜色融入柔和的个性化背景中。 它专为应用主窗口的背景而设计，尤其适用于标题栏和导航窗格区域。

  • API： Window.SystemBackdrop = new MicaBackdrop()
  • 变体： MicaKind.Base （默认值）或 MicaKind.BaseAlt （较轻的辅助表面）
  • Windows版本：仅Windows 11。 在 Windows 10 上会回退为纯色主题色。

应用了 MicaBackdrop 效果的 WinUI 3 应用截图，显示出受用户桌面壁纸染色的微妙蓝灰色背景。

桌面亚克力

桌面亚克力显示桌面的实时模糊视图和应用窗口后面的内容，从而创建霜化玻璃外观。

  • API： Window.SystemBackdrop = new DesktopAcrylicBackdrop()
  • 变体： DesktopAcrylicKind.Base （更不透明）或 DesktopAcrylicKind.Thin （更透明）
  • Windows版本：Windows 10（内部版本 17763）及更高版本。

应用了 DesktopAcrylicBackdrop 的 WinUI 3 应用截图，显示出窗口后方桌面内容的毛玻璃模糊效果。

Acrylic 也可应用于瞬时表面 — 在 SystemBackdrop、FlyoutBase、Popup 或 MenuFlyoutPresenter 上设置 CommandBarFlyoutCommandBar。 有关完整列表，请参阅 系统背景 。

SystemBackdropElement

SystemBackdropElement 将 OS 合成器中的 Mica 或桌面亚克力材料应用于特定的 XAML 元素，而不是整个窗口。 当侧边栏、面板或卡片需要独立于窗口其余部分使用自身的 Mica 或 Acrylic 背景时，请使用它。

应用内 Acrylic (AcrylicBrush)

AcrylicBrush 会模糊应用窗口内的 XAML 内容。 透过该表面无法看到桌面或其他窗口。 将其用于需要半透明应用内效果的导航窗格、边栏或内容面板。

  • API：将{ThemeResource AcrylicInAppFillColorDefaultBrush}应用于元素Background，或使用AcrylicBrush、TintColor和TintOpacity定义自定义TintLuminosityOpacity。
  • UWP BackgroundSource = HostBackdrop 属性在 WinUI 3 中不可用。
  • 有关详细信息和代码示例，请参阅应用内 Acrylic。

应用 AcrylicBrush 的 WinUI 3 应用的屏幕截图，其中显示了模糊应用窗口中 XAML 内容的半透明面板。

  • Last updated on