How to modify CCSelectionButton's flyout style of MediaPlayerElement on Xbox?

Question

As the picture shows, MediaPlayerElement has no friendly UI on XBox, it's so ugly comparing to Apple TV and Android TV. Now I want the change the Flyout of CCSelectionButton.

1. Change the selected item's background and foreground.

2. Remove the default select style.

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.

Answer 1

I didn't find the relevant style code in the default MediaTransportControls style. It should be due to the variability of the subtitle file (different subtitles for each video). It is a MenuFlyout generated by C # code, so we can only rewrite it by means of resource coverage.

Try adding the following code in App.xaml:

<Application.Resources>
   <Style TargetType="MenuFlyoutItem">
       <Setter Property="Background" Value="Red" />
       <Setter Property="BorderBrush" Value="{ThemeResource MenuFlyoutItemRevealBorderBrush}" />
       <Setter Property="BorderThickness" Value="{ThemeResource MenuFlyoutItemRevealBorderThickness}" />
       <Setter Property="Foreground" Value="White" />
       <Setter Property="Padding" Value="{ThemeResource MenuFlyoutItemThemePadding}" />
       <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
       <Setter Property="HorizontalContentAlignment" Value="Stretch" />
       <Setter Property="VerticalContentAlignment" Value="Center" />
       <Setter Property="UseSystemFocusVisuals" Value="False" />
       <Setter Property="KeyboardAcceleratorPlacementMode" Value="Hidden" />
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="MenuFlyoutItem">
                   <Grid x:Name="LayoutRoot"
         Padding="{TemplateBinding Padding}"
         Background="{TemplateBinding Background}"
         BorderBrush="{TemplateBinding BorderBrush}"
         BorderThickness="{TemplateBinding BorderThickness}"
         CornerRadius="{TemplateBinding CornerRadius}" >

                       <VisualStateManager.VisualStateGroups>
                           <VisualStateGroup x:Name="CommonStates">
                               <VisualState x:Name="Normal">

                                   <Storyboard>
                                       <PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
                                   </Storyboard>
                               </VisualState>

                               <VisualState x:Name="PointerOver">
                                   <VisualState.Setters>
                                       <Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
                                       <Setter Target="LayoutRoot.Background" Value="{ThemeResource MenuFlyoutItemRevealBackgroundPointerOver}" />
                                       <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource MenuFlyoutItemRevealBorderBrushPointerOver}" />
                                       <Setter Target="IconContent.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundPointerOver}" />
                                       <Setter Target="TextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundPointerOver}" />
                                       <Setter Target="KeyboardAcceleratorTextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemKeyboardAcceleratorTextForegroundPointerOver}" />
                                   </VisualState.Setters>

                                   <Storyboard>
                                       <PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
                                   </Storyboard>
                               </VisualState>

                               <VisualState x:Name="Pressed">
                                   <VisualState.Setters>
                                       <Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
                                       <Setter Target="LayoutRoot.Background" Value="{ThemeResource MenuFlyoutItemRevealBackgroundPressed}" />
                                       <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource MenuFlyoutItemRevealBorderBrushPressed}" />
                                       <Setter Target="IconContent.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundPressed}" />
                                       <Setter Target="TextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundPressed}" />
                                       <Setter Target="KeyboardAcceleratorTextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemKeyboardAcceleratorTextForegroundPressed}" />
                                   </VisualState.Setters>

                                   <Storyboard>
                                       <PointerDownThemeAnimation Storyboard.TargetName="LayoutRoot" />
                                   </Storyboard>
                               </VisualState>

                               <VisualState x:Name="Disabled">
                                   <VisualState.Setters>
                                       <Setter Target="LayoutRoot.Background" Value="{ThemeResource MenuFlyoutItemRevealBackgroundDisabled}" />
                                       <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource MenuFlyoutItemRevealBorderBrushDisabled}" />
                                       <Setter Target="IconContent.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundDisabled}" />
                                       <Setter Target="TextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemForegroundDisabled}" />
                                       <Setter Target="KeyboardAcceleratorTextBlock.Foreground" Value="{ThemeResource MenuFlyoutItemKeyboardAcceleratorTextForegroundDisabled}" />
                                   </VisualState.Setters>
                               </VisualState>

                           </VisualStateGroup>
                           <VisualStateGroup x:Name="CheckPlaceholderStates">
                               <VisualState x:Name="NoPlaceholder" />
                               <VisualState x:Name="CheckPlaceholder">
                                   <VisualState.Setters>
                                       <Setter Target="TextBlock.Margin" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
                                   </VisualState.Setters>
                               </VisualState>
                               <VisualState x:Name="IconPlaceholder">
                                   <VisualState.Setters>
                                       <Setter Target="TextBlock.Margin" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
                                       <Setter Target="IconRoot.Visibility" Value="Visible" />
                                   </VisualState.Setters>
                               </VisualState>
                               <VisualState x:Name="CheckAndIconPlaceholder">
                                   <VisualState.Setters>
                                       <Setter Target="TextBlock.Margin" Value="{ThemeResource MenuFlyoutItemDoublePlaceholderThemeThickness}" />
                                       <Setter Target="IconRoot.Margin" Value="{ThemeResource MenuFlyoutItemPlaceholderThemeThickness}" />
                                       <Setter Target="IconRoot.Visibility" Value="Visible" />
                                   </VisualState.Setters>
                               </VisualState>

                           </VisualStateGroup>
                           <VisualStateGroup x:Name="PaddingSizeStates">
                               <VisualState x:Name="DefaultPadding" />
                               <VisualState x:Name="NarrowPadding">

                                   <Storyboard>
                                       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Padding">
                                           <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource MenuFlyoutItemThemePaddingNarrow}" />
                                       </ObjectAnimationUsingKeyFrames>
                                   </Storyboard>
                               </VisualState>

                           </VisualStateGroup>
                           <VisualStateGroup x:Name="KeyboardAcceleratorTextVisibility">
                               <VisualState x:Name="KeyboardAcceleratorTextCollapsed" />
                               <VisualState x:Name="KeyboardAcceleratorTextVisible">
                                   <VisualState.Setters>
                                       <Setter Target="KeyboardAcceleratorTextBlock.Visibility" Value="Visible" />
                                   </VisualState.Setters>
                               </VisualState>

                           </VisualStateGroup>

                       </VisualStateManager.VisualStateGroups>

                       <Grid.ColumnDefinitions>
                           <ColumnDefinition Width="*" />
                           <ColumnDefinition Width="Auto" />
                       </Grid.ColumnDefinitions>
                       <Viewbox x:Name="IconRoot" 
                       HorizontalAlignment="Left"
                       VerticalAlignment="Center"
                       Width="16" 
                       Height="16"
                       Visibility="Collapsed">
                           <ContentPresenter x:Name="IconContent"
             Content="{TemplateBinding Icon}"/>

                       </Viewbox>
                       <TextBlock x:Name="TextBlock"
           Text="{TemplateBinding Text}"
           TextTrimming="Clip"
           Foreground="{TemplateBinding Foreground}"
           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
           VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                       <TextBlock x:Name="KeyboardAcceleratorTextBlock"
                       Grid.Column="1"
                       Style="{ThemeResource CaptionTextBlockStyle}"
                       Text="{TemplateBinding KeyboardAcceleratorTextOverride}"
                       MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.KeyboardAcceleratorTextMinWidth}"
                       Margin="24,0,0,0"
                       Foreground="{ThemeResource MenuFlyoutItemKeyboardAcceleratorTextForeground}"
                       HorizontalAlignment="Right"
                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                       Visibility="Collapsed"
                       AutomationProperties.AccessibilityView="Raw" />

                   </Grid>

               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>
</Application.Resources>

It overwrites the default MenuFlyoutItem style at the application level, and affects other MenuFlyoutItems.

Effect picture:

If you don't want to affect other MenuFlyoutItem, you can create a default MenuFlyoutItem style and assign it to other MenuFlyoutItem that you need to keep the default style.

Best regards.