在 Webview2 之上覆盖 MediaElement

Question

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

此屏幕是主网格的子屏幕

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 中定义StackPanels 的顺序很重要。下一项显示在上一项之上。在您的示例中，videoPlayerPanel 将高于web1，因为它是在web1 之后定义的。有两种方法可以改变这种行为。

1. 改变顺序，在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>
   

2. 通过为项目设置 ZIndex 来明确定义 Z-Order。

   获取或设置一个值，该值表示元素出现在 z 平面上的顺序。 [...] 给定元素的值越大，该元素出现在前景中的可能性就越大。

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

Children 集合中具有相等 ZIndex 值的成员按照它们在可视化树中出现的顺序呈现。您可以通过迭代 Children 集合的成员来确定子项的索引位置。

Answer 2

我同意@thatguy 的回答，如果我们使用zIndex，我们可以在WPF 中重叠元素，但这里的问题与webview2 和mediaElement 有关。 截至目前 webview2 不允许另一个元素出现在顶部。 所以到目前为止还没有办法在 webview 上显示你的 mediaElement 。 此问题请参考此链接：Webview2 issue

您可以尝试使用 popup 显示 mediaElement 但这会带来其他问题 我认为这是您现在问题的唯一答案。