How to change AppBarButton's style of MediaPlayerElement on xbox?

Question

As the picture shows, I want to change MediaPlayerElement's AppBarButton style, something like:

1. Button size, 2x is the best.

2. Remove default focus reveal border.

3. Change the Button to a circle, not rectangle.

4. When a button is focused, change it's background color.

I have followed the advice of https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/custom-transport-controls, but found no idea.

Set CornerRadius will result

Answer 1

In the default style of MediaTransportControls, there is such a snippet:

<!-- New AppBar button style 48x48 pixels in size -->
<Style x:Key="AppBarButtonStyle" TargetType="AppBarButton" BasedOn="{StaticResource AppBarButtonRevealStyle}">
    <Setter Property="Width" Value="{ThemeResource MTCMediaButtonWidth}" />
    <Setter Property="Height" Value="{ThemeResource MTCMediaButtonHeight}" />
    <Setter Property="AllowFocusOnInteraction" Value="True" />
</Style>

If you want a round button, you can modify it like this

<Style x:Key="AppBarButtonStyle" TargetType="AppBarButton" BasedOn="{StaticResource AppBarButtonRevealStyle}">
    <Setter Property="Width" Value="40" />
    <Setter Property="Height" Value="40" />
    <Setter Property="AllowFocusOnInteraction" Value="True" />
    <Setter Property="CornerRadius" Value="20" />
</Style>

If you need to modify more styles, you need to create a copy of the style of the AppBarButton to adjust.

Because the default style code of MediaTransportControls is very large, I put the code of the default style here (which also includes the code of AppBarButtonRevealStyle), you can modify it according to your needs.

---

Update

AppBarButton has its own internal height. If special handling is needed, you must first rewrite the style of AppBarButton

The main display content of AppBarButton is an Icon. In the default style, it is in the ViewBox. We can rewrite its height according to our needs.

You can find the modified code here

<Grid x:Name="ContentRoot" MinHeight="{ThemeResource AppBarThemeMinHeight}" Margin="-1,0">

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Viewbox x:Name="ContentViewbox"
    Height="25"
             VerticalAlignment="Center"
    Margin="0"
    HorizontalAlignment="Stretch"
    AutomationProperties.AccessibilityView="Raw" >
        <ContentPresenter x:Name="Content"
        Content="{TemplateBinding Icon}"
        Foreground="{TemplateBinding Foreground}"/>
    </Viewbox>
    ...
</Grid>

After modifying the code of AppBarButton, we also need to modify some styles of MediaTransportControls

<Style x:Key="AppBarButtonStyle" TargetType="AppBarButton" BasedOn="{StaticResource AppBarButtonRevealStyle}">
    <Setter Property="Width" Value="80" />
    <Setter Property="Height" Value="80" />
    <Setter Property="CornerRadius" Value="40" />
    <Setter Property="AllowFocusOnInteraction" Value="True" />
</Style>

<!-- New CommandBar Style -->
<Style x:Key="CommandBarStyle" TargetType="CommandBar">
    <Setter Property="Height" Value="90" />
    <Setter Property="Background" Value="Transparent" />
</Style>

You can finally get this effect:

Best regards.