WebView2 in WPF apps

The following considerations apply to WebView2 in WPF apps.

Show WPF elements on top of the WebView2 layer (WebView2CompositionControl)

The WebView2CompositionControl prevents the WebView2 control from being the topmost layer in a WPF app and obscuring any WPF elements. Microsoft.Web.WebView2.Wpf.WebView2CompositionControl is a drop-in replacement for the standard WPF WebView2 control. Both the WebView2 control and WebView2CompositionControl implement the Microsoft.Web.WebView2.Wpf.IWebView2 interface. Both of them derive from FrameworkElement, as follows:

• FrameworkElement -> HwndHost -> WebView2.
• FrameworkElement -> Control -> WebView2CompositionControl.

Background: If you're building a Windows Presentation Foundation (WPF) app and using the WebView2 control, you may find that your app runs into "airspace" issues, where the WebView2 control is always displayed on top, hiding any WPF elements in the same location, even if you try to specify the WPF elements to be above the WebView2 control (using visual tree order or the z-index property, for example).

This issue occurs because the WPF control uses the WPF HwndHost to host the Win32 WebView2 control, and HwndHost has an issue with airspace.

See also:

• Mitigating Airspace Issues In WPF Applications
• WPF Airspace - WebView2CompositionControl - Spec.

.NET/C#

• WebView2CompositionControl Class

WinRT/C#

n/a

Win32/C++

n/a

See also

• WebView2CompositionControl Class

Airspace:

• Mitigating Airspace Issues In WPF Applications
• WPF Airspace - WebView2CompositionControl - Spec.