Windowsed 與 WebView2 的視覺裝載
在您的應用程式中裝載 Microsoft Edge WebView2 控件有三個選項:
- 視窗式裝載模式。
- [視窗到視覺效果] 裝載模式。
- 視覺效果裝載模式。
如果您在大部分情況下都使用 Windowed 裝載,則不需要閱讀本文。 視窗式裝載是大部分應用程式的良好起點。 閱讀這篇文章:
- 如果您在不常見的案例中使用 Windowed 裝載,並遇到 DPI 和調整的持續性問題。 在此情況下,請考慮使用視窗到視覺效果裝載。
- 如果您想要在 UX) (提供更自訂的用戶體驗。 在此情況下,請考慮使用視覺效果裝載。
在應用程式中裝載 WebView2 控制件的不同方法在功能上很類似,但會根據應用程式需求而符合不同的需求,如下所示:
方法 | 描述 | 已針對 |
---|---|---|
視窗式裝載 | WebView2 控制件會從操作系統 (OS) 取得輸入。 OS 會將輸入傳送至 WebView2。 | 快速且輕鬆地顯示 Web 內容,而不需要包含輸入、輸出和輔助功能的功能。 |
視窗到視覺效果裝載 | Windowed 和 Visual 裝載的組合。 類似於視窗式主控,不同之處在於 WebView2 內容會輸出至裝載於視窗中的 Visual,而不是直接將內容輸出至視窗。 | 開發人員體驗與 Windowed 裝載幾乎完全相同,但具有改良的 DPI/調整處理,以及不支援 Windows Shell 手寫體驗的警告。 |
視覺效果裝載 | 您的主應用程式會從使用者取得空間輸入 (,例如滑鼠或觸控輸入) 。 您的應用程式會將此輸入傳送至 WebView2 控制件。 | 更細微地控制控件組合。 應用程式需要對視窗管理和轉譯 API 進行特定處理。 |
這些方法有不同的需求、條件約束和優點。
- 視窗式裝載比 Visual 裝載更容易實作。
- 視覺裝載需要 Windowed 裝載所需的所有 API 呼叫,而且有其他需要才能正確轉譯。
下列各節會連結支援的 API 清單:
視窗式裝載:可快速且輕鬆地顯示內容
視窗式裝載 表示在您的應用程式中,WebView2 內容會直接裝載在視窗中;也就是 HWND。 WebView2 HWND 會從操作系統 (OS) 繼承許多預設屬性。 WebView2 控制件會從 OS 取得輸入,而 OS 會將輸入傳送至 WebView2 控制件。 您的應用程式中可以有多個 HWND,每個 HWND 都會作為 WebView2 元件來存取 Web 內容。
其優點是操作系統或架構會為您處理一些輸入/輸出命令。 不過,您仍然需要處理視窗管理的某些層面。
如需視窗管理和 HWND
功能的一般資訊,請參閱 關於 Windows。
優點
視窗式裝載可讓解決方案快速顯示 Web 內容,而不需要實作輸入、輸出和輔助功能的功能。
擁有和子視窗 (例如功能表和操作功能表,) 自動調整以符合應用程式的父
HWND
代縮放比例。視窗式主控件會處理 WebView2 控制件在按 Tab 鍵到達最後一個專案時,如何管理焦點和索引標籤。
如果您不想要,則不需要管理各種組合型轉譯控件 (,例如輸入、輸出和輔助功能控件) 。
缺點
視窗式裝載模式在某些情況下可能會遇到 DPI 問題,例如共用使用者資料資料資料夾 (,以及共用瀏覽器程式時,) 不同的應用程式使用不同的 DPI 感知。
視窗式裝載的 API
如需設定 Windowsed 主控 (的 WebView2 或 Windows 到視覺效果裝載) 時可用的 API 清單,請參閱 WebView2 功能和 API 概觀中的在非架構應用程式中轉譯 WebView2。
視窗到視覺效果裝載:如需與視窗式裝載類似的體驗,並新增優點和取捨
窗口對視覺效果裝載 表示 WebView2 內容會輸出到裝載於 HWND 中的 Visual,而不是直接將內容輸出到視窗或直接輸出至 Visual。 藉由在 HWND 中裝載內容,視窗到視覺效果裝載很容易使用,方式與 Windowed 裝載相同。 但是,透過使用視覺效果顯示內容,視窗對視覺效果裝載可避免使用視窗式裝載時可能會產生的一些 DPI 和輸入問題。
視窗到視覺效果裝載不需要您使用 WebView2 視覺裝載 API。
若要啟用 Window 到 Visual 裝載,必須先將環境變數 COREWEBVIEW2_FORCED_HOSTING_MODE
設定為 值 COREWEBVIEW2_HOSTING_MODE_WINDOW_TO_VISUAL
,才能初始化 WebView2。
在 Windows 對 Visual 裝載和視覺主控中, Visual 是一個基本的圖形化單元,可用來在 Windows 上撰寫圖形化體驗。 公開這項功能且與 WebView2 相關的 Windows 圖形 API 是 DirectComposition
和 Windows.UI.Composition
。 「視覺裝載」中的「視覺效果」可以是 、 IDCompositionTarget
或 Windows.UI.Composition.Visual
的任何一個IDCompositionVisual
,也就是透過 和 Windows.UI.Composition
API 公開的DirectComposition
視覺效果。 (視窗到視覺效果裝載特別使用 IDCompositionVisual
。) 請參閱:
優點
共用 WebView2 使用者資料資料夾的不同應用程式可以有不同的 DPI 感知。
共用 WebView2 使用者資料資料夾的不同應用程式可以有不同的完整性層級。
共用 WebView2 使用者資料資料夾的不同應用程式,不會因為附加的視窗輸入佇列而造成彼此停止回應。
在 VSTO 載入巨集中裝載 WebView2 時,變更監視器規模並不會造成應用程式停止回應。 (VSTO) ,請參閱 Office 解決方案中的 VSTO 載入巨集開發概觀 。
缺點
啟用視窗到視覺效果裝載模式會移除 WebView2 內 Windows Shell 手寫的支援。
另請參閱:
- 筆跡輸入 - Windows 應用程式開發 > 用戶互動。
- shellhandwriting.h 標頭 - Win32 API。
適用於視窗到視覺效果裝載的 API
如需將 WebView2 視窗設定為 Visual 裝載 (或視窗式裝載) 時可用的 API 清單,請參閱 WebView2 功能和 API 概觀中的在非架構應用程式中轉譯 WebView2。
視覺主控:針對版面配置進行更細微的控制
使用 Visual hosting 時,您的主應用程式會接收空間輸入 (,例如使用者的滑鼠或觸控輸入) ,並將此輸入轉送至 WebView2 控制件。 視覺效果裝載需要應用程式執行與視窗式裝載相同的視窗管理,但有關於下列專案的額外視窗管理需求:
- 調整內容。
- 路由空間輸入 (例如滑鼠、觸控或手寫筆) 。
調整內容的需求
根據組合型轉譯,WebView2 控件是可視化樹狀結構的一部分,因此根據預設,它會根據其所有上階視覺效果的縮放比例來轉譯。 例如,如果 WebView2 的上階視覺效果縮放 (縮放) 2 倍,則 WebView2 的內容也會以 2 倍的刻度轉譯。 如果 WebView2 的父 Visual 縮放 2 倍,而且該 Visual 的父系也縮放 2 倍,則 WebView2 會縮放 4 倍。 但由於 WebView2 並未調整其本身的內容,因此會變得模糊不清。
若要解決此問題,應用程式可以復原 WebView2 的預設 Visual 縮放比例,並改用點陣化調整 API 來套用預期的視覺效果調整。 這會導致 WebView2 的內容以正確的縮放比例呈現。 請參閱 WebView2 功能和 API 概觀中的點陣化規模。
(滑鼠、觸控或手寫筆) 路由空間輸入的需求
如果您的 WebView2 應用程式使用 Visual 裝載,則除非應用程式管理這類輸入,否則不會將滑鼠、觸控或畫筆) 等空間輸入 (傳送至 WebView2 控件。 輸入會傳送至應用程式的 HWND
,而且如果輸入的位置是透過 WebView2,應用程式會負責將此空間輸入轉送至 WebView2。
應用程式也負責將任何必要的輸入位置轉換成 WebView2 的座標空間。
另請參閱:
- 在 Windows > 應用程式開發檔中使用傳統型應用程式中的視覺層。
優點和缺點
可視化裝載允許 (,而且需要更細微的版面配置控制) 。 使用此方法時,應用程式需要特定的視窗管理和轉譯 API 處理。
例如,如果用戶動作造成 WebView2 的可視化樹狀結構縮放,應用程式必須調整 WebView2 的縮放比例,才能相對於其父視覺效果正確呈現。
可視化裝載的 API
如需在 Visual 主控環境中設定 WebView2 時可用的 API 清單,請參閱 WebView2 功能和 API 概觀中的使用組合轉譯 WebView2。
相容性和條件約束
主要相容性限制包括操作系統,以及在架構和非架構應用程式中轉譯。
作業系統
支援 WebView2 的所有位置都支援所有裝載模式;也就是,Windows 10 和更新版本,以及某些 Windows Server 版本。 不再支援 Windows 7、8 和 8.1;Windows 7 和 Windows 8 僅支援視窗式裝載,而非 Visual 裝載。
另請參閱:
- Microsoft Edge WebView2 簡介中的 Windows 7 和 8。
架構條件約束
CreateCoreWebView2CompositionController
不支援 WinAppSDK 視覺效果;也就是 命名空間中的 Microsoft.UI.Composition
Visual物件,如使用視覺層增強UI中所述 (Windows 應用程式 SDK/WinUI 3) 。
另請參閱
- WebView2 功能和 API 概觀
- Microsoft Edge WebView2 簡介中的 Windows 7 和 8。
外部:
-
關於 Windows - 視窗管理和
HWND
功能。 - 在傳統型應用程式中使用視覺層 - Windows 應用程式開發。
- 基本概念 - Windows 應用程式開發 > DirectComposition。
- 組合視覺效果 - Windows 應用程式開發 > UWP。
- 筆跡輸入 - Windows 應用程式開發 > 用戶互動。
- shellhandwriting.h 標頭 - Win32 API。