可视化层Visual layer

可视化层为图形、效果和动画提供高性能的保留模式 API,是 Windows 设备上所有 UI 的基础。The Visual layer provides a high performance, retained-mode API for graphics, effects and animations, and is the foundation for all UI across Windows devices.可采用声明方式定义 UI,可视化层依靠图形硬件加速来确保内容、效果和动画以独立于应用 UI 线程的流畅、无故障的方式进行呈现。 You define your UI in a declarative manner and the Visual layer relies on graphics hardware acceleration to ensure your content, effects and animations are rendered in a smooth, glitch-free manner independent of the app's UI thread.

值得注意的要点:Notable highlights:

  • 熟悉的 WinRT APIFamiliar WinRT APIs
  • 为更动态的 UI 和交互而设计Architected for more dynamic UI and interactions
  • 符合设计工具的概念Concepts aligned with design tools
  • 无突发性能下降的线性可扩展性Linear scalability with no sudden performance cliffs

Windows UWP 应用已在通过 UI 框架之一使用可视化层。Your Windows UWP apps are already using the Visual layer via one of the UI frameworks. 还可以非常轻松地直接将可视化层用于自定义呈现、效果和动画。You can also take advantage of Visual layer directly for custom rendering, effects and animations with very little effort.

UI 框架分层:框架层 (Windows.UI.XAML) 基于可视化层 (Windows.UI.Composition) 生成,而可视化层基于图形层 (DirectX) 生成

可视化层中是什么?What's in the Visual layer?

可视化层的主要功能有:The primary functions of the Visual layer are:

  1. 内容:自定义绘制内容的轻型合成Content: Lightweight compositing of custom drawn content
  2. 效果:可以对其效果进行动画处理、链式处理和自定义的实时 UI 影响系统Effects: Real-time UI effects system whose effects can be animated, chained and customized
  3. 动画:有表现力、框架不可知的动画独立于 UI 线程运行Animations: Expressive, framework-agnostic animations running independent of the UI thread


内容由使用视觉对象的动画和效果系统进行托管、转换并提供进行使用。Content is hosted, transformed and made available for use by the animation and effects system using visuals. 类层次结构的底层是 Visual 类,这是应用进程中用于合成器中的视觉状态的轻型线程敏捷代理。At the base of the class hierarchy is the Visual class, a lightweight, thread-agile proxy in the app process for visual state in the compositor. 视觉对象的子类包括  system.windows.media.containervisual> ,以允许儿童创建包含内容的视觉对象树和 SpriteVisual ,并可通过纯色、自定义绘制内容或视觉效果进行绘制。Sub-classes of Visual include  ContainerVisual to allow for children to create trees of visuals and SpriteVisual that contains content and can be painted with either solid colors, custom drawn content or visual effects. 这些 Visual 类型一起组成 2D UI 的可视化树结构并支持大多数可见 XAML FrameworkElement。Together, these Visual types make up the visual tree structure for 2D UI and back most visible XAML FrameworkElements.

有关详细信息,请参阅合成视觉对象概述。For more information, see the Composition Visual overview.


可视化层中的效果系统使你可以将一系列筛选器和透明效果应用于视觉对象或视觉对象树。The Effects system in the Visual layer lets you apply a chain of filter and transparency effects to a Visual or a tree of Visuals. 这是 UI 效果系统,不要与图像和媒体效果混淆。This is a UI effects system, not to be confused with image and media effects. 效果与动画系统配合使用,从而使用户可以实现效果属性的流畅动态动画(独立于 UI 线程呈现)。Effects work in conjunction with the Animation system, allowing users to achieve smooth and dynamic animations of Effect properties, rendered independent of the UI thread. 可视化层中的效果提供有创意的构建基块,它们可以进行组合和动画处理,以构造定制的交互体验。Effects in the Visual Layer provide the creative building blocks that can be combined and animated to construct tailored and interactive experiences.

除了可动画处理的效果链之外,可视化层还支持一个照明模型,它使视觉对象可以通过响应可动画处理的光来模拟材料属性。In addition to animatable effect chains, the Visual Layer also supports a lighting model that allows Visuals to mimic material properties by responding to animatable lights. 视觉对象还可能会投影。Visuals may also cast shadows. 照明和阴影可以组合起来以创造深度和现实感。Lighting and shadows can be combined to create a perception of depth and realism.

有关详细信息,请参阅合成效果概述。For more information, see the Composition Effects overview.


可视化层中的动画系统使你可以移动视觉对象、对效果进行动画处理以及驱动转换、剪辑和其他属性。The animation system in the Visual layer lets you move visuals, animate effects, and drive transformations, clips, and other properties.它是与框架无关的系统,是在考虑到性能的情况下从头开始设计的。  It is a framework agnostic system that has been designed from the ground up with performance in mind.它独立于 UI 线程运行,以确保流畅性和可扩展性。  It runs independently from the UI thread to ensure smoothness and scalability.虽然它使你可以使用熟悉的 KeyFrame 动画随时间推移驱动属性更改,不过也使你可以在不同属性(包括用户输入)之间设置数学关系,从而使你可以直接创造无缝的精心设计的体验。  While it lets you use familiar KeyFrame animations to drive property changes over time, it also lets you set up mathematical relationships between different properties, including user input, letting you directly craft seamless choreographed experiences.

有关详细信息,请参阅合成动画概述。For more information, see the Composition animations overview.

使用 XAML UWP 应用Working with your XAML UWP app

可以访问 XAML 框架创建的视觉对象,并使用 Windows.UI.Xaml.Hosting 中的 ElementCompositionPreview 类支持可见 FrameworkElement。You can get to a Visual created by the XAML framework, and backing a visible FrameworkElement, using the ElementCompositionPreview class in Windows.UI.Xaml.Hosting. 请注意,框架创建的视觉对象对自定义具有一些限制。Note that Visuals created for you by the framework come with some limits on customization. 这是因为框架在管理偏移、转换和生存期。This is because the framework is managing offsets, transforms and lifetimes. 但是可以创建自己的视觉对象,并通过 ElementCompositionPreview 将它们附加到现有 XAML 元素(或通过将其添加到可视化树结构中某个位置的现有 ContainerVisual)。You can however create your own Visuals and attach them to an existing XAML element via ElementCompositionPreview, or by adding it to an existing ContainerVisual somewhere in the visual tree structure.

有关详细信息,请参阅将可视化层与 XAML 结合使用概述。For more information, see the Using the Visual layer with XAML overview.

使用桌面应用Working with your desktop app

您可以使用可视层来增强您的 WPF、Windows 窗体和 c + + Win32 桌面应用程序的外观和功能。You can use the Visual layer to enhance the look, feel, and functionality of your WPF, Windows Forms, and C++ Win32 desktop apps. 可以迁移内容孤岛来使用视觉对象层,并将用户界面的其余部分保留在现有框架中。You can migrate islands of content to use the Visual layer and keep the rest of your UI in its existing framework. 这意味着,可对应用程序 UI 做出重大更新和增强,而无需对现有基本代码进行大量更改。This means you can make significant updates and enhancements to your application UI without needing to make extensive changes to your existing code base.

有关详细信息,请参阅使用可视化层实现桌面应用的现代化For more information, see Modernize your desktop app using the Visual layer.

其他资源Additional resources