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

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.
Change the selected item's background and foreground.
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.