将按钮设置在视频流 [WPF] 的顶部

Question

我在 WPF 应用程序中使用 LibVLCSharp.WPF。
我想在视频上方放一些图标和按钮。
但是在 VideoView 控件加载后，它会覆盖所有内容。

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

Answer 1

RTFM

必须出现在视频顶部的控件应作为 VideoView 元素的子元素放置。

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

避免Canvas，因为它们很笨。

Working example sources based on the manual.

Answer 2

我没用过vlc，如果覆盖了图标，我想应该是window用单独的手柄绘制的。就像 WindowsFormHost 一样。尝试使用Popup控件，它可以显示在任何控件之上。

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

将按钮设置在视频流 [WPF] 的顶部

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

wpf