UWP自定义媒体控件无法正常工作

Question

下面是我的UWP app媒体元素的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使用ColorBrush中定义的ThemeResource。

您可以在MediaTransportControls styles and templates或 generic.xaml 中找到MediaTransportControls的模板（通常在 {{ 1}} ）搜索“MediaTransportControls”。

形成其模板，我们可以发现其C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic和Background设置为某些Foreground，例如：

ThemeResource

如果我们想要使用<Grid x:Name='ControlPanelGrid' Background='{ThemeResource SystemControlBackgroundChromeMediumBrush}' VerticalAlignment='Bottom' RenderTransformOrigin='0.5,0.5'> 的{​​{1}}和MediaTransportControls属性来自定义媒体传输控制，我们需要将Background或Foreground设置为{{ 1}}。对于某些属性，例如Background，可能很容易。您只需找到名为“ControlPanelGrid”的Foreground并更改其{TemplateBinding Foreground}，如下所示：

Background

但对于像Grid这样的属性来说，这很复杂。因为Background在很多子<Grid x:Name='ControlPanelGrid' Background='{TemplateBinding Background}' VerticalAlignment='Bottom' RenderTransformOrigin='0.5,0.5'> 中定义，并且它们在不同的样式中具有不同的值。在WinRT中，它不支持Setter.Value的绑定用法。所以你必须逐个设置Foreground。我在Foreground中使用了Style，例如：

{TemplateBinding Foreground}

在此之后，您可以将此样式放在AppBarButton中，并为此<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属性中设置的颜色。