共用方式為

視覺圖層概述

視覺層提供高效能、保留模式的圖形、特效與動畫API，並成為所有Windows裝置使用者介面的基礎。 你以宣告式的方式定義 UI，Visual 層則依賴圖形硬體加速，確保內容、特效和動畫以流暢、無故障的方式呈現，且不受應用程式介面執行緒的影響。

Microsoft.UI.Composition 中的類型構成了 Windows App SDK/WinUI 3 視覺層的實作。

重點亮點：

  • 熟悉的 WinRT API
  • 架構了更具動態性的介面與互動性
  • 與設計工具相符的概念
  • 線性擴展性且不會突然驟降的效能

你的 WinUI 和 Windows App SDK 應用程式已經透過某個 UI 框架使用 Visual 介面層。 你也可以直接利用 Visual 圖層來做自訂渲染、特效和動畫，幾乎不費力。

UI 框架分層：框架層（Microsoft.UI.Xaml）建置於視覺層（Microsoft.UI.Composition），視覺層則建置於圖形層（DirectX）

視覺層裡有什麼？

視覺層的主要功能包括：

  1. 內容：自訂繪製內容的輕量化合成
  2. 效果：即時 UI 效果系統，效果可被動畫、串接及自訂
  3. 動畫：表現力強、不受框架限制的動畫，獨立於 UI 執行緒之外運行

Content

內容會被託管、轉換，並透過視覺效果提供給動畫與特效系統使用。 類別階層的基層是 Visual 類別，這是一個輕量級、多執行緒優化的代理，用於應用程式進程中的合成器視覺狀態。 Visual 的子類別包括 ContainerVisual ，讓兒童能建立視覺樹狀結構，以及包含內容且可用純色、自訂繪製內容或視覺特效繪製的 SpriteVisual 等。 這些視覺型態共同構成了 2D UI 的視覺樹結構，並支持大多數可見的 XAML FrameworkElements。

欲了解更多資訊，請參閱 構圖視覺 概覽。

影響

視覺圖層的效果系統允許你對視覺圖或視覺樹套用一連串濾鏡和透明度效果。 這是一個 UI 效果系統，不要和影像和媒體特效混淆。 特效與動畫系統協同運作，讓使用者能實現流暢且動態的特效屬性動畫，且可獨立於 UI 執行緒之外呈現。 視覺層的特效提供創意基礎，可組合並動畫化，打造量身打造且互動的體驗。

除了可動畫效果鏈外，視覺圖層還支援光照模型，讓 Visuals 能透過回應可動畫光源來模擬材質屬性。 視覺效果也可能投射陰影。 光影可以結合，營造出深度與真實感。

欲了解更多資訊，請參閱 合成效果 總覽。

動畫

Visual 圖層的動畫系統讓你能移動視覺元素、動畫效果，以及驅動轉換、剪輯和其他屬性。 這是一個框架無關的系統，從零開始就以效能為核心設計。 它獨立於 UI 執行緒執行，以確保流暢與可擴展性。 它讓你能利用熟悉的關鍵影格動畫來推動屬性隨時間變化，同時也能設定不同屬性之間的數學關係，包括使用者輸入，讓你能直接打造無縫編排的體驗。

欲了解更多資訊，請參閱 構圖動畫 總覽。

使用 WinUI XAML

你可以使用 Microsoft.UI.Xaml.Hosting 中的 ElementCompositionPreview 類別，取得由 XAML 框架建立並支援可見 FrameworkElement 的 Visual。 請注意，框架為你製作的視覺化在自訂上有一定限制。 這是因為該框架管理的是偏移量、轉換和生命週期。 不過，你可以自行建立視覺化，並透過 ElementCompositionPreview 將它們附加到現有的 WinUI 元素上，或是將它們加入視覺樹結構中的現有容器視覺。

欲了解更多資訊，請參閱 「使用 XAML 視覺圖層 」概述。

與桌面應用程式合作

