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

Question

如图所示，MediaPlayerElement在XBox上没有友好的UI，与Apple TV和Android TV相比，它是如此丑陋。现在我要更改Flyout的CCSelectionButton。

1. 更改所选项目的背景和前景。

2. 删除默认的选择样式。

我已遵循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。

效果图：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmltZ3VyLmNvbS91ZTZ6SzRlLnBuZyJ9” alt =“ Imgur”>

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

最诚挚的问候。