When using Webview2 in WPF, unable to overlay WPF controls on the Webview

Webview2 is topmost and any WPF controls are hidden behind the webview2 component.
Tried setting the Z index without any success.
Should be able to set visibility level by the position in the XAML tree

AB#27046547

Chris Pulman (@ChrisPulman)

Chris Pulman (@ChrisPulman)

Currently WPF WebView2 does not have the ability to not be the topmost control. Could you give me some more context on what you're building and why you'd like the WebView2 control to be 'underneath' other controls?

I have a application where I have a full screen Webview2 control in a view and want to overlay navigation buttons to allow navigation to other WPF views in the application.

Am I right in my thinking that you are just hovering a chromium control over the WPF application in the position specified by the XAML which is perhaps the issue with the startup being incorrectly sized as the actual size doesn't update until the XAML view is resized or refreshed?

Right now, the WebView2 the control uses HWND hosting, which is why it is the top-level object. We are working on adding visual hosting support which will allow WebView2 to be used independent from an HWND that will allow you you overlay WPF controls over WebView2. However we do not have this support yet. For now, could you perhaps have the WPF controls above the WebView2? The WPF getting started guide can be a good place to start: https://docs.microsoft.com/en-us/microsoft-edge/webview2/gettingstarted/wpf

Thanks, I am glad that the future Development will hopefully allow a true integration of the Webview2 with proper Z index control.
Now knowing this I have overcome this by hosting another HWND Window over the Webview2 with transparency turned on for the Window and Topmost turned on this is the only application running so doesn't interfere with other applications so this method won't suit everybody. I had done this before for webcam controls so had the code needed to make it work. Thanks again for providing the method your using.

I have a WPF application where I migrate parts to HTML5 step by step. For the display I use WebView2. Popups, dialogs or tooltips are still implemented in WPF and cannot be displayed because of the overlay problems.
Are there any updates for the issue?

Same issue as amentma73 - we just did a small prototype to replace WPF controls with WebView2 and were blocked by the overlay problem. It would be great to get an estimate, when this might be fixed.

I've used WebView for well over a decade in the mapping industry as a quick way to bring feature rich interactive maps to WPF apps. Web based mapping platforms often have more features than their .NET counter parts and are updated much more frequently, so creating a wrapper using WebView has been a great way to unlock those features in .NET apps. However, for just as long I have come across a constant stream of requests from developers who want to be able to overlay other WPF controls above WebView (most of which was unrelated to what I was working on, and just what I came across as complaints elsewhere). From the mapping side its often that they want the popup or navigation controls for the map to use standard WFP controls. Note that the map is generally thought of as a background canvas in apps with user data overlaid above it. So I definite +1 this request and am sure there will be a lot of happen developers if this is supported.

Ricky Brundritt (@rbrundritt)

Anyone tried using the following and checked if it works?
While working on another issue with Ricky Brundritt (@rbrundritt) it worked with the sample so not sure.

 _webView = new WebView(WebViewExecutionMode.SeparateProcess)
            {
                HorizontalAlignment = HorizontalAlignment.Stretch,
                VerticalAlignment = VerticalAlignment.Stretch
            };

_webView = new WebView(WebViewExecutionMode.SeparateProcess)
{
HorizontalAlignment = HorizontalAlignment.Stretch,
VerticalAlignment = VerticalAlignment.Stretch
};

I'm using WebView2 in WPF, and there doesn't seem to be any 'WebViewExecutionMode'.

_webView = new WebView(WebViewExecutionMode.SeparateProcess)
{
HorizontalAlignment = HorizontalAlignment.Stretch,
VerticalAlignment = VerticalAlignment.Stretch
};

I'm using WebView2 in WPF, and there doesn't seem to be any 'WebViewExecutionMode'.

I tried with WebView and not WebView2.

Any update on or even better ETA on "We are working on adding visual hosting support which will allow WebView2 to be used independent from an HWND that will allow you you overlay WPF controls over WebView2."?

This is quit a problem for us. We try to display a dialog over the webview2.
And the webview2 blocks our dialogs.

Nic Champagne Williamson [MSFT] (@champnic)

Thanks Nic Champagne Williamson [MSFT] (@champnic)

I have been critical of this issue before and had basically given up on it, but having tried the new composition control, it does indeed fix the issue pretty much perfectly from my tests.

