在 Webview2 之上覆盖 MediaElement

Question

我创建了一个 WPF 项目，我需要在其中显示两个 StackPanel，如下所示：

这个屏幕是主网格的子屏幕

StackPanel 1 将在没有任何宽度和高度交替的情况下显示，我需要在前一个 StackPanel 之上显示整个第二个 StackPanel。在这种情况下，使用 Canvas 和 DockPanel 对我没有帮助。

<Grid>

    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    
    <StackPanel VerticalAlignment="Center" Grid.Row="0" x:Name="web1">
        <wv2:WebView2 Name="MyWebView"
             Height="800" >
        </wv2:WebView2>
    </StackPanel>

    <StackPanel Grid.Row="0" x:Name="videoPlayerPanel">
        <Canvas >
            <local:VideoPlayer x:Name="videoPlayer"  Background="AntiqueWhite"/>
        </Canvas>
    </StackPanel>

</Grid>

Answer 1

在 Grid 中定义 StackPanel 的顺序很重要。下一项显示在前一项之上。在您的示例中，videoPlayerPanel 将在 web1 之上，因为它是在 web1 之后定义的。有两个选项可以改变这种行为。

改变顺序，在web1之前定义videoPlayerPanel，显示在videoPlayerPanel之上的web1。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" x:Name="videoPlayerPanel">
        <Canvas >
            <local:VideoPlayer x:Name="videoPlayer"  Background="AntiqueWhite"/>
        </Canvas>
    </StackPanel>
    <StackPanel VerticalAlignment="Center" Grid.Row="0" x:Name="web1">
        <wv2:WebView2 Name="MyWebView"
             Height="800" >
        </wv2:WebView2>
    </StackPanel>
</Grid>

通过为项目设置 ZIndex 明确定义 Z 顺序。

Gets or sets a value that represents the order on the z-plane in which an element appears. [...] The greater the value of a given element, the more likely the element is to appear in the foreground.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel VerticalAlignment="Center" Grid.Row="0" x:Name="web1" ZIndex="1">
        <wv2:WebView2 Name="MyWebView"
             Height="800" >
        </wv2:WebView2>
    </StackPanel>
    <StackPanel Grid.Row="0" x:Name="videoPlayerPanel">
        <Canvas >
            <local:VideoPlayer x:Name="videoPlayer"  Background="AntiqueWhite"/>
        </Canvas>
    </StackPanel>
</Grid>

默认 ZIndex 为零，这就是为什么 order in the Grid matters.

Members of a Children collection that have equal ZIndex values are rendered in the order in which they appear in the visual tree. You can determine the index position of a child by iterating the members of the Children collection.

Answer 2

我同意@thatguy的回答，如果我们使用zIndex我们可以重叠WPF中的元素，但是这里的问题与webview2和mediaElement有关。截至目前 webview2 不允许另一个元素出现在顶部。因此，目前无法在 webview 之上显示您的 mediaElement。请参阅此 Link 以了解此问题：Webview2 issue

您可以尝试使用弹出窗口显示 mediaElement，但这会带来其他问题我认为这是目前您问题的唯一答案。

在 Webview2 之上覆盖 MediaElement

Override MediaElement on top of Webview2

.net

c#

wpf

xaml

stackpanel