UWP 自定义媒体控件不起作用

Question

下面是我的 UWP 应用程序媒体元素的 XAML 代码，但它没有提供自定义媒体控件，这是为什么？

     <MediaElement x:Name="Media" Grid.Row="1" AutoPlay="True" AreTransportControlsEnabled="True" >
            <MediaElement.TransportControls>
                <MediaTransportControls Background="#FFF5F509" Foreground="#FF0625EA"/>
            </MediaElement.TransportControls>

     </MediaElement>

Answer 1

虽然MediaTransportControls有Background和Foreground属性，但是设置这些属性不会影响MediaTransportControls的外观。因为默认情况下 MediaTransportControls 使用 ThemeResource.

中定义的 ColorBrush

您可以在 MediaTransportControls styles and templates 或 generic.xaml 中找到 MediaTransportControls 的模板（典型的 C:\Program Files (x86)\Windows Kits\DesignTime\CommonConfiguration\Neutral\UAP.0.10240.0\Generic) 搜索 "MediaTransportControls".

从它的模板中，我们可以发现它的Background和Foreground设置为一些ThemeResource如：

<Grid x:Name='ControlPanelGrid'
            Background='{ThemeResource SystemControlBackgroundChromeMediumBrush}'
            VerticalAlignment='Bottom'
            RenderTransformOrigin='0.5,0.5'>

如果我们想使用MediaTransportControls的Background和Foreground属性来自定义媒体传输控制，我们需要将Background或Foreground设置为{TemplateBinding Foreground}。对于一些属性，例如 Background，这可能很容易。您只需要找到名为 "ControlPanelGrid" 的 Grid 并更改其 Background 如下所示：

<Grid x:Name='ControlPanelGrid'
            Background='{TemplateBinding Background}'
            VerticalAlignment='Bottom'
            RenderTransformOrigin='0.5,0.5'>

但对于像 Foreground 这样的属性，它很复杂。因为 Foreground 定义在很多子 Style 中，它们在不同的 Style 中有不同的值。在 WinRT 中，它不支持 Setter.Value 的绑定用法。所以你得一一设置{TemplateBinding Foreground}。这里我用AppBarButton in <CommandBar.PrimaryCommands> 例如：

<AppBarButton x:Name="StopButton"
              Foreground="{TemplateBinding Foreground}"
              Icon="Stop"
              MediaTransportControlsHelper.DropoutOrder="1"
              Style="{StaticResource AppBarButtonStyle}"
              Visibility="Collapsed" />
<AppBarButton x:Name="RewindButton"
              Foreground="{TemplateBinding Foreground}"
              MediaTransportControlsHelper.DropoutOrder="2"
              Style="{StaticResource AppBarButtonStyle}"
              Visibility="Collapsed">
    <AppBarButton.Icon>
        <FontIcon Glyph="&#xEB9E;" />
    </AppBarButton.Icon>
</AppBarButton>
...

在此之后，您可以将此样式放在 <Application.Resources> 中，并给此 style 一个 x:key，如 <Style x:Key="MyMediaTransportControlsStyle" TargetType="MediaTransportControls">。然后你可以在 MediaTransportControls:

中使用这个新样式

<MediaElement x:Name="mediaElement"
              Margin="5"
              HorizontalAlignment="Stretch"
              AreTransportControlsEnabled="True"
              AutoPlay="False">
    <MediaElement.TransportControls>
        <MediaTransportControls Background="Red" Foreground="White" Style="{StaticResource MyMediaTransportControlsStyle}" IsStopButtonVisible="True" IsStopEnabled="True" IsTextScaleFactorEnabled="True" IsPlaybackRateEnabled="True" IsPlaybackRateButtonVisible="True" IsFastForwardButtonVisible="True" IsFastForwardEnabled="True" IsFastRewindButtonVisible="True" IsFastRewindEnabled="True" />
    </MediaElement.TransportControls>
</MediaElement>

MediaTransportControls 将使用您在其 Background 和 Foreground 属性.

中设置的颜色

UWP 自定义媒体控件不起作用

UWP custom media controls not working

xaml

custom-controls

mediaelement

uwp