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使用ColorBrush定义的ThemeResource.

您可以MediaTransportControls在MediaTransportControls样式和模板或generic.xaml(典型C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.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,它可能很容易.您只需找到Grid名为"ControlPanelGrid"并更改Background如下:

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

但对于这样的财产来说Foreground,它很复杂.因为Foreground在很多子中定义Style并且它们在不同的样式中具有不同的值.在WinRT中,它不支持Setter.Value的绑定用法.所以你必须{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会使用在其设置的颜色Background和Foreground属性.