你可以利用視覺圖層來強化使用 Windows App SDK 所建構的 Win32 桌面應用程式的外觀、使用感與功能，以及 WPF、Windows Forms 和 C++ Win32 桌面應用程式。 你可以將片段內容遷移以使用視覺層，並將其餘的 UI 保留在其現有框架中。 這表示你可以對應用程式介面進行重大更新與強化，而不必對現有程式碼庫進行大幅修改。

如需詳細資訊，請參閱使用視覺層讓您的傳統型應用程式現代化。

與 UWP 的差異

Microsoft.UI.Composition 命名空間提供的功能幾乎與 UWP 視覺圖層（Windows.UI.Composition）相同，適用於最常用的情境。 但也有例外和差異。

取得 Compositor 實例

在桌面應用程式中（WinUI 應用程式就是桌面應用程式）， Window.Current 是 null。 因此，您無法從 擷取 Window.Current.Compositor 的執行個體。 在 WinUI 應用程式中，我們建議你呼叫 ElementCompositionPreview.GetElementVisual（UIElement）來取得 Composition Visual，並從該視覺化的 Compositor 屬性中取得 Compositor. 如果您無法存取 UIElement (例如，如果您在類別庫中建立 CompositionBrush)，您可以呼叫 CompositionTarget.GetCompositorForCurrentThread。

外部內容

Microsoft.UI.Composition 合成器完全運行於 Windows App SDK 應用程式中，且僅能存取它繪製的像素。 這表示任何 外部 內容（非合成師繪製的內容）對合成師來說是未知的，這造成某些限制。

外部內容的範例是 (Microsoft.UI.Xaml.Controls) MediaPlayerElement。 Windows 媒體堆疊為 XAML 提供不透明媒體交換鏈控制碼。 XAML 將該句柄提供給合成器，之後合成器再透過 Windows.UI.Composition 轉交給 Windows 顯示。 由於合成器看不到媒體交換鏈中的任何像素，因此無法將這些像素合成成視窗整體渲染的一部分。 相反，它將媒體交換鏈提供給 Windows，以將其呈現在合成器的渲染下方，並在合成器的渲染中切出一個洞，以便允許其下方的媒體交換鏈可見。

轉譯外部內容的圖表

在 Windows 應用程式 SDK/WinUI 中，以下 API 皆用於建立外部內容：

處理外部內容的模型造成以下限制：

  • 合成器內容不可能放在外部內容後面。 例如，不可能讓 WebView2 有透明背景，才能看到背後的 XAML 按鈕或影像。 唯一可以位於外部內容後面的是其他外部內容和視窗背景。 因此，我們不建議/停用外部內容的透明度。
  • 無法讓合成器內容從外部內容進行取樣。 例如，AcrylicBrush 無法從 MediaPlayerElement 取樣及模糊任何圖元。 AcrylicBrush 會從組合器的影像中取樣，該影像在外部內容區域是透明黑色的。 同樣，AcrylicBrush 位於 MicaBackdrop 或 DesktopAcrylicBackdrop 前面時，無法看到那些背景將繪製的任何顏色；相反，畫筆會使透明的黑色變得模糊。
  • 另一個場景稱為 目的地反轉，用於文本框控制項的插入點，以反轉文字插入點前面的圖元。 這項反轉操作同樣會從合成器表面取樣，如果文字框沒有由合成器繪製的不透明背景，其效果會受到影響。
  • 因為 WinUI SwapChainPanel 會產生外部內容，所以不支援透明度。 它也不支援套用 AcrylicBrush 和其他在它前面使用 CompositionBackdropBrush 的效果。

範例

Windows 應用程式 SDK 範例專案包含完整的合成範例，示範如何使用 Microsoft.UI.Composition API 來打造豐富的視覺體驗。 這些範例涵蓋了各種場景——從基本的版面配置與變換，到進階特效、光影、陰影，以及基於 InteractionTracker 的輸入處理，如拉取刷新和視差捲動。 無論你是剛開始使用視覺層，還是尋找可套用在自己應用程式中的模式，這些範例都是實用參考，幫助你了解各個組件如何組合起來。

請在 GitHub 上探索範例： WindowsAppSDK-Samples / SceneGraph。

應用程式 gif

  • Last updated on