Search code examples
c#.netwpfxamlstackpanel

Override MediaElement on top of Webview2

I created a WPF project in which I need display two StackPanels like this:

Two StackPanels: One yellow StackPanel (stackPanel1) with a red StackPanel (stackPanel2 on top of it in its left half with a margin around.

This screen is child of main Grid

StackPanel 1 will be displayed without any alternation of width and height and I need to display the entire second StackPanel on top of previous StackPanel. Using Canvas and DockPanel doesn't help me in this case.

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

  • I agree with @thatguy answer , if we use the zIndex we can overlap the element in WPF, But the question here is related to webview2 and mediaElement. As of now webview2 not allow another element to come on top. So there is no way to display your mediaElement on top of webview as of now. Reffer to this Link for this issue : Webview2 issue

    You can try to display mediaElement using popup but this will give other problems I think this is the only answer to your question right now .