WebBrowser overlaps other controls in WPF?

[sukesh-ak]

I am looking to display some WPF controls as overlay on top of web browser control.
The moment you add webbrowser control, all other controls on the Page seize to exist.

Is this a bug or how the control will be in future too?

AB#25254665

[oggy22]

Maybe you need bring to front for these other controls i.e. Z-dimension?

[sukesh-ak]

Looks like it doesn't work. If I replace webbrowser control with any other control it works fine and shows behind the overlay.
I guess Z index happens according to the order in which controls are defined in XAML.

[sukesh-ak]

Bing has a WPF Map control , but Azure Maps does not have one.

The only way I saw is to use the webbrowser control for Azure Maps.

[oggy22]

So if Canvas.ZIndex doesnt work it is possible that it is a bug on our end. We will investigate. Thank you for reporting it!

Any chance you tried the same on Winforms?

[sukesh-ak]

There are discussions about this with the old Edge here and here

If nothing has changed from old Edge to new Edge on how the control is hosted in WinForms/WPF then its a terrible issue.

[darbid]

@sukesh-ak unfortunately you have hit the well know airspace problem that appears to have the status at Microsoft of „will not fix“ and more recently as they yet again fake a WPF control by just using the winforms one — making the status for improving WPF to „we don’t care“. The only True WPF Control for a Webbrowser is called Cefsharp.

[sukesh-ak]

@sukesh-ak unfortunately you have hit the well know airspace problem that appears to have the status at Microsoft of „will not fix“ and more recently as they yet again fake a WPF control by just using the winforms one — making the status for improving WPF to „we don’t care“. The only True WPF Control for a Webbrowser is called Cefsharp.

Will check Cefsharp. Thanks you.

[champnic]

@darbid We're sorry you feel that way. Is there some indication you received that this was a "Won't Fix" issue for WebView2? Can you help me understand the difference between a "fake" WPF control and a "real" one?
@sukesh-ak The airspace issue is currently being tracked on our backlog.

[sukesh-ak]

Thanks @champnic
Is there another issue I can subscribe to get notified when this issue is addressed?

[darbid]

Oh @champnic I too feel your sorrows of the last 10 to 14 years on this issue. But as you asked the question I am happy to help. For the people landing here from a google search lets have a deeper dive into these sorrows;….and also give people more of an understanding of what they are getting themselves into before they spend too much effort on it.

Of course to answer your question this could be a highly technical answer which revolves around how WPF and win32 ("Windows") are displayed and also the issue known as Airspace. People can search for these on Google to get more info. I will also add some links as well.

For the people new here and who might implement this code hoping for a fix here is an analogy of Microsoft’s WPF webbrowser control history. You decide if they will fix it.

Imagine you wish to put up a picture on your thormo-insulated double brick wall. You call your handyman and he says we can put in a special fixture to the brick wall through the use of a drill to add a new function to your wall. That function being a hook.
You then call the Microsoft Handyman because it is a big trusted company and ask him to add a picture to your wall. Microsoft gets out the saw and cuts a huge hole in your beautiful wall. They then put in a piece of iron sheeting with the hook attached to it. But so that it all looks good they dress up or disguise the iron to look like your wall by putting some brick wallpaper around it and fixing it to your existing wall very professionally. All good, right? Your picture is hung and it looks perfect. Not too long after cracks start appearing in your wall. The iron expands and contracts based on the temperature of the day differently to the brick wall, causing performance problems. Moisture also gets into the iron and rust stains start running down your wall. There is a problem. Now imagine that the Microsoft handman FIRST did this method of adding iron in 2006/7 and people complained for years about it. In 2012 the Microsoft handyman thought about fixing the problems but then decided not to. Then in 2015 or soon after the Microsoft handymen is asked again to hang a picture and they continue to cut a huge hole in the wall and put in iron. Then again in 2019 the Microsoft handymen had the opportunity to hang another picture differently, but again they cut a hole in the wall and put in iron. All along the Microsoft handymen knew the problems it causes but instead of doing something new they continued, knowing the problems, to do the same thing for over 10-14 years.

In order to bring this back to software. The first time Microsoft advertised a WPF webbrowser functionality was with the control known as the "webbrowser control" which i assume was around the beginning of WPF (not sure on the exact date but lets say 2006/7). This webbrowser control is simply the winforms control wrapped/disguised/faked (more about this word later too) as a WPF control. In 2012 Microsoft had a really good honest attempt in .net 4.5 beta to fix the problem, but never went through with it. Further Microsoft was asked soon after that in their uservoice (you know the place where they listen to users) to fix the issue in March 2012 and the request was declined without any reason. Strangely that post has been deleted by Microsoft (not intentionally of course) but I have added an image of the post. Notice the big red DECLINED.

