CODEWITHSUNDEEP
wpfwebviewwindows-community-toolkit
Alexander
Alexander

Reputation: 1515

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

<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?

Upvotes: 2

Views: 1314

Answers (1)

TheMachinist
TheMachinist

Reputation: 338

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:

Cefsharp

Upvotes: 2

Related Questions