Как изменить всплывающий стиль CCSelectionButton MediaPlayerElement на Xbox?

Question

Как показано на рисунке, MediaPlayerElement не имеет дружественного пользовательского интерфейса на XBox, это ужасно по сравнению с 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 по умолчанию. Это должно быть связано с изменчивостью файла субтитров (разные субтитры для каждого видео). Это MenuFlyout, сгенерированный кодом C #, поэтому мы можем переписать его только с помощью покрытия ресурсов.

Попробуйте добавить следующий код в 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 s.

Изображение эффекта:

Если вы не Если вы не хотите влиять на другие MenuFlyoutItem, вы можете создать стиль MenuFlyoutItem по умолчанию и назначить ему другой MenuFlyoutItem, который вам нужен, чтобы сохранить стиль по умолчанию.

С уважением.