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

[nagisetty1]

@champnic, can you please give ETA, by when we can expect this change? if there is no plan at your side to fix this issue, please let us know so that we will switch to other control.

[Evilpaule]

@champnic, can you please give ETA, by when we can expect this change? if there is no plan at your side to fix this issue, please let us know so that we will switch to other control.

Please read all of the issue and its past. Its been more than 10 years now. Here you can give yourself an answer.

[champnic]

@nagisetty1 We do plan to fix this, but I would guess within the next 6 months. Understood if that doesn't work for your timeline. As @Evilpaule mentioned this has been a longstanding issue.

[nagisetty1]

Thank you very much for response. This gives me to plan my task.

On Wed, 21 Sep 2022 at 1:46 AM, Nic Champagne Williamson [MSFT] < @.***> wrote:

@nagisetty1 https://github.com/nagisetty1 We do plan to fix this, but I would guess within the next 6 months. Understood if that doesn't work for your timeline. As @Evilpaule https://github.com/Evilpaule mentioned this has been a longstanding issue.

— Reply to this email directly, view it on GitHub https://github.com/MicrosoftEdge/WebView2Feedback/issues/286#issuecomment-1252864781, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACHHQE4KLPCDG3KSBCPEXU3V7ILQJANCNFSM4OAAJS5Q . You are receiving this because you were mentioned.Message ID: @.***>

-- Thanks & Regards Nagi Setty.A Phone: +91 9849226425

[ptdev]

TLDR; for this issue:

June 17th 2021

(...) 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 (...)

December 15th 2021

(...) We hope to begin it next quarter (...)

March 31st 2022

(...) we have the team coming together that will look into this work, and hope to start digging in within the next month or so (...)

April 2nd 2022

(...) I anticipate that with the size of this work half a year is probably right (...)

June 25th 2022

(...) We're still looking into the design (...)

September 20th 2022

(...) We do plan to fix this, but I would guess within the next 6 months. (...)

So, great job Microsoft! Surely now everybody will migrate to WinUI. Oh, wait...

[michaelSant0s]

Ok so the original internet explorer WebBrowser hat the same issue, than WebView 1 too. Webview2, of course its not fixed too. Maybe just release WebView3 already with the same 20 year old problems.

[BobInWonderLand]

As I can understand, both WebView and WebView2 utilize something like HwndHost for embedding the browser window - that's why that window does not respect Z-order in WPF.

To resolve this issue, a completely different embedding approach should be used. For instance,you can receive pixels rendered by the browser somehow, and then render them in WPF using something like WritableBitmap. This is how CefSharp works. I suspect something similar is also done by DotNetBrowser.

Anyway, this approach is quite difficult to implement, so the constantly changing timelines from MS guys are not surprising 🙁 .

[Soahr]

And most importantly, when the webview2 take the entire MainWindow space, i can't resize the MainWindow ...

[champnic]

@Soahr You are right this is a current limitation related to this work. The WebView2 won't know that it's on the edge of the screen, and so won't hit test properly for the non-client region to tell Windows to resize the window or show the drag icon. As a workaround you can try adding a very slight border around the WebView2, and make it the same color as the expected background (you could choose a default static color, or add logic to update dynamically based on the pages background).

[NDevelopers]

@champnic What's the new timeline to fix this? We have waited for almost a year now.

[rickgoud]

Also very much looking for a fix. Quite unbelievable the communication is like this to be honest.....

[YuuukiA]

@champnic Is there any update to fix this issue? I'm also waiting for it too.

[Vladoses]

The same problem, I need to display a window with a message on top of WebView2, but I can’t do it in any way

[luclt90]

well, the same issue. Is there any update to fix this issue?

I think everyone who are got this problem had to change their design to ignore this issue.

[DevEngineReq]

@champnic: You wrote on 20 Sep 2022 "We do plan to fix this, but I would guess within the next 6 months" The six month are almost over. Are there any news?

