UWP MediaPlayerElement 防止传输控件重叠视频答案

【问题标题】：UWP MediaPlayerElement keep Transport Controls from Overlapping videoUWP MediaPlayerElement 防止传输控件重叠视频
【发布时间】：2020-05-19 05:19:21
【问题描述】：

我正在构建一个通用的 Windows 媒体播放器应用程序。试图从 MediaPlayerElement 获取传输控件，使其永远不会与正在播放的视频重叠。目前，控件可以像这样与媒体重叠：

How it works now

我希望播放器窗口看起来像这样：

How I would like it to work

我基本上想在包含视频的框的底部添加边距。有什么方法可以在不处理传输控件的情况下处理包含视频的框？

谢谢！

【问题讨论】：

你的意思是你想让Transport Controls的背景透明？
嘿！我最初的目标是确保传输控件永远不会与我在此处的帮助下实现的视频重叠。但我也一直在尝试使用自定义样式解决传输控制背景问题，但没有成功。有什么想法吗？

标签： c# xaml uwp

【解决方案1】：

UWP MediaPlayerElement 防止传输控件重叠视频

对于场景，您可以通过自定义MediaPlayerElement 样式来实现此功能。请检查以下样式我在默认样式中添加了两行并将TransportControlsPresenter 放入第二行。

<Style TargetType="MediaPlayerElement">
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalAlignment" Value="Stretch" />
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="MediaPlayerElement">
                <Grid x:Name="LayoutRoot">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="auto" />
                    </Grid.RowDefinitions>
                    <Border Background="Transparent" />
                    <Image
                        x:Name="PosterImage"
                        Source="{TemplateBinding PosterSource}"
                        Stretch="{TemplateBinding Stretch}"
                        Visibility="Collapsed"
                        />
                    <MediaPlayerPresenter
                        x:Name="MediaPlayerPresenter"
                        IsFullWindow="{TemplateBinding IsFullWindow}"
                        MediaPlayer="{TemplateBinding MediaPlayer}"
                        Stretch="{TemplateBinding Stretch}"
                        />
                    <ContentPresenter
                        x:Name="TransportControlsPresenter"
                        Grid.Row="1"
                        Visibility="{TemplateBinding AreTransportControlsEnabled}"
                        />
                    <Grid x:Name="TimedTextSourcePresenter" />

                </Grid>

            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【讨论】：

这是完美的。谢谢！我一直在通过在 MediaPlayerPresenter 周围添加边距来做到这一点，但是将 ContentPresenter 放在它自己的网格中效率更高。