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.