在WPF中渲染MediaElement顶部的按钮

本文关键字：顶部 按钮 MediaElement WPF | 更新日期: 2023-09-27 18:02:29

我的XAML中有一个MediaElement对象，它可以很好地加载我的电影。我想做的是在MediaElement对象的中心渲染播放，暂停和停止按钮，有点像如果你在网页上嵌入YouTube视频，你会在视频的中心得到大的播放按钮。我可以使用MediaElement在WPF中做到这一点吗?

在WPF中渲染MediaElement顶部的按钮

以防其他人需要这样做，我想出了办法。我简单地创建了一个画布，并将MediaElement和Button都放在画布中。然后我使用ZIndex来改变ZOrdering，使按钮位于顶部。最后，我将按钮居中置于影片的顶部。下面是XAML:

<StackPanel Orientation="Horizontal" Background="LightGray" DockPanel.Dock="Bottom" Height="100">
        <Canvas Width="100">
            <Button Canvas.ZIndex="2" Canvas.Left="42" Canvas.Top="35">
                <Button.Template>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Polygon Points="0,0 0,26 17,13" Fill="#80000000" Stroke="White" />
                    </ControlTemplate>
                </Button.Template>
            </Button>
            <MediaElement Canvas.ZIndex="1" Canvas.Top="0" Canvas.Left="0" 
                          x:Name="mediaElement1" UnloadedBehavior="Manual" LoadedBehavior="Manual" ScrubbingEnabled="True" 
                          Loaded="mediaElement1_Loaded" Width="100" Height="100">
            </MediaElement>
        </Canvas>
    </StackPanel>

或者您需要将mediaElement和Buttons放到同一个Grid中并设置Canvas。ZIndex大于0:

    <Grid>
        <Button  VerticalAlignment="Center" HorizontalAlignment="Center" Height="50" Width="100" Canvas.ZIndex="1">Button</Button>
        <MediaElement Source="/Assets/ladybug.wmv">
         </MediaElement>
    </Grid>

(实际上你不需要Canvas [works on UWP]):

相关文章：