In my previous post, Building Media Applications for the Universal Windows Platform (UWP) using the MediaPlayerElement, I covered the basics of building a UWP media application using the MediaPlayerElement. Towards the end of the post I showed how you can override some of the built in behaviour but I was yet to show you how you can adjust the visual style of the player or the controls. In this post I’ll do just that, I’ll show you where to find the built in styles and how to start customizing them, including some gotchas that you should be aware of.
Ok, let’s get started by looking for the built in styles. Whilst Microsoft now do a good job of documenting the built in styles online (for example the styles and templates for the MediaTransportControls element is defined at https://msdn.microsoft.com/en-us/library/windows/apps/mt414180.aspx), there is nothing like looking at what ships in the platform. For this we go to generic.xaml, typically located at C:Program Files (x86)Windows Kits10DesignTimeCommonConfigurationNeutralUAP10.0.16299.0Generic – Note that this may vary based on which platform SDK you have installed. Inside generic.xaml I’m going to locate the Style for the MediaPlayerElement:
<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”>
<Border Background=”Transparent” />
<Image x_Name=”PosterImage”
Visibility=”Collapsed”
Source=”{TemplateBinding PosterSource}”
Stretch=”{TemplateBinding Stretch}” />
<MediaPlayerPresenter x_Name=”MediaPlayerPresenter”
IsFullWindow=”{TemplateBinding IsFullWindow}”
Stretch=”{TemplateBinding Stretch}”
MediaPlayer=”{TemplateBinding MediaPlayer}” />
<ContentPresenter x_Name=”TransportControlsPresenter”
Visibility=”{TemplateBinding AreTransportControlsEnabled}” />
<Grid x_Name=”TimedTextSourcePresenter” />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see, the Style for the MediaPlayerElement is made up of a few different components:
- MediaPlayerPresenter – this is where the actual video content will be displayed
- ContentPresenter – this is where the player controls will be displayed
- “TimedTextSourcePresenter” – this is where the closed captions will be presented
Let’s make a subtle change here by adding another Grid immediately after the TimedTextSourcePresenter with a semi-transparent Pink colour and a TextBlock to indicate that this is a customized player.
<Page.Resources>
<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”>
<Border Background=”Transparent” />
<Image x_Name=”PosterImage”
Visibility=”Collapsed”
Source=”{TemplateBinding PosterSource}”
Stretch=”{TemplateBinding Stretch}” />
<MediaPlayerPresenter x_Name=”MediaPlayerPresenter”
IsFullWindow=”{TemplateBinding IsFullWindow}”
Stretch=”{TemplateBinding Stretch}”
MediaPlayer=”{TemplateBinding MediaPlayer}” />
<ContentPresenter x_Name=”TransportControlsPresenter”
Visibility=”{TemplateBinding AreTransportControlsEnabled}” />
<Grid x_Name=”TimedTextSourcePresenter” />
<Grid Background=”Pink”
IsHitTestVisible=”False”
Opacity=”0.4″>
<TextBlock Foreground=”Black”
Text=”Custom Player” HorizontalAlignment=”Left” VerticalAlignment=”Bottom” Margin=”50,5,5,5″/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Page.Resources>
You’ll notice that I’ve added this Style into the Resources dictionary for the page and that it’s an implicit style (ie I haven’t assigned it a Key) which means that any MediaPlayerElement on this page will pick up this style. You can of course set this Style either directly on the MediaPlayerElement itself or even define it in an application level resource dictionary.
Note also that the IsHitTestVisible attribute is set on the Grid, otherwise it will block user input to the player controls as the grid sits over the top of the other elements within the MediaPlayerElement control template.
If you recall from my previous post I intercepted the behaviour that steps the video back and forward so that I could customize this behaviour. Of course, this means that the step forward/backward icons aren’t accurate, since I’m not longer stepping back by 10seconds and forward by 30seconds. In order to override the icons on these buttons, I need to override the Style for the MediaTransportControls. Again the default Style can be found in generic.xaml – it’s really long, so I’m not going to copy the whole thing in here. Here’s a cut down version of the Style showing the changes to the FontIcon for the SkipBackwardButton and SkipForwardButton.
<Page.Resources>
<Style TargetType=”MediaTransportControls”>
…
<Setter Property=”Template”>
<Setter.Value>
<ControlTemplate TargetType=”MediaTransportControls”>
<Grid x_Name=”RootGrid”
Background=”Transparent”>
…
<AppBarButton x_Name=’SkipBackwardButton’
Style='{StaticResource AppBarButtonStyle}’
MediaTransportControlsHelper.DropoutOrder=’5′
Visibility=’Collapsed’>
<AppBarButton.Icon>
<!–<FontIcon Glyph=”” />–>
<FontIcon Glyph=””
FontFamily=”FontAwesome” />
</AppBarButton.Icon>
</AppBarButton>
…
<AppBarButton x_Name=’SkipForwardButton’
Style='{StaticResource AppBarButtonStyle}’
MediaTransportControlsHelper.DropoutOrder=’5′
Visibility=’Collapsed’>
<AppBarButton.Icon>
<!–<FontIcon Glyph=”” />–>
<FontIcon Glyph=””
FontFamily=”FontAwesome” />
</AppBarButton.Icon>
</AppBarButton>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
You might be wondering where I got the new hex code for the FontAwesome font. Rather than go online and having to hunt down hex values for the different characters within a font, if you open Word and go to Insert, Symbol, you can then select the Font and select the character you want. In the lower right corner it states what the Character code is. Remember that you need to make sure the font exists on the computer you’re going to run the application on, so you may want to consider including the font within your application if you pick a non-standard font.
Ok, so running the application now, we can see the updated skip backward and skip forward buttons:
Unfortunately, here lies a major bug in the implementation of the MediaPlayerElement – if you press the full screen button, you’ll see that the Style for the MediaTransportControls has reverted back to the built in style.
This happens because when the video runs in full screen, the MediaTransportControls are being hosted in a separate visual tree to the main part of the application – you can see this if you look at the Live Visual Tree.
So, the question is how to handle this? Well the good news is that it’s surprisingly simple. What’s happening is that as the MediaTransportControls are being attached to a different visual tree, they’re not able to resolve the Style defined within the scope of the page. Moving the custom Style for the MediaTransportControls to an application level resource fixes this issue.
<Application
x_Class=”PlayerSample.App”
“>“
“>“
RequestedTheme=”Light”>
<Application.Resources>
<Style TargetType=”MediaTransportControls”>
…
</Style>
</Application.Resources>
</Application>
The documentation online at https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/custom-transport-controls indicates that you should use an explicit style – two things a) this doesn’t fix the full screen issue; you must define the Style at an application level regardless of whether you make it an explicit or implicit style and b) you can make the choice yourself whether to use an implcit or explicit style, depending on whether you want multiple different player styles (ie where an explicit style makes sense).