Set the button on top of the video streaming[WPF]-CodePudding

I use LibVLCSharp.WPF in a WPF application.
I want to put some icons and buttons above the video.
But after the VideoView control has loaded, it overwrite everything.

<Canvas Width="325" Height="182">
    <Image Source="/Resource/BgLoading_1.png"
           Width="325"
           Height="182"
           Stretch="Fill"
           StretchDirection="Both"
           HorizontalAlignment="Center"
           VerticalAlignment="Center"
           Panel.ZIndex="0"
           Visibility="Visible" />

    <fa:ImageAwesome Foreground="White"
                     Icon="Spinner"
                     Spin="True"
                     Height="48"
                     Width="48"
                     Visibility="{Binding LoadImageStatus}"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
                     Canvas.Left="139"
                     Canvas.Top="67" />

    <Image x:Name="imgLeftIcon"
           Width="30"
           Height="30"
           Source="{Binding LeftIconSource}"
           Stretch="Fill"
           HorizontalAlignment="Left"
           VerticalAlignment="Top"
           Margin="10,10,10,10"
           Visibility="{Binding LeftIconStatus}"
           Panel.ZIndex="2" />

    <Image x:Name="imgRightIcon"
           Width="30"
           Height="30"
           Source="{Binding RightIconSource}"
           Stretch="Fill"
           Margin="285,10,10,142"
           Visibility="{Binding RightIconStatus}"
           Panel.ZIndex="2" />

    <!--Video-->
    <vlc:VideoView Grid.Row="0"
                   Height="182"
                   Width="325"
                   Visibility="{Binding VideoPlayerStatus}"
                   Panel.ZIndex="1" />
</Canvas>

CodePudding user response：

RTFM

The controls that must appear on top of the video should be placed as children of the VideoView element.

<Window ...
        xmlns:vlc="clr-namespace:LibVLCSharp.WPF;assembly=LibVLCSharp.WPF"
        ...>

    <Grid>
        <vlc:VideoView x:Name="VideoView">
            <Button x:Name="PlayButton"
                    Click="PlayButtonOnClick"
                    Content="Play"
                    Margin="8"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Bottom" />
        </vlc:VideoView>
    </Grid>
</Window>

Avoid Canvas since they are pretty dumb.

Working example sources based on the manual.

CodePudding user response：

I haven't used vlc, if it covers the icons, I think it should be a window drawn with a separate handle. just like WindowsFormHost. try use Popup control, it can be displayed on top of any control.

 <Grid>
        <!--video control-->
        <Grid Name="video">
            <!--Video-->
            <vlc:VideoView Grid.Row="0"
                   Height="182"
                   Width="325"
                   Visibility="{Binding VideoPlayerStatus}"
                   Panel.ZIndex="1" />
        </Grid>

        <Popup PlacementTarget="{Binding ElementName=video}" Placement="Center">
            <Grid>
                <Image x:Name="imgLeftIcon"
           Width="30"
           Height="30"
           Source="{Binding LeftIconSource}"
           Stretch="Fill"
           HorizontalAlignment="Left"
           VerticalAlignment="Top"
           Margin="10,10,10,10"
           Visibility="{Binding LeftIconStatus}"
           Panel.ZIndex="2" />
            </Grid>
        </Popup>
    </Grid>