[champnic]

We have identified a possible path forwards on the design to make this work properly. The next step to consume this new approach will likely require creating a new WPF WebView2 control. Unfortunately this will also take some time, but is currently the top priority of our WV2 .NET control team.

[iXab3r]

@champnic Greetings, any updates or ETA on this?

[nikola-nignite]

This bug should at very least be listed as a CON in some intro document of WebView2 so that not many people lose time when this kind of behavior is a deal breaker.

Yes, I know it's embarrassing, but I suggest it's better than having people reach this page and start hating WV2 and giving up on it for good (or as long as there is CefSharp, which is in general more developer friendly anyway).

[wldevries]

Unfortunately it seems the whole xaml islands thing turned out be a publicity project. The WebView2 control at least worked (with a big downside), the MediaPlayerElement control never did.

[champnic]

@iXab3r We are actively working on a new WPF control/mode that solves this issue. @zhuhaichao518 will have the latest details.

@nikola-nignite We are working on putting together a "Differences between the UI frameworks" doc that will cover the main things to consider when choosing a UI framework to use WebView2 with, as well as the current known issues/gotchas across the different controls, including this airspace issue.

[base553]

We do plan to fix this, but I would guess within the next 6 months lol .I copy this from 1 year ago.

[nagisetty1]

We are hearing same words from last 2+ years. Is words trustable ?

On Thu, 13 Apr 2023 at 11:42 AM, linsyd @.***> wrote:

We do plan to fix this, but I would guess within the next 6 months lol .

— Reply to this email directly, view it on GitHub https://github.com/MicrosoftEdge/WebView2Feedback/issues/286#issuecomment-1506404328, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACHHQE2G5FCULEVOBGP64JLXA6KOVANCNFSM4OAAJS5Q . You are receiving this because you were mentioned.Message ID: @.***>

-- Thanks & Regards Nagi Setty.A Phone: +91 9849226425

[base553]

It's like the boss's promise. lol, i copy it from 1 years ago .. lol

[benyuz]

please go on ,quickly. its important

[Evilpaule]

please go on ,quickly. its important

Sorry but first read my post On 20 september 2020 And as you can see there is no real chance that it would be fixed, so have a look for alternatives like cefsharp wrapper.

[SHWotever]

Hello ! I'm struggling with this issue too, I understand that it's tied to the technology also making it faster than some alternatives like CefSharp which uses bitmap as an intermediate transport vector. This other option (cefsharp wpf) is not scaling very well for high performance requirements at large resolutions.

If like me you need the browser to be fullscreen or in a minimal borderless window , it starts to be impossible to arrange a decent UI with the airspace issue.

That said I've found a smart workaround here (I'm not the author) : https://www.codeproject.com/Tips/5326355/Airspace-Solution It won't solve all the use cases, but for a few of them like overlaying a few controls over the webview2 it does the trick with minimal efforts.

[SHWotever]

Just a little screenshot of the solution above in real situation :

Title, and buttons are integrated using the solution above (https://www.codeproject.com/Tips/5326355/Airspace-Solution)

I had to heavily cheat to detect mouse moves over the webview (used to show the controls) as webview does not forward those events. For those whore are interrested : the GetCursorPos api allows to get the actual cursor position and compare it to the window position (retrieven using getwindowplacement in order to be UI scale independent). Not ideal, but working ...

Overall even if it was requiring lot of workarounds and efforts, the final performance can't compare to cefsharp wpf, and as a bonus it has transparency support which was required in my case.

Obvisouly if a final solution would be available without so many workarounds involved it would be amazing ...

[softworkz]

Obvisouly if a final solution would be available without so many workarounds involved it would be amazing ...

You could try WinUI3 with or without MAUI. There, it's the other way round: You can overlay XAML controls with transparency on top of the WebView without problem, but what doesn't work is to have the WebView overlaid with transparency on top of other controls.

It's a mess - either way...

[veler]

Hello ! I'm struggling with this issue too, I understand that it's tied to the technology also making it faster than some alternatives like CefSharp which uses bitmap as an intermediate transport vector. This other option (cefsharp wpf) is not scaling very well for high performance requirements at large resolutions.

If like me you need the browser to be fullscreen or in a minimal borderless window , it starts to be impossible to arrange a decent UI with the airspace issue.

That said I've found a smart workaround here (I'm not the author) : https://www.codeproject.com/Tips/5326355/Airspace-Solution It won't solve all the use cases, but for a few of them like overlaying a few controls over the webview2 it does the trick with minimal efforts.

