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"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="5*"/> <RowDefinition Height="5*"/> </Grid.RowDefinitions>

    <Grid Grid.Row="0">
        <webView:WebView2 Name="WebView2Browser" Source="https://www.whatismybrowser.com"/>
        <TextBlock Text = "I am over a WebView2 browser element" Foreground="Red" FontSize="25" FontWeight="Bold"/>
    </Grid>

    <Grid Grid.Row="1">
        <cefSharp:ChromiumWebBrowser Name="CefSharpBrowser" Address="https://www.whatismybrowser.com"/>
        <TextBlock Text = "I am over a CefSharp browser element" Foreground="Red" FontSize="25" FontWeight="Bold"/>
    </Grid>

</Grid>

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 ?