在您的應用程式中架設 Microsoft Edge WebView2 控制項有三種選項:
- 視窗主機模式。
- 視覺主機模式的視窗。
- 視覺主機模式。
如果你在大多數情況下使用視窗主機,其實不需要閱讀這篇文章。 視窗主機是大多數應用程式的良好起點。 閱讀這篇文章:
- 如果你在不常見的情況下使用視窗主機,且持續遇到 DPI 和縮放問題, 在這種情況下,可以考慮視窗到視覺化的主機。
- 如果你想提供更客製化的使用者體驗 (UX) 。 在這種情況下,可以考慮視覺化主機。
在應用程式中架設 WebView2 控制項的不同方式功能相似,但根據應用程式需求,會依需求不同,具體如下:
| 方法 | 描述 | 優化為 |
|---|---|---|
| 視窗主機 | WebView2 控制項會從作業系統 (作業系統) 輸入。 作業系統會將輸入傳送到 WebView2。 | 快速且輕鬆地顯示網頁內容,無需包含輸入、輸出和無障礙功能。 |
| 視覺化主機窗口 | 結合了視窗與視覺化主機。 類似於視窗化主機,但 WebView2 內容會輸出到存放在視窗中的視覺化裝置,而非直接輸出到視窗。 | 開發者的體驗幾乎與視窗主機相同,但 DPI/縮放處理更為優化,且不支援 Windows Shell 手寫體驗。 |
| 視覺化主機 | 你的主機應用程式會從使用者那裡接收空間輸入 (,例如滑鼠或觸控輸入) 。 你的應用程式會將這個輸入傳送到 WebView2 控制項。 | 對控制組合的更細緻控制。 應用程式需要專門處理視窗管理和渲染 API。 |
這些方法有不同的需求、限制與優點。
- 視窗託管比視覺化託管更容易實作。
- 視覺化主機需要所有 Windowed 主機所需的 API 呼叫,並且還有額外條件才能正確呈現。
以下章節連結了支援的 API 清單:
視窗主機:快速且輕鬆地顯示內容
視窗主機 表示在你的應用程式中,WebView2 的內容直接託管在視窗中;也就是說,HWND。 WebView2 HWND 繼承了作業系統 (作業系統) 的許多預設屬性。 WebView2 控制項從作業系統接收輸入,作業系統將輸入傳送至 WebView2 控制項。 你可以在應用程式中放置多個 HWND,每個都作為 WebView2 的元件來存取網頁內容。
這樣做的好處是,有些輸入/輸出指令會由作業系統或框架自動處理。 不過,你仍然需要處理視窗管理的一些面向。
關於視窗管理與 HWND 功能的一般資訊,請參閱 關於 Windows。
優點
視窗主機提供一種解決方案,能快速顯示網頁內容,而無需實作輸入、輸出及無障礙功能。
擁有視窗和子視窗 (,例如選單和右鍵選單,) 會自動縮放以配合應用程式的父
HWND級縮放。視窗主機負責 WebView2 控制項在按下 Tab 鍵到最後一個元素時,自動聚焦並自動切換 Tab 鍵。
如果你不想管理各種基於合成的渲染控制 (,例如輸入、輸出和無障礙控制,) 也沒關係。
缺點
視窗主機模式在某些情況下可能會遇到 DPI 問題,例如在共享使用者資料資料夾 (,進而在不同 DPI 感知的應用程式間共享瀏覽器程序) 。
視窗主機的 API
關於在設定 WebView2 用於視窗主機 (或視窗轉視覺主機) 時可用的 API 清單,請參閱「WebView2 API 概述」中的「非框架應用程式中的 WebView2 渲染」。
視窗到視覺主機:提供類似視窗主機的體驗,並帶來額外優點與取捨
視窗到視覺化主機 的意指 WebView2 內容會輸出到託管在 HWND 中的視覺化,而不是直接輸出到視窗或視覺化。 透過在硬體環境(HWND)中托管內容,視窗到視覺化的主機使用起來非常簡單,與視窗式主機相同。 但透過使用視覺化來顯示內容,視窗到視覺化主機避免了使用視窗主機時可能出現的一些 DPI 和輸入問題。
視窗到視覺化主機不需要你使用 WebView2 視覺化主機 API。
要啟用 Window to Visual 主機,必須先將環境變數 COREWEBVIEW2_FORCED_HOSTING_MODE 設定為 , COREWEBVIEW2_HOSTING_MODE_WINDOW_TO_VISUAL 然後再初始化 WebView2。
在視窗到視覺化主機與視覺化主機中, 視覺 化是一個基本的圖形單元,可用於在 Windows 上撰寫圖形體驗。 暴露此功能且與 WebView2 相關的 Windows 圖形 API 有 DirectCompositionWindows.UI.Composition和 。 「視覺化主機」中的「視覺化」可以是 IDCompositionVisual、 、 或 Windows.UI.Composition.Visual,這些都是透過 DirectComposition 和 Windows.UI.Composition API 暴露IDCompositionTarget的視覺化。 (視窗到視覺主機的具體用途 IDCompositionVisual 。) 參見:
優點
共用 WebView2 使用者資料資料夾的不同應用程式,可能有不同的 DPI 感知。
不同應用程式共用 WebView2 使用者資料資料夾,其完整性等級可能不同。
共用 WebView2 使用者資料資料夾的不同應用程式,不會因為附帶的視窗輸入佇列而導致彼此當機。
當 WebView2 在 VSTO 外掛中架設時,改變螢幕比例不會導致應用程式當機。 請參閱 Office 解決方案開發中的 VSTO 外掛模組概覽 (VSTO) 。
缺點
啟用視窗轉視覺主機模式後,WebView2 中移除對 Windows 殼層手寫的支援。
另請參閱:
- 墨水輸入 - Windows App 開發 > 使用者互動。
- shellhandwriting.h 標頭 - Win32 API。
視窗到視覺化主機的 API
關於在配置 WebView2 視窗到視覺化主機 (或視窗主機) 時可用的 API 清單,請參閱《WebView2 API 概覽》中的「非框架應用程式中的 WebView2 渲染」。
視覺化主機:更細緻地控制版面配置
使用 視覺主機時,主機應用程式會接收使用者提供的空間輸入 (,如滑鼠或觸控輸入) ,並將這些輸入轉發至 WebView2 控制項。 視覺化主機要求應用程式執行與視窗主機相同的視窗管理,但還有以下額外視窗管理要求:
- 在量度內容物。
- 空間輸入路由 (滑鼠、觸控或筆的) 。
內容物縮放要求
根據基於合成的渲染,WebView2 控制項是視覺樹的一部分,因此預設是以所有前代視覺元素的縮放為基礎的比例呈現。 例如,如果 WebView2 的前身 Visual 被縮放) (放大至 2x,那麼 WebView2 的內容也會以 2 倍比例呈現。 如果 WebView2 的父視覺化被放大 2 倍,而該視覺的父 Visuals 也被放大 2 倍,那麼 WebView2 的縮放是 4 倍。 但因為 WebView2 沒有自行縮放內容,所以畫面會模糊。
為了解決這個問題,應用程式可以取消 WebView2 預設的視覺縮放,改用光柵化縮放 API 來套用預期的視覺縮放。 這會使 WebView2 的內容呈現在正確的比例尺上。 請參閱 WebView2 API 概述中的光柵化尺度。
將空間輸入路由 (滑鼠、觸控或筆) 的要求
如果您的 WebView2 應用程式使用視覺主機,除非應用程式管理空間輸入,否則滑鼠、觸控或筆的 () 等空間輸入不會傳送到 WebView2 控制項。 輸入會傳送到 App 的 HWND,若輸入位置位於 WebView2 上方,應用程式負責將此空間輸入轉發至 WebView2。
該應用程式也負責將輸入位置轉換為 WebView2 座標空間的任何必要操作。
另請參閱:
- 在 Windows > 應用程式開發文件中,使用 Desktop 應用程式的 Visual 層。
優點和缺點
視覺化主機允許 (,並需要) 更細緻的版面控制。 使用此方法時,應用程式需要專門處理視窗管理和渲染 API。
例如,若使用者操作導致 WebView2 的視覺樹縮放,應用程式必須調整 WebView2 的縮放,使其相對於父視覺效果正確呈現。
視覺化主機的 API
關於在視覺化主機環境中配置 WebView2 時可用的 API 清單,請參閱 WebView2 API 概述中的「使用合成渲染 WebView2」。
相容性與限制
主要的相容性限制包括作業系統,以及框架與非框架應用程式的渲染。
作業系統
所有主機模式在支援 WebView2 的地方皆被支援。
另請參閱:
- 支援 Windows 版本 ,見 Microsoft Edge WebView2 簡介。
框架限制
CreateCoreWebView2CompositionController不支援 WinAppSDK 視覺化;也就是說,命名空間中的Microsoft.UI.Composition視覺物件,在 Enhance UI 中描述的 SDK/WinUI 3 視覺層 (Windows App) 。
另請參閱
外:
-
關於 Windows - 視窗管理與
HWND功能。 - 在桌面應用程式中使用視覺層——Windows App 開發。
- 基本概念 - Windows App 開發 > DirectComposition。
- Composition visual - Windows App Development > UWP。
- 墨水輸入 - Windows App 開發 > 使用者互動。
- shellhandwriting.h 標頭 - Win32 API。