如何修改 Xbox 上 MediaPlayerElement 的 CCSelectionButton 弹出样式？

Question

如图所示，MediaPlayerElement在XBox上没有友好的UI，跟Apple TV和Android TV比起来太丑了。现在我想要更改 CCSelectionButton 的 Flyout。

更改 selected 项目的背景和前景。
删除默认 select 样式。

我听从了 https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/custom-transport-controls 的建议，但没有发现任何想法。

Answer 1

在默认的MediaTransportControls样式中没有找到相关的样式代码。这应该是由于字幕文件的可变性（每个视频的不同字幕）。是C#代码生成的MenuFlyout，只能通过资源覆盖的方式重写

尝试在 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>

它会覆盖应用程序级别的默认 MenuFlyoutItem 样式，并影响其他 MenuFlyoutItem 样式。

效果图：

如果您不想影响其他MenuFlyoutItem，您可以创建一个默认MenuFlyoutItem样式并将其分配给您需要保持默认样式的其他MenuFlyoutItem。

此致。

如何修改 Xbox 上 MediaPlayerElement 的 CCSelectionButton 弹出样式？

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

xaml

media-player

uwp