Place control on top of Microsoft.Toolkit.Wpf.UI.Controls.WebView

Question

<Grid>
    <!-- xmlns:webview="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView" -->
    <webview:WebView ... /> 

    <Grid x:Name="Overlay"
          Panel.ZIndex="1000"
          Background="Red"
          HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>

I am trying to overlay a WebView with another control (Overlay). But it seems that the WebView is always on top of other controls.

Is there a way to place controls on top of a Microsoft.Toolkit.Wpf.UI.Controls.WebView?

Wrap the WPF content in a popup, as shown in this answer here: https://stackoverflow.com/a/1073583/2363460 — Dru Steeby, Feb 25 '19 at 18:22

score 2 · Answer 1 · answered Mar 04 '19 at 14:09

The Webview control is a wrapped UWP control which in turn wraps a win32 component I believe.

Due to airspace problems this control will not support transparency and will always be rendered on top. See here for a better description: https://learn.microsoft.com/en-us/dotnet/framework/wpf/advanced/technology-regions-overview

Although it is possible to run it in a popup as a workaround, it might not be very futureproof: "WebView controls can be hosted in a popup window. We recommend that you do not do this because support for that scenario will soon be disabled for security reasons." See here for more

CefSharp might be a better solution. It it based on Chromium and there is a Nuget package available. In the example below a red grid is rendered over the browser:

<Grid>
    <cefSharp:ChromiumWebBrowser Address="https://github.com/cefsharp/CefSharp/wiki/Frequently-asked-questions" />
    <Grid x:Name="Overlay"
    Height="100"
    Background="Red"
    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>   
</Grid>

Output:

Place control on top of Microsoft.Toolkit.Wpf.UI.Controls.WebView

1 Answers1