共用方式為


WebView2 的視窗與視覺化主機

在您的應用程式中架設 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,這些都是透過 DirectCompositionWindows.UI.Composition API 暴露IDCompositionTarget的視覺化。 (視窗到視覺主機的具體用途 IDCompositionVisual 。) 參見:

  • 基本概念請參考 Windows App 開發 > DirectComposition 文件。
  • Windows App 開發 > UWP 文件中的合成視覺化。

優點

  • 共用 WebView2 使用者資料資料夾的不同應用程式,可能有不同的 DPI 感知。

  • 不同應用程式共用 WebView2 使用者資料資料夾,其完整性等級可能不同。

  • 共用 WebView2 使用者資料資料夾的不同應用程式,不會因為附帶的視窗輸入佇列而導致彼此當機。

  • 當 WebView2 在 VSTO 外掛中架設時,改變螢幕比例不會導致應用程式當機。 請參閱 Office 解決方案開發中的 VSTO 外掛模組概覽 (VSTO)

缺點

啟用視窗轉視覺主機模式後,WebView2 中移除對 Windows 殼層手寫的支援。

另請參閱:

視窗到視覺化主機的 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 座標空間的任何必要操作。

另請參閱:

優點和缺點

視覺化主機允許 (,並需要) 更細緻的版面控制。 使用此方法時,應用程式需要專門處理視窗管理和渲染 API。

例如,若使用者操作導致 WebView2 的視覺樹縮放,應用程式必須調整 WebView2 的縮放,使其相對於父視覺效果正確呈現。

視覺化主機的 API

關於在視覺化主機環境中配置 WebView2 時可用的 API 清單,請參閱 WebView2 API 概述中的「使用合成渲染 WebView2」。

相容性與限制

主要的相容性限制包括作業系統,以及框架與非框架應用程式的渲染。

作業系統

所有主機模式在支援 WebView2 的地方皆被支援。

另請參閱:

框架限制

CreateCoreWebView2CompositionController不支援 WinAppSDK 視覺化;也就是說,命名空間中的Microsoft.UI.Composition視覺物件,在 Enhance UI 中描述的 SDK/WinUI 3 視覺層 (Windows App)

另請參閱

外: