UWP custom media controls not working

Question

below is the XAML code for my UWP app media element , but its not giving the customized media controls, why is that?

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

     </MediaElement>

Answer 1

Although MediaTransportControls has Background and Foreground properties, but setting these properties won't affect the appearance of MediaTransportControls. Because by default MediaTransportControls uses ColorBrush defined in ThemeResource.

You can find MediaTransportControls's template at MediaTransportControls styles and templates or in generic.xaml (typical in C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic) search "MediaTransportControls".

Form its template, we can find its Background and Foreground are set to some ThemeResource such as:

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

If we want to use MediaTransportControls's Background and Foreground properties to customize media transport control, we need set Background or Foreground to {TemplateBinding Foreground}. For some property, such as Background, it may be easy. You just need find the Grid named "ControlPanelGrid" and change its Background like following:

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

But for the property like Foreground, it's complex. Because the Foreground is defined in a lot of sub Style and they have different value in different Styles. And in WinRT, it doesn't support a Binding usage for Setter.Value. So you have to set {TemplateBinding Foreground} one by one. Here I use AppBarButton in <CommandBar.PrimaryCommands> for example:

<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>
...

After this, you can put this style in <Application.Resources> and give this style a x:key like <Style x:Key="MyMediaTransportControlsStyle" TargetType="MediaTransportControls">. Then you can use this new style in 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>

The MediaTransportControls will use the color you set in its Background and Foreground property.