将控件放在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>

我正在尝试将WebView与另一个控件（Overlay）覆盖。但是似乎WebView总是位于其他控件之上。

是否可以将控件放置在Microsoft.Toolkit.Wpf.UI.Controls.WebView之上？

Answer 1

Webview控件是一个wrapped UWP control，它依次包装了一个Win32组件。

由于空域问题，该控件将不支持透明性，并且始终显示在顶部。请参阅此处以获得更好的描述： https://docs.microsoft.com/en-us/dotnet/framework/wpf/advanced/technology-regions-overview

尽管可以使用run it in a popup as a workaround，但它可能不是很适合将来使用： “可以在弹出窗口中托管WebView控件。我们建议您不要这样做，因为出于安全原因，不久将禁用该方案的支持。” See here for more

CefSharp可能是一个更好的解决方案。它基于Chromium，并且提供Nuget软件包。在下面的示例中，在浏览器上呈现了一个红色网格：

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

输出：