From 6c218a81e27b9bfcb476b7692ed07cd9f1396305 Mon Sep 17 00:00:00 2001 From: "Nic Champagne Williamson [MSFT]" <45700886+champnic@users.noreply.github.com> Date: Tue, 10 Sep 2024 16:20:35 -0700 Subject: [PATCH 1/6] Create WPF_WebView2CompositionControl --- specs/WPF_WebView2CompositionControl | 73 ++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 specs/WPF_WebView2CompositionControl diff --git a/specs/WPF_WebView2CompositionControl b/specs/WPF_WebView2CompositionControl new file mode 100644 index 00000000..4e111f55 --- /dev/null +++ b/specs/WPF_WebView2CompositionControl @@ -0,0 +1,73 @@ + +WPF Airspace - WebView2CompositionControl +=== + +# Background +For a long time, the WebView2 WPF control has had airspace issues, where the WebView2 control will always +be the top-most control in the WPF app. Any WPF element in the same location as the WebView2 control will +end up below the WebView2 control and be "invisible" to the end-user. This issue stems from the fact that +our WPF control uses the WPF HwndHost to host the Win32 WebView2 control, and HwndHost has a long-standing +issue with airspace. This issue has existed for over a decade, and you can read more about in-depth efforts to fix +it in general in WPF here: +https://dwayneneed.github.io/wpf/2013/02/26/mitigating-airspace-issues-in-wpf-applications.html + +Solving this issue for WebView2 necessitates moving away from the HwndHost and the windowed hosting model +of WebView2, and instead use visuals to host the WebView2. To avoid compatibility issues and introducing +new regressions in the existing control, we decided to create a new WebView2 WPF control, called the WebView2CompositionControl. + +# Examples +In this example we create a WebView2CompositionControl in exactly the same way we would a regular +WebView2 control in WPF. Additionally, we place a pink Label that appears ABOVE the WebView2CompositionControl. +If you were to instead do this with the regular WebView2 control, the Label would be hidden behind it. +```xml + + + +