So it is a matter of opinion but the words I would use is "Won't fix" but you make up your own mind. By the way to complete the software history, the original Microsoft Edge also was to get WPF browser functionality and it too was a wrapped/disguised/faked win32 window / winforms control, this was in or around 2015. And of course last year 2019 it was decided again to continue to implement the same problems with WebView2 as a result of Microsoft very strangely downing tools on years of Edge development and simply reusing the open source Chromium browser.

The use of the word fake. Lets first make it non-technical with an analogy;

Imagine a company took Hyundai cars from Korea and then replace the full interior and exterior parts of the car with Porsche. They then sit it in the car yard and call it a Porsche. It looks like a Porsche. All the “properties” you touch with your hands like the steering wheel and gear leaver/stick and door handles are all Porsche, right? Exposed to you the user is Porsche. Now drive it and honestly say it is a Porsche. Have a look under the hood? What would you call this?

The WPF Browser thing called Webview2 is exposed to the user with all the bells and whistles (functions and methods) of WPF. But look under the hood and it is a child window (aka old win 32 technology using a totally different method to display things) and thus when you use it, it performs like a Winforms control. In the words of one of the writers linked below “it is a black hole for your application”.

WPF sports some great performance features like resizing, rotation, skewing, changing opacity or visual brushes (all WPF features), but try them out on the WebView2 WPF thing. There is also another post here too on making the window transparent. You can forget it if WebView2 is on the window. And as the original poster pointed out try to add a WPF control (for lack of better word real WPF control) over the top of a WebView2 and nothing happens. This is because you cannot add WPF over the top of win32 ("Windows") thus I conclude that WebView2 is simply another control or child window dressed up/disguised or faked to look like WPF. But it is a matter of opinion and how dramatic you want to be. Maybe you could get your French or German PR colleagues to find a word and then use that. The leather industry had great success is selling fake leather as Faux leather. :-). MS could release the WPF Vortäuschte Autocomplete Textbox etc etc and WPF would flourish in new controls.

I love WPF. I can create some beautiful UI and as a kind of hobby programmer who creates small bits of software to help me at work I use it. I also use Microsoft technologies because I know that my colleagues who want to use my things can simply use it because they have a Microsoft operating system and all the dependencies etc are pre-installed. But please consider this. As of July 2020 WebView2 is not shipping to Win10 but it appears it will be installed with the installation of Edge Chromium browser. Given that Microsoft’s Browser popularity/usage is now in the single digits ie. less than 10% the advantage of knowing that my WPF application with a WebView2 control on it always works in a Microsoft Operating System is almost gone. If you are planning on using the Webview2 control in the future you will surely also have to get the user to first install the Microsoft Browser. Therefore this advantage has almost dried up and using 3rd party code like CEFSharp becomes more attractive. At least you know you have to install the dependencies.

I am really interested to hear your answer @champnic to the question "Is there another issue I can subscribe to get notified when this issue is addressed"? Where is the link @champnic :-). If there is not a link will you open one?

A few links on mixing WPF with Win32 and/or Airspace.

https://dzone.com/articles/wpf-45-%E2%80%93-part-8-solving
https://stackoverflow.com/questions/9535167/has-airspace-support-definitely-been-dropped-in-wpf-4-5
https://docs.microsoft.com/en-us/archive/blogs/dwayneneed/mitigating-airspace-issues-in-wpf-applications

[sukesh-ak]

Here is a practical example I was trying to find a solution for.

In the screenshot I am using a static image as a background which needs to be changed to Interactive map under the overlay visible at the bottom.

Since the backend is on Azure and I am using Azure Maps, there are no options to have the Map inside an App other than using Web-browser control in WPF/UWP.

This issue reported is a blocker for anyone trying to use Azure Maps in an application with a WPF/UWP control overlay (visible at the bottom) like in the screenshot below.

[image removed since I moved on]

[darbid]

If you really still want to use the Webview2 it is impossible to have the bottom overlays as WPF controls on top. I think you have 2 options all with their own problems.

1. make each of those overlays a wpf popup control. But this creates a whole lot of other problems.

2. This is more of a hack, but in your XAML put your overlays in their right position UNDERNEATH your webview2. Then you need to subclass the Webveiw2 window, you will have to find the HWND. I think you listen for the WM_NCCALCSIZE message and then you "cut a hole" in your webview2 window so that your WPF controls show :-) To do this you use the WinApi to create a rectangle with CreateRectRgn, then you combine this rectangle with the win API CombineRgn and then SetWindowRgn. But this is truely a hack. It will make resizing slow and you will not be able to move your WPF controls. Also your beautiful opacity you use on the overlays are impossible. I have "cut a hole" in the WindowsFormsHost. You may find the WebView2 has been played with and does not pump messages the same as WindowsFormsHost and or Microsoft may make it difficult to find the correct windows handle to subclass. Thus I would suggest you try the WindowsFormsHost instead.

