通过


视觉层概述

视觉层为图形、效果和动画提供高性能、保留模式 API,是跨 Windows 设备的所有 UI 的基础。 你以声明性方式定义 UI,视觉层依赖于图形硬件加速,以确保内容、效果和动画以流畅、无故障的方式呈现,与应用的 UI 线程无关。

Microsoft.UI.Composition 中的类型构成了视觉层的 Windows 应用 SDK/WinUI 3 实现。

值得注意的亮点:

  • 熟悉的 WinRT API
  • 为更动态的用户界面和互动设计构造
  • 与设计工具相匹配的概念
  • 线性可伸缩性,没有性能急剧下降的风险

WinUI 和 Windows 应用 SDK 应用已通过一个 UI 框架使用视觉层。 还可以直接利用视觉层进行自定义呈现、效果和动画,但工作量很少。

UI 框架分层:框架层(Microsoft.UI.Xaml)构建在视觉层(Microsoft.UI.Composition)之上,后者构建在图形层(DirectX)之上

视觉层中有哪些内容?

视觉层的主要功能包括:

  1. 内容:自定义绘制内容的轻型组合
  2. 效果:实时 UI 效果系统,其效果可以进行动画处理、链接和自定义
  3. 动画:独立于 UI 线程运行、与框架无关的生动动画

Content

内容由动画和效果系统通过视觉效果托管、转换并提供使用。 类层次结构的基础是Visual类,它是一个轻量级、线程敏捷的代理,用于合成器中视觉状态的应用进程。 Visual 的子类包括 ContainerVisual,它允许子对象创建视觉树,SpriteVisual 包含内容,并且可以用纯色、自定义绘制内容或视觉效果进行绘制。 这些视觉对象类型共同构成了 2D UI 的可视化树结构,并支持大多数可见的 XAML FrameworkElements。

有关详细信息,请参阅 合成视觉对象 概述。

影响

通过视觉层中的效果系统,可以将筛选器和透明度效果链应用于视觉对象或视觉对象树。 这是一个 UI 效果系统,不要与图像和媒体效果混淆。 效果与动画系统结合使用,允许用户实现与 UI 线程无关的效果属性的平滑动态动画。 视觉层中的效果提供了可组合和动画的创意构建基块,以构建定制和交互式体验。

除了可动画效果链之外,视觉层还支持一个照明模型,该模型允许视觉对象通过响应可动画灯光来模拟材料属性。 视觉对象还可以投射阴影。 照明和阴影可以组合在一起,以产生对深度和现实主义的感知。

有关详细信息,请参阅 合成效果 概述。

动画

通过视觉层中的动画系统,可以移动视觉对象、动画效果以及驱动转换、剪辑和其他属性。 它是一个与框架无关的系统,它从头开始设计,考虑到性能。 它独立于 UI 线程运行,以确保流畅性和可伸缩性。 虽然它允许你使用熟悉的 KeyFrame 动画来推动属性更改随时间推移,但它还允许你在不同的属性(包括用户输入)之间设置数学关系,让你直接创建无缝编舞体验。

有关详细信息,请参阅 合成动画 概述。

使用 WinUI XAML

可以使用 Microsoft.UI.Xaml.Hosting 中的 ElementCompositionPreview 类来访问由 XAML 框架创建的 Visual 对象,并支持可见的 FrameworkElement。 请注意,框架创建的视觉对象具有一些自定义限制。 这是因为框架在管理偏移量、变换和生存期。 但是,你可以创建自己的视觉对象,并通过 ElementCompositionPreview 将它们附加到现有的 WinUI 元素,或者将它们添加到可视化树结构中的某个位置的现有 ContainerVisual。

有关详细信息,请参阅将 视觉层与 XAML 结合使用 概述。

使用桌面应用

可以使用视觉层增强使用 Windows 应用 SDK 生成的 Win32 桌面应用的外观和功能,以及 WPF、Windows 窗体和 C++ Win32 桌面应用。 你可以迁移内容岛以使用视觉层,并将 UI 的其余部分保留在其现有框架中。 这意味着你可以对应用程序 UI 进行重大更新和增强,而无需对现有代码库进行大量更改。

有关详细信息,请参阅使用可视化层实现桌面应用的现代化

与 UWP 的区别

在最常用的方案中 ,Microsoft.UI.Composition 命名空间提供对与 UWP 视觉层(Windows.UI.Composition)几乎完全相同的功能的访问权限。 但存在例外情况和差异。

获取 Compositor 实例

在桌面应用中(WinUI 应用是桌面应用), Window.Currentnull。 因此,无法从 检索Window.Current.Compositor实例。 在 WinUI 应用中,建议调用 ElementCompositionPreview.GetElementVisual(UIElement)来获取合成视觉对象,并从视觉对象的 Compositor 属性中检索。 如果无法访问UIElement(例如,在类库中创建CompositionBrush),则可以调用CompositionTarget.GetCompositorForCurrentThread

外部内容

Microsoft.UI.Composition compositor 完全在 Windows 应用 SDK 应用中运行,并且只能访问它绘制的像素。 这意味着任何 外部 内容(未由合成器绘制的内容)对撰写器未知,这会产生某些限制。

外部内容的示例是 (Microsoft.UI.Xaml.Controls) MediaPlayerElement。 Windows 媒体堆栈向 XAML 提供不透明的媒体交换链句柄。 XAML 将该句柄提供给合成器,合成器随后通过 Windows.UI.Composition 将其交给 Windows 进行显示。 由于图形合成器无法在媒体交换链中看到任何像素,因此它不能将其合成为窗口整体渲染的一部分。 相反,它将媒体交换链交给 Windows,以便在合成器的渲染下方进行呈现,并且在合成器的渲染中留出一个空白区域,以便可以看到其下方的媒体交换链。

外部内容渲染图

在 Windows 应用 SDK/WinUI 中,以下 API 都创建外部内容:

处理外部内容的模型会产生以下限制:

  • 无法在外部内容后面放置合成器内容。 例如,无法为 WebView2 提供透明背景,以便查看其后面的 XAML 按钮或图像。 外部内容后面的唯一内容是其他外部内容和窗口背景。 因此,我们不建议/禁用外部内容的透明度。
  • 无法从外部内容获取合成器内容示例。 例如,AcrylicBrush 无法从 MediaPlayerElement 采样和模糊任何像素。 AcrylicBrush 将从合成器的图像采样,该图像对于外部内容区域是透明黑色。 同样,MicaBackdropDesktopAcrylicBackdrop 前面的 AcrylicBrush 看不到这些背景将绘制的任何颜色;相反,画笔将模糊透明黑色。
  • 另一种方案称为目标反转,它用于文本框控件中的光标,以反转光标前面的像素。 这将反转来自合成器图面的类似样本,如果文本框没有由合成器绘制的不透明背景,则它将受到影响。
  • 由于 WinUI SwapChainPanel 创建外部内容,因此它不支持透明度。 它也不支持应用 AcrylicBrush 和在其前面使用 CompositionBackdropBrush 的其他效果。

示例

Windows 应用 SDK 示例项目包含一组全面的合成示例,演示如何使用 Microsoft.UI.Composition API 生成丰富的视觉体验。 这些示例涵盖了各种方案,从基本布局和转换到高级效果、照明、阴影和基于 InteractionTracker 的输入处理,例如拉取刷新和视差滚动。 无论你是开始使用视觉层还是查找在自己的应用中应用的模式,这些示例都是一个实际参考,用于了解构建基块是如何组合在一起的。

浏览 GitHub 上的示例: WindowsAppSDK-Samples/SceneGraph

应用 GIF