在 WPF 中的 MediaElement 顶部呈现按钮答案

【问题标题】：Rendering buttons on top of MediaElement in WPF在 WPF 中的 MediaElement 顶部呈现按钮
【发布时间】：2011-07-16 01:36:09
【问题描述】：

我的 XAML 中有一个 MediaElement 对象，它可以很好地加载我的电影。我想做的是在我的 MediaElement 对象的中心呈现播放、暂停和停止按钮，有点像如果你在网页上嵌入 YouTube 视频，你会在视频的中心看到大的播放按钮。我可以在 WPF 中使用 MediaElement 执行此操作吗？

【问题讨论】：

标签： c# wpf mediaelement

【解决方案1】：

万一其他人需要这样做，我想通了。我只是创建了一个 Canvas 并将 MediaElement 和 Button 都粘贴在 Canvas 内。然后我使用 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>

【讨论】：

【解决方案2】：

或者您需要将 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 [适用于 UWP]）：

【讨论】：