視覺層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 app 已經使用透過其中一個 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

ContentContent

使用視覺效果,可讓動畫和效果系統裝載、轉換和使用內容。Content is hosted, transformed and made available for use by the animation and effects system using visuals. 類別階層的基底是Visual類別,為組合器中可見狀態之應用程式處理程序中的輕量型、敏捷執行緒 Proxy。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. 這些視覺效果類型可一起構成 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.

效果Effects

視覺層中的效果系統可讓您將一連串的篩選和透明效果套用至視覺效果或視覺效果樹狀結構。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.

動畫Animations

視覺層中的動畫系統可讓您移動視覺效果、建立效果動畫,並驅動轉換、剪輯和其他屬性。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 appWorking 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,或將它新增到視覺效果樹狀結構中某個位置的現有 ContainerVisual,以將它們附加至現有 XAML 元素。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 Forms 和 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. 您可以遷移內容孤島以使用視覺效果層,並將其餘的 UI 保留在現有的架構中。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