@SHWotever finding is AMAZING! It works like a charm. I tested it with WebView2 (BlazorWebView precisely) and it does exactly what I wanted! Thank you so much! This will help with for a side project I have. 😊

To anyone curious at what this solution does and/or needs explanation, here is how it works:

1. The project has a main WPF window with a WebView and a WinForm control (for demo).
2. In the main WPF window, there's also a custom control OverlayControl in which whatever XAML we want can be placed.
3. What this custom control does is create a new WPF Window, set the main WPF window as a parent, and place the XAML inside of that window. The window in question stays on top of everything in your main WPF window, including the WebView.

It's not perfect but this is the best solution I've seen so far!

Advantages of this solution:

1. Performance friendly (we don't generate screenshot of the webview content that we display in the WPF window)
2. WPF controls on top of the WebView can support transparency if needed.
3. WebView itself stays unchanged. We can interact with it as we usually can.

Disadvantages of this solution:

1. This extra window appears in the TaskBar. A very easy fix is to set ShowInTaskbar="False" in the OverlayWindow.
2. Keyboard navigation is difficult. It doesn't look like we can "Tab" to the content of this extra window in a cycle manner. I suspect it can be addressed by manually handling the focus move though.
3. Not very accessibility-friendly in overall. So if accessibility is a big requirement for your project, this may not be an ideal solution.

[benyuz]

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

[iXab3r]

@zhuhaichao518 hi, any updates on this? Technology itself is amazing when combined with blazor and we've already rewritten some parts of my WPF application to use blazor+webview2 and these pieces are now much more responsive and easier to work in general, but I had to implement a few hacks to glue to all together and it would be very cool to finally get an official solution :)

[zhuhaichao518]

I can not promise something like an ETA，what I can share currently is that we have a confirmed implementation path on our side，and I am actively implementing it.

Dmitry Farafonov @.***>于2023年5月28日 周日19:35写道：

@zhuhaichao518 https://github.com/zhuhaichao518 hi, any updates on this? Technology itself is amazing when combined with blazor and we've already rewritten some parts of my WPF application to use blazor+webview2 and these pieces are now much more responsive and easier to work in general, but I had to implement a few hacks to glue to all together and it would be very cool to finally get an official solution :)

— Reply to this email directly, view it on GitHub https://github.com/MicrosoftEdge/WebView2Feedback/issues/286#issuecomment-1566105537, or unsubscribe https://github.com/notifications/unsubscribe-auth/AM4EALECVETCP5RAXWQDTWTXIM2AZANCNFSM4OAAJS5Q . You are receiving this because you were mentioned.Message ID: @.***>

[feipinxiang]

Is there no solution to this problem yet?

[benyuz]

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

[iXab3r]

Really-really needed change. This basically will unlock ability to start gradual migration to blazor in our WPF application. Currently we have to cherry-pick separate windows/components to avoid this problem. @zhuhaichao518 Any ETA will be greatly appreciated and thank you for your efforts!

[CocoDico78]

@zhuhaichao518 any progress on your "active implementation"? Any pre-pre-release version we can try out to give you feedback early?

[benyuz]

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

[ChrisPulman]

Hi, I know that everyone was after my control to solve the ability to have xaml overlaying a WebView2 Wpf control. I have now made it open source within my CrissCross Repository https://github.com/ChrisPulman/CrissCross the package is on nuget as <PackageReference Include="CrissCross.WPF.WebView2" Version="1.0.2" />

I hope that it's as functional as the standard WebView2 control with the additional Content property for overlaying Wpf controls. I will try to get a few other platforms supported such as Avalonia and WinUI.

Sorry I took so long to provide the method I mentioned a few years back in 2020, I was limited by a project using the source code and if I published the source they wouldn't have needed me.

Let me know if there's anything in need of changes outside of the core WebView2 control, PR's would be welcome to improve things and speed the resolution of this long running issue. An example of it's usage:

`

    </rxnav:WebView2Wpf>

` Hopefully this issue will move forward to a resolution soon, whether it's 3rd party solution such as mine or MS finally fixing the core package.

Regards Chris

[schandra09net]

Hi Chris,

That was great, thanks a lot and it is working finally. (The AIRSPACE issue is not observed)

Steps:

1. Create a WPF project (I choose .NET 4.8)
2. Install Nuget packages Microsoft.Web.WebView2 with latest pre-release version 1.0.2065-prerelease
3. Install NuGet package CrissCross.WPF.WebView2 with version 1.0.2.

MainWindow.xaml: `<Window x:Class="WpfApp2.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:rxnav="https://github.com/ChrisPulman/CrissCross" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800">

` **CodeBehind of MainWindows.xaml:** `using System.Windows; namespace WpfApp2 { public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void Button_Click(object sender, RoutedEventArgs e) { WebView2Wpf.CoreWebView2.Navigate("https:/www.microsoft.com"); } } }` Video: 

[ChrisPulman]

@schandra09net glad it helps you, you were the original requester of my code, glad to see you were the first to get it working successfully. Hopefully it will help many others too. Again apologies for the delay in getting a public version of my resolution, it was actually MS who told me how they were doing the WebView2 with HWND so I had hoped there would have been a resolution by MS after my post stating that. At least we have a way forward for the time being with CrissCross. 😊 If your interested in using the CrissCross navigation system then there's also a NavigationWebView2 in the CrissCross.WPF package CrissCross is sat on top of ReactiveUI and designed to be a common navigation system accross all the supported platforms. As I said I will try to get a few other platforms supported as soon as possible. I saw Avalonia was one mentioned here and as this is a Reactive based system and CrissCross has support for Avalonia it makes sense to me to tackle this one next.

[zhuhaichao518]

@CocoDico78 What I can share is I have finished the prototype and share you the recoding (WebView2CompositionControl may not be the final name) and it can be overlayed by native WPF controls (I have not implemented the cursor change event, that is not a problem).

https://github.com/MicrosoftEdge/WebView2Feedback/assets/54018092/af720335-d188-4a9b-9933-f73717b31cf3

Since we are using a different path to implement the control, there are many parts need to be reviewed to ensure this control to be as robust as we can, it still takes time and thanks for your patience.

[jordy-falcon]

@schandra09net glad it helps you, you were the original requester of my code, glad to see you were the first to get it working successfully. Hopefully it will help many others too. Again apologies for the delay in getting a public version of my resolution, it was actually MS who told me how they were doing the WebView2 with HWND so I had hoped there would have been a resolution by MS after my post stating that. At least we have a way forward for the time being with CrissCross. 😊 If your interested in using the CrissCross navigation system then there's also a NavigationWebView2 in the CrissCross.WPF package CrissCross is sat on top of ReactiveUI and designed to be a common navigation system accross all the supported platforms. As I said I will try to get a few other platforms supported as soon as possible. I saw Avalonia was one mentioned here and as this is a Reactive based system and CrissCross has support for Avalonia it makes sense to me to tackle this one next.

Thanks a lot for sharing your code. Avalonia support would be great! 😊

[darbid]

@ChrisPulman thank you for sharing. If I understand your solution correctly the content of your view (which for eg. Could be Native WPF elements)is added to a windows host and webview2 is added to a seperate windows host at startup. Thus the content can now be shown over the top of webview2 as it has its own hwnd?

[ChrisPulman]

@darbid the source is available from src/CrissCross.WPF.WebView2 in the github repo, but in short yes wpf host (root parent) => HWNDhost (child 1) => WebView2 (child 2) => HWNDhost (child 3)=> Wpf Window (child 4) each child has a parent of the previous child to ensure that the Z index is maintained by Windows to keep the layers required intact. The HWNDhost does all the necessary work to keep the layers in place with regards to Height, Width, Top, and Left therefore when the root is resized all it's children automatically follow it's size and positioning. Hopefully this helps you to understand what I have used to solve the problem, I have used this method for many years for web cameras, WindowsForms reports in Wpf and other HWND hosted controls in Wpf where I have wanted to overlay wpf controls.

[M1ch43lS31tz]

Hi guys, I am facing the same problem with the wv2 control being topmost all the time...

In particular: Firstly I have a WPF app with a fly-in/out hamburger menu custom control on the left side, which is also the host on my MainWindow of my tabs in the content area. If I open a tab with a wv2 control in it, the fly-out menu on the left side is always beneath the current active wv2 ctrl tab, which completely disables navigation.

Secondly I have popups which fade out the MainWindow with a certain opacity reduction, to be focused on the opened popup. Sadly if I open a popup, while having a wv2 tab open, everything displayed of the MainWindow gets faded out, except the wv2, which is a bummer. It destroys my user experience intension.

I tried out the provided workaround solutions here in the thread, but it did not solve my issues.

I am really looking forward of a native visual tree recognition of the wv2!

[ChrisPulman]

Hi guys, I am facing the same problem with the wv2 control being topmost all the time...

In particular: Firstly I have a WPF app with a fly-in/out hamburger menu custom control on the left side, which is also the host on my MainWindow of my tabs in the content area. If I open a tab with a wv2 control in it, the fly-out menu on the left side is always beneath the current active wv2 ctrl tab, which completely disables navigation.

Secondly I have popups which fade out the MainWindow with a certain opacity reduction, to be focused on the opened popup. Sadly if I open a popup, while having a wv2 tab open, everything displayed of the MainWindow gets faded out, except the wv2, which is a bummer. It destroys my user experience intension.

I tried out the provided workaround solutions here in the thread, but it did not solve my issues.

I am really looking forward of a native visual tree recognition of the wv2!

Did you try CrissCross.WPF.WebView2? If you did, do you have a example repo that demonstrates what your trying to achieve so I can try to help solve your issue, obviously I can't guarantee that I will be successful?

[darbid]

In particular: Firstly I have a WPF app with a fly-in/out hamburger menu custom control on the left side, which is also the host on my MainWindow of my tabs in the content area. If I open a tab with a wv2 control in it, the fly-out menu on the left side is always beneath the current active wv2 ctrl tab, which completely disables navigation.

Sounds like you are using Mahapps or in any case I see you have 3 options. (using Mahapps or something similar) your flyouts are native WPF and will never show up on a screen in windows in front of webview2 unless they are either put into something else first or webview 2 does not share the same screen area that your flyout does. Soooo (1) you put your fly-in/out hamburger menu as content of Webview2 and the CrissCross magic will take care of putting this content into a container that shows on top of webview2, I would however be surprised if it works (nothing to do with crisscross), you most likely will have sizing issues and the animations will look clunky (just a guess). (2) for the Hamburger control simply move everything including the webview2 to the right when it fully opens on the left hand side. Now it does not share the same space as webview2 and will show up. The 3rd option if you are not using Mahapps is that you put your flyouts in a WPF popup control as this has a "window" as container and that container will show up on top of Webview2.

Secondly I have popups which fade out the MainWindow with a certain opacity reduction, to be focused on the opened popup. Sadly if I open a popup, while having a wv2 tab open, everything displayed of the MainWindow gets faded out, except the wv2, which is a bummer. It destroys my user experience intension.

Are you using Mahapps dialogs here too? They come to the front with a blurred/dark background fade. In any case you are seeing the same issues, the real WPF things behave properly but webview2 does not. Putting the popup you talk about into the content of Webview2 and using crisscross may well work. In this case you do not say if the popup is viewable but I assume that is not the problem. The best solution in this case is that on wanting to present your popup, you take a full screen shot of your WPF window. You then replace your whole window with that screen shot and collapse everything else including Webview2. As you are now back to real native WPF things your content will show with a nice experience. Of course when the user dismisses your popup then the process is reversed. There is a github example of this, search in github for "AirHack" I think. The 3 smallish issues I have with this is that it will only work for modal popups ie. where nothing else should be done while the popup is showing, further I am not sure my image I take is perfectly clear and lastly if the user has a small window when you take the screen shot and then moves it to a new screen that is larger the image does not look great in the background.

[M1ch43lS31tz]

Did you try CrissCross.WPF.WebView2? If you did, do you have a example repo that demonstrates what your trying to achieve so I can try to help solve your issue, obviously I can't guarantee that I will be successful?

Hi @ChrisPulman, thank you for your reply. I tried out https://www.codeproject.com/Tips/5326355/Airspace-Solution, putting my controls the way its described in the solution. This at least, did not address the flyout submerge behavior of my navigation menu with respect to the wv2 control, nor the popup mechanic I was talking about (fade out/in MainWindow on popup open/close) At first sight, your provided solution CrissCross seemed to have a similar approach, so I haven't checked it out yet. Doesn't it simply allow nested WPF controls inside the CrissCross.WebView2 to be present above? If yes, it won't help me fixing the issues, since I don't have this controls setup. If no, I will definitely dig deeper into it and try it out! I will try to provide a minimal version as an example repository.

Hi @darbid, thank you for the detailed comment! I am actually using mostly DevExpress WPF controls to build my app. Particularly the HamburgerMenu from DX. The webview2 control is part of a tab (UserControl) of a TabbedDocumentHost (TabbedDocumentUIService) inside the HamburgerMenu navigation content. So I am not able to build everything around a single webview2 as you described in (1). For (2) this is already the case: my content area (tab control) gets moved to the right, when the main menu, which is by default compact inline, gets enlarged to "normal" inline. The problem exists with submenus. With submenus there is no possibility on the part of DX to also display the submenus inline, so that the content is pushed even further to the right. The default behavior of submenus is a flyout behavior. A ticket I created at DX is currently open in this regard. For (3) I can not image how to realize it with my current settings.

Regarding your reply to the popups: Nice approach with this screenshot mechanic/hack. I thought about it, also in combination with the collapsing of the webview2 while presenting the screenshot. But it seems too hacky for me at the moment. I would need to take care of various (side) effects. Btw, I am not using Mahapps or their dialogs, I implemented my own non-/modal popups behavior for that purpose. The main problem here is that I have popups that can be called outside the webview2 control tab. E.g. in the MainWindow window bar.

[darbid]

Good luck with the ticket. The Air Space issue is an intentional issue known by Microsoft for years. The old Webbrowser control was built by Microsoft the same way as webview1 and webview2, all the same way with the same way for wpf.

In short you submenus need to either appear over the top of main menus or in a wpf popup eg. Context menu.

For your dialogs there's not much you can do. You need to get rid of the webview2 to really get nice opacity animations etc.

[ccifra]

@zhuhaichao518 have you made any progress on your implementation? I am starting work on what may be a similar solution, but if you have something already that would be great. If it is still a work in progress I may be able to help contribute. I am planning on rendering into a WPF bitmap using the windows screen capture APIs, then routing mouse and keyboard back to the real WebView control. I would like to only use visual rendering but it does not look like you can send keyboard events to a WebView2 that is using visual rendering.