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

[ChrisPulman]

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

[pagoe-msft]

@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?

[ChrisPulman]

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?

[pagoe-msft]

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

[ChrisPulman]

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.

[amentma73]

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?

[f-bley]

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.

[rbrundritt]

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.

[sukesh-ak]

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

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

[DineshSolanki]

_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'.

[sukesh-ak]

_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.

[darbid]

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."?

[twobrainsgmbh]

+1 One from my side. Somehow the VS team already solved it in a generic way, the XAML editor preview does exactly what I would like to be able: render other content on top of any control. And properly interact with it. Should be easy for someone at MS to build in such feature into WebView2.

In fact, i do get solid 60Hz with WebView2-WebGL content in the XAML-Editor. ;) While CefSharp runs at 30Hz or lower (depending on the resolution) at runtime.

[dos-ise]

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

[darbid]

@dos-ise I would suggest you look at work arounds. People using the WPF Webbrowser control have been waiting more than 10 years for a fix to the airspace issue :-)

For your use case have a look at this github project. As you want to display a dialog over the top of your WebView2 the user does not need to interact with the browser while it is showing. Before showing your dialog - take a pic, replace your webview2 with the pic and then show your dialog. By the way to get your image use the WebView2 method to get it and not what is in github.

Your other alternatives are to show a new window or show a popup - both these have their own window handle different to the window that your webview2 is on and thus will display fine.

[Velok]

I've got a question about this issue. I saw in the Release Notes for the WebView2 SDK (https://docs.microsoft.com/en-us/microsoft-edge/webview2/releasenotes#10790-prerelease) that Visual Hosting is now supported. Does this solve the Problem regarding "Web Renderer is always on top"? And if yes how exactly do I have to initialize WebView2 in a WPF Application?

[darbid]

I have been looking at that too. I am Adding an answer to this question in the hope that if I am incorrect I will be corrected you MS engineers. First the composition interface currently only appears to be available in C++. Secondly it appears to be a kind of overlay to intercept mouse interactions and for example drag and drop. I think that this overlay will eventually allow for webview2 to be able to intercept the mouse interactions so that for example win forms and WPF can do this as well.

[Velok]

Any updates on this?

[siseli]

We would like to embed WebView2 in a fairly complex WPF UI.
Unfortunately WebView2 is unusable for us as it isn't properly constrained inside a parent control (e.g. ScrollViewer).

When will this problem be fixed? Is there a way to track progress on this issue?

[GentleGiantSoftware]

The request to have support for the basic behavior of a WPF control (such as being aware of the zpanel.index and visual tree when rendering) was done over a year ago, any ETA for this fix?
I would have loved to move to WebView2 but will need to revert back to using CefSharp which does support this normal WPF control behavior.

[d2phap]

Any update on this please?

[schandra09net]

The same issue, the webView2 is being on top always, popups are going behind this window. any update on this, please?

[schandra09net]

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.

Hello @ChrisPulman ,

I am also having a similar requirement, can you please provide a sample code that I can use to make it happen. Tried using this https://github.com/chris84948/AirspaceFixer but not had much luck.

[simon1689]

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.

[champnic]

@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.

[brianlagunas]

Using the WebView2CompositionControl NuGet v1.0.2839-prerelease:

For .NET Framework I get this exception:

System.Runtime.InteropServices.COMException: 'The application requested an operation that depends on an SDK component that is missing or mismatched. (Exception from HRESULT: 0x887A002D)'

For .NET 6+ I get this exception:

System.IO.FileNotFoundException: 'Could not load file or assembly 'Microsoft.Windows.SDK.NET, Version=10.0.17763.24, Culture=neutral, PublicKeyToken=31bf3856ad364e35'. The system cannot find the file specified.'

[benyuz]

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

[psmulovics]

Using the WebView2CompositionControl NuGet v1.0.2839-prerelease:

For .NET Framework I get this exception:

System.Runtime.InteropServices.COMException: 'The application requested an operation that depends on an SDK component that is missing or mismatched. (Exception from HRESULT: 0x887A002D)'

You missed somewhere above the comment that you need to install the optional directX component, dism /Online /Add-Capability /CapabilityName:Tools.Graphics.DirectX~~~~0.0.1.0

[brianlagunas]

@psmulovics Hey brother, thanks for chiming in. Yes, I did miss that. Well, that makes creating a reusable control library that ships via Nuget a little more of a pain.

[MihaMarkic]

Why is this optional DirectX component required though? I mean if Edge is installed and working, why would wrapper need system level component DirectX?

[psmulovics]

Why is this optional DirectX component required though? I mean if Edge is installed and working, why would wrapper need system level component DirectX?

It is only needed if you to want to overcome airspace issues - and it is the same requirement you have for other solutions regarding airspace

[ptdev]

Hi,

Not sure I follow this.

Can you please clarify that if we want to deploy an app that uses the new composition control, all our users need to run that dism command to install an optional windows feature?

Thanks

[champnic]

You shouldn't need to use the dism tool to install Tools.Graphics.DirectX for either development or deployment. I've just discovered and have a fix for a bug where an incorrect flag was being passed in during Direct3D device creation. With the tools installed this was a no-op, but without the tools it became a crash. The next version of the prerelease SDK should have the fix, but in the meantime for your development, please install those tools as a workaround:

dism /Online /Add-Capability /CapabilityName:Tools.Graphics.DirectX~~~~0.0.1.0

[schandra09net]

The same issue, the webView2 is being on top always, popups are going behind this window. any update on this, please?

HI @champnic , @zhuhaichao518 and @ChrisPulman

It's been more than 3 years waiting for the solution to the "AIRSPACE" issue with WebView2.

We are waiting since Composition control is an alternative solution that did not solve the issue of AIRSPACE completely.

Please let us know when we can expect the fix and the next release of WebView2.

[ptdev]

Thanks @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 👍

[simon1689]

@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.

[champnic]

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.

[keeleycenc]

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

[alexinea]

Can you tell us if there is a current schedule?

thx. @champnic

[cmiles]

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

[champnic]

Please note that the nupkg I shared with @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.

@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 @cmiles reported also ported back to that version before release.

[lxdonge]

Please note that the nupkg I shared with @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.

@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 @cmiles reported also ported back to that version before release.

Hi @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.

[benyuz]

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

[lxdonge]

来信收到。thanks.

[sivMSFT]

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.