Barring the issue of having to install an optional package (which is still a show stopper if we're doing public releases), once that is fixed and the composition control becomes available in the production release, this will be hugely helpful and a great addition for anybody working with WPF.

So, keep up the good work on this and my thanks to the team for this effort 👍

Simon Lelievre (@simon)

Simon Lelievre (@simon)

Is there a way to fix the Microsoft.Windows.SDK.NET problem that mr-luiks describes without changing the target OS version? Ours is set to Windows 7.

I don't believe so. The new WebView2CompositionControl requires Windows graphics APIs that are not available downlevel.

That's sad. The first pre-release worked fine without that requirement.

All of the versions required this Windows API support, so would have failed downlevel at runtimes anyways. Specifying Windows version is only required when using .NET 5+, and isn't required when using .NET Core 3.0/3.1 or .NET Framework. The first versions of the SDK didn't support .NET 5+ at all, therefore didn't have the Windows version requirement.

It's 2024 yet to be resolved? A lot of my pop-up notification controls are disabled in order to use WebViews🤣

Nic Champagne Williamson [MSFT] (@champnic)

Can you tell us if there is a current schedule?

thx. Nic Champagne Williamson [MSFT] (@champnic)

AlexLEWIS (@alexinea)

AlexLEWIS (@alexinea) On the off chance it might help you or someone else I thought I'd mention that I've been using the nupkg Nic Champagne Williamson [MSFT] (@champnic) attached in #4941 for a couple of days without any issues so far in several .NET 8 Core WPF projects...

Charles Miles (@cmiles)

Please note that the nupkg I shared with Charles Miles (@cmiles) does not come with any ongoing compatibility or support guarantees, so I wouldn't recommend actually shipping with it. But it is useful for validation and early development.

AlexLEWIS (@alexinea) The WebView2CompositionControl has been promoted to stable, and will be released with the next release SDK package sometime in January. I'm trying to get the fix for #4941 that Charles Miles (@cmiles) reported also ported back to that version before release.

Charles Miles (@cmiles)

Please note that the nupkg I shared with Charles Miles (@cmiles) does not come with any ongoing compatibility or support guarantees, so I wouldn't recommend actually shipping with it. But it is useful for validation and early development.

AlexLEWIS (@alexinea) The WebView2CompositionControl has been promoted to stable, and will be released with the next release SDK package sometime in January. I'm trying to get the fix for #4941 that Charles Miles (@cmiles) reported also ported back to that version before release.

Hi Nic Champagne Williamson [MSFT] (@champnic) ， I tried the pre-release version of the SDK (1.0.2950-prerelease), found the drag behavior (msWebView2EnableDraggableRegions) is lost. Will this be fixed in the release version.

已收到您的邮件,我会及时查看的!

来信收到。thanks.

With the release of the API Show WPF elements on top of the WebView2 layer (WebView2CompositionControl).

Closing the issue. Please let us know, if you still got queries around it.

Prevent webview to overlap other controls (#286)

WebView2 library downgrade (#329)

Siv Souvam (MSFT) (@sivMSFT)

As the release notes linked to by Siv Souvam (MSFT) (@sivMSFT) have been archived, the link given no longer works.

The content can now be found using these links:

Show WPF elements on top of the WebView2 layer (WebView2CompositionControl) – Release Notes (Microsoft Learn)
WPF Airspace - WebView2CompositionControl – API Spec (GitHub)

Navigation Menu

Repository navigation

When using Webview2 in WPF, unable to overlay WPF controls on the Webview #286

159 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

When using Webview2 in WPF, unable to overlay WPF controls on the Webview #286

Description

Activity

pagoe-msft commented on Jun 17, 2020

ChrisPulman commented on Jun 17, 2020

pagoe-msft commented on Jun 17, 2020

ChrisPulman commented on Jun 17, 2020

amentma73 commented on Jul 27, 2020

f-bley commented on Jul 29, 2020

rbrundritt commented on Aug 7, 2020

sukesh-ak commented on Aug 31, 2020

DineshSolanki commented on Dec 4, 2020

sukesh-ak commented on Dec 4, 2020

darbid commented on Feb 16, 2021

dos-ise commented on Mar 18, 2021

159 remaining items

ptdev commented on Oct 24, 2024

simon1689 commented on Oct 28, 2024

champnic commented on Oct 28, 2024

keeleycenc commented on Nov 6, 2024

alexinea commented on Dec 6, 2024

cmiles commented on Dec 6, 2024

champnic commented on Dec 6, 2024

lxdonge commented on Jan 15, 2025

benyuz commented on Jan 15, 2025

lxdonge commented on Jan 15, 2025

sivMSFT commented on Feb 19, 2025

LWChris commented on Feb 27, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions