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.

[julesx]

Any update on this please?

[TaylorShi]

Any update on this please?

[TaylorShi]

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

Not support .Net Core Project!

[theresia-tobii]

If you like me want to completely overlay the WebView while it is still active, you can set it's width or height to zero.

[schandra09net]

I recently checked with WebView2 and CefSharp's latest versions, the OnTop(Airspace) problem/issue still exists with WebView2.

packages.config:

CefSharp.Wpf version="96.0.170" targetFramework="net472" Microsoft.Web.WebView2" version="1.0.1083-prerelease" targetFramework="net472"

MainWindow.Xaml <Window x:Class="webview2latest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:cefSharp="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf" xmlns:webView="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf" mc:Ignorable="d" Title="MainWindow" Height="700" Width="900" WindowState="Maximized">

Result:

@champnic: Any tentative date for the fix to be available with WebView2?

[GeoDirk]

This behavior is not going to work. Any updates on a fix for the z-order?

https://user-images.githubusercontent.com/1356726/146076118-447082e2-b883-487d-9255-9bf7fcc85de0.mp4

[champnic]

Unfortunately I can't speak much to the timeline on this work yet. We hope to begin it next quarter, but until we've actually begun work it's hard to say.

[SkyIsWhite]

Unfortunately I can't speak much to the timeline on this work yet. We hope to begin it next quarter, but until we've actually begun work it's hard to say.

Why no airspace in winui3? Is the implementation different between wpf and winui3 ?

[champnic]

Yes, WinUI 3, WPF, and Winforms all use different composition models, and WPF's in particular doesn't play well with HWNDs (which is what WebView2 currently uses).

[bztes]

It's the first quarter of 2022. Have you had time to work on this issue? For us, the error is unfortunately an absolute no go and we will have to switch to CefSharp if it cannot be fixed in the near future. :(

[MiheevN]

I realized that I seem to be facing the same problem in my task.

My 3D environment image is on the window, but I don’t understand how to make it transparent so that I can see only the interface.

This can be seen at the time of resizing:

[lvjunlei]

Any update on this please?

[gustavomeia]

On my team this is a no go too, we need this to migrate from cefsharp to webview2 :/

[DevEngineReq]

With this behavior the Webview2 control is absolutely unusable in WPF.

[kluchLProconom]

We are facing the same issue, any update? Early 2022 has gone ;)

[champnic]

Not much update yet - unfortunately we've been dealing with some high priority issues that came in. However, we have the team coming together that will look into this work, and hope to start digging in within the next month or so.

[kluchLProconom]

That means another half of year? :D

[champnic]

We have the investigation and design officially scheduled to begin starting next week :) But yes, I anticipate that with the size of this work half a year is probably right :/ I'll let you know when we find out more!

[sambryans]

Hi @champnic is there any update on this? Thanks

[champnic]

We're still looking into the design, getting a bit bogged down by high priority bugs.

[Crypties]

@champnic This MSFT WebView1/2 Airspace issues is at least 10 YEARS OLD. Google it and see by yourself. 10 Years. Considering the mission of WebView2, including modernization of existing apps most of which are suffering from those airspace issues, and also considering the number of years MSFT have let those WebView airspace issues without solutions, how is this not an extremely high priority at this time? This issue doesn't just renders WebView2/Edge at the back of 90% of where it could be useful but also renders itself completely useless for 90%+ of developers which WebView2 targets.

WPF architecture was build with this kind of challenges in mind so how can it be taking years when it can simply be fixed by having a WPF WebView2 that could wrap the current WebView2, have its own PresentationSource / RenderTarget rendering to a HostVisual which could be plug in the main tree of the wpf application? Redirect the inputs (you can begin with keyboard and mouse and cover 99% use cases) and have an alpha out in under a few hours ... Am I missing something here @champnic? I understand that a polished gold version with all the features MSFT wants for their WebView2 can then take a few months but at least a huge majority of us could begin building over the alpha/prerelease version.

[TheOOnewbie]

HWND Window

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.

could you share more details about your implementation, I have been trying to work around this problem for a while but I could not make any progress.

[jpgarza93]

Any updates? We are getting close to 3 years and no fix

[Evilpaule]

Any updates? We are getting close to 3 years and no fix

Sorry but iets been more than 10 year's now, including webview 1. Have a look: https://stackoverflow.com/questions/9422327/webview-is-always-the-topmost-component

[darbid]

I have made a few comments about this in the past, no need to get all negative again.

I think it's time to just look at alternatives.

If you are using WPF and you want something on top use a tooltip, popup or window as root for whatever you want to display.

I wanted some nicely animated notifications so I created a transparent window that sits on top of my webview2 and then inside that transparent window I add or remove my notifications.

Scroll up for options on dialogs where the webview2 is removed after taking an image of what's being displayed.

[GentleGiantSoftware]

@darbid , I do understand your comment, but any windows control should behave as an appropriate WPF control and Webview2 does not. It is a pity as I do believe that edge could be an excellent solution for web based controls if it would behave as a normal windows control. For now it does not and using the CefSharp is currently still the only way to properly embed a web control into a WPF application. One would expect that Microsoft, if they are serious about promoting Edge, would have provided a fully functional WPF control by now...

[jasmeet21]

champnic do we have any news on the progress, it's been 3 months since your last update.

[TheOOnewbie]

champnic do we have any news on the progress, it's been 3 months since your last update.

you can use chromium, it works just fine, the performance is not the best though.