[sukesh-ak]

@darbid Thanks for your time.

I tried the WPF popup control route and its messy. Thinking of ditching Azure Maps for now and also moving to UWP (for pen and other support options) which opens up better options to solve this issue.

1. UWP Map control which uses Bing Maps (not sure if it supports GeoJson, yet to check)
2. SyncFusion Maps control which supports multiple map providers and GeoJson support. They also have a community license which is good for me to start with for free.

I am guessing at some point in future, Bing maps will stop API support for applications and move to Azure Maps. If that happens it becomes another step to port again. So Syncfusion option becomes a better route for now..

[champnic]

Thanks @sukesh-ak for the practical example, and thanks @darbid for the detailed write-up! I understand much more about where you're coming from now.

Perhaps we should market WebView2 as a "Genuine WPF Control", to continue borrowing from the leather industry :P
https://bestleather.org/types-of-leather/genuine/

@sukesh-ak We are tracking this ask internally and have it linked to this GitHub issue. We will update this GitHub issue when the code is done, and close it with supported SDK/browser version numbers when it ships.

@darbid We are aware of the challenges with distribution of support for WebView2, and are weighing our options between inbox support from Edge, the runtime, and having to install the dependencies through an installer. Our ideal goal is to have WebView2 "just work" on Windows devices without needing extra steps (which you mentioned as a thing you love about .NET) but we're not sure that will be a feasible goal. We're pushing to get as close as possible though.

[darbid]

Genuine Leather is a nice find. Respect.
Genuine Porsche ? I don't think would fly.

Unfortunately I am not sure the software industry has such flexibility. At the end of the day the difference between win32 and WPF is in the way controls are rendered to the display. If the control displays each and every pixel through the use of win32 GDI methods and not with the assistance of WPF directX technology it is not a WPF control.

To be honest (and I am hope I am wrong) it looks like simple laziness or lack of love for WPF. Did the software engineers in the meeting on WebBrowser Control / WebView / Webview2 just say "Stuff it, lets save time, build one control, wrap that control in WPF and lets go play xBox"? :-) The really frustrating thing is that there is no work around for the control, there is no fix. This is evidenced in the efforts indicated in "Mitigating Airspace Issues In WPF Applications".

You are doing a great PR job but I'll bet you a beer that when Microsoft announces an End of Life of WPF this issue will still exist and the WPF control that houses a webbrowser will still have all the problems it has now. I hope I am wrong.

[champnic]

Haha, Xbox is alluring!

I can assure you it's not laziness though - it's mostly the balancing of lots of different priorities (OS, devices, languages, frameworks, etc.) of which WPF is but one, and the airspace issue is but one (quite expensive) problem. It's a pretty fundamental problem though, and is relatively high priority for us. We know a fix is possible because CEF/CEFSharp has it working and we're built on similar internals (Chromium), but we're not sure if the fix is going to be too expensive or complex to maintain on top of a constantly shifting Chromium.

I hope you're wrong too 🤞

[jschroedl]

The WebView/WebBrowser z-order issue is such a long-standing problem in our WPF application. We have to explain to users of our s/w why controls and other things do not show up properly with the embedded browser piece. We have hoped for years and years that this would be fixed with a new browser control. Please, please, please, please, please up the priority on the airspace problems. It is so shocking to me that this would be on a backlog and not a #1 or #2 priority for use.

[julesx]

reading this post makes me sad.
similar things can be said about the MediaElement control.

Just poor wrappers over tech that doesn't quite fit.

[DineshSolanki]

#708

[Seeker9889]

I'm here, trying to figure out why my ScrollView always renders behind my WebView2. Looks like this is "expected," if not the desired eventual behavior. I wish that were different.
Edit: Came back 20 minutes later, having switched over to Cef (which I've used before.) Still wish I could use WebView2, but for now, Cef is letting me put a control behind scrollbars.

[adamfierek]

@champnic

If you don't want to make an real 100% WPF control for webview, you have two possible workarounds:

1. Use modified second WPF Window with some transparency and tracking of parent. Some like on my rusty repo: https://github.com/kolorowezworki/Airhack

2. Make your original control render out of screen and transfer frame stream to WPF Image. This trick is common used in e.g. Opengl wrappers. You will still have to transfer back user input, so it can be a bit more difficult.

[gitmarcalinascris]

Any update with this one?

[Kn4av]

It is really annoying issue for WPF apps. Please fix it.

[ppetrov-dev]

Why it's still open??! Please fix!

[psmulovics]

I suggest reading https://learn.microsoft.com/en-us/dotnet/desktop/wpf/advanced/technology-regions-overview?view=netframeworkdesktop-4.8, explains, why it cannot be solved as of today with this tech stack.

[Sebbstar]

am I wrong, webview uses cef and cef supports offscreen rendering?
cef can rendering offscreen since many years.

[sukesh-ak]

am I wrong, webview uses cef and cef supports offscreen rendering?
cef can rendering offscreen since many years.

Where did you read webview uses cef?

[b-mi]

Year 2023, I am testing the current version of webview2. The problem persists. It looks like a garage job. You don't understand that. I know, kindness is a duty. But sometimes you can't do it, especially when you don't believe how this is possible.

[sukesh-ak]

3yrs ago, this issue was opened by me.

Just to make sure people who stumble upon this does not assumes the status is going to change ever, closing this as

Don’t wait for a fix 👍🏼

[novac42]

Really sorry for the long wait and just wanna say it's our top1 work item in .NET workstream this quarter with devs actively working on it. Currently we have a preliminary solution and working on the detailed design driven by @zhuhaichao518. I will reopen the issue as we do intend to fix it but your disappointment is acknowledged and understood.

[SkyIsWhite]

has anything update？

[novac42]

@SkyIsWhite we had a draft design and still working on implementation. Will update the status once there's further progress to next step.

[simon1689]

Should we give up hope on this or is this ever gonna be solved? This is a major issue for us.

[paulocesarborges]

Any update in this matter?

[champnic]

We had a design review today to close on the general architecture, and reviewed an in-progress prototype displaying a button on top of a WebView2. We have a couple remaining issues to resolve with this, but overall the approach looks promising. I'll reach out when we have code available to try out in a prerelease SDK package. Thanks!

[RenanFasano]

Hi everyone,
has there been any progress on this task? I really need it for work. Thanks.

[ProgrammerLP]

We had a design review today to close on the general architecture, and reviewed an in-progress prototype displaying a button on top of a WebView2. We have a couple remaining issues to resolve with this, but overall the approach looks promising. I'll reach out when we have code available to try out in a prerelease SDK package. Thanks!
@champnic

I really hope that this will work, because it is really inconvenient to hide webview2 separately.
Looking forward to the pre-release version as soon as it is available.
Thank you very much for your efforts!

[JordanSjodinFaithlife]

@champnic is the fix specific to WebView2 or will it work for other Airspace issues with WPF? I'm trying to use the MediaElement from WindowsSDK and running into the same 'always on top' issues.

[paulocesarborges]

Hi Guys! any update in this matter?
Happy 2024 everyone (unless this doesn't come out 🥲)

[simon1689]

Please give us some update

[victorhuangwq]

This is still currently being worked on. We will update on this thread when it's available to be used in the pre-release SDK

[paulocesarborges]

any update?

[Crypties]

@victorhuangwq E.T.A. on availability through the pre-release SDK? Hopefully you can understand we're not asking too much after waiting for more than a decade on this issue. You lost this race against Duke Nukem Forever years ago and AGI-like LLM about 4 years ago, but you still got a shot at it with Half-Life 3 and the singularity, right? ;) Any encouragement at all?

[paulocesarborges]

@victorhuangwq @champnic @novac42
Any update?? Please, say yes.

[champnic]

The code continues to go through code review and testing. You can test out an earlier version of it here:
#286 (comment)

I would estimate it's available for further testing by you all in the next prerelease SDK, or the one after. It's a big rewrite of the control, so expect some to run into some bugs before we push it to the release SDK as well.

[ChrisPulman]

As this is a similar issue to the one I raised some years ago, I figured I should post a solution that may satisfy at least some of those suffering with this issue.

#286 (comment)

[paulocesarborges]

This topic are open for more than 4 years! 🚀🤠
Maybe in the next Olympics we can have the pre-release containing this correction!

[b-mi]

This topic are open for more than 4 years! 🚀🤠 Maybe in the next Olympics we can have the pre-release containing this correction!

In fact, the Microsoft web browser control is unstable even as a pdf browser in a separate WPF window, when deployed in different environments. I can't imagine that I would build some key functionality on this Microsoft component - even if they fix something there. Microsoft is interested in Azure and earnings from it. The development of Visual Studio (full of errors, slow), components (like this one) or Windows OS (it still has windows from Windows 7) has been secondary for decades.