Как изменить SelectedBackground в ListViewItemPresenter внутри GridView

Question

У меня есть кликабельны-GridView insde в HubSection:

<HubSection > 
        <DataTemplate> 
         <GridView IsItemClickEnabled="True" ItemClick="Hub_OnClick"> 
          <RelativePanel > 
          <TextBlock Text="NiceText" /> 
          </RelativePanel> 
         </GridView> 
        </DataTemplate> 
       </HubSection> 

Теперь каждый раз, когда я нажал на этот хаб, сине-граница появляется вокруг GridView (SelectedBackground).

В LiveVisualTree это показывает мне, что граница находится из элемента управления ListViewItemPresenter внутри GridViewItem. Поэтому я модифицировал стиль из исходного элемента управления и вставлял его в тег Page.Resources.

<!-- Default style for Windows.UI.Xaml.Controls.ListViewItem --> 
<Style TargetType="ListViewItem"> 
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> 
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /> 
<Setter Property="Background" Value="Transparent"/> 
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" /> 
<Setter Property="TabNavigation" Value="Local"/> 
<Setter Property="IsHoldingEnabled" Value="True"/> 
<Setter Property="Padding" Value="12,0,12,0"/> 
<Setter Property="HorizontalContentAlignment" Value="Left"/> 
<Setter Property="VerticalContentAlignment" Value="Center"/> 
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/> 
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/> 
<Setter Property="Template"> 
    <Setter.Value> 
    <ControlTemplate TargetType="ListViewItem"> 
     <ListViewItemPresenter 
      ContentTransitions="{TemplateBinding ContentTransitions}" 
      SelectionCheckMarkVisualEnabled="True" 
      CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
      CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
      DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
      DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
      FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}" 
      FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}" 
      PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
      PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}" 
      PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" 
      <!-- here --> 
      SelectedBackground="White" 
      SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" 
      SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}" 
      PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" 
      SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}" 
      DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
      DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
      ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
      ContentMargin="{TemplateBinding Padding}" 
      CheckMode="Inline"/> 
    </ControlTemplate> 
    </Setter.Value> 
</Setter> 
</Style> 

Но это не работает для меня. Выбранная область-граница по-прежнему синяя. Но почему? Где моя ошибка?

Answer 1

Вы должны переопределить GridViewItem стиль и установить новый стиль на GridView. В этом ресурсе объявить новый стиль:

<Page.Resources> 
    <Style TargetType="GridViewItem" x:Key="CustomGridViewStyle"> 
     <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> 
     <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" /> 
     <Setter Property="TabNavigation" Value="Local"/> 
     <Setter Property="IsHoldingEnabled" Value="True"/> 
     <Setter Property="HorizontalContentAlignment" Value="Center"/> 
     <Setter Property="VerticalContentAlignment" Value="Center"/> 
     <Setter Property="Margin" Value="0,0,4,4"/> 
     <Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}"/> 
     <Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="GridViewItem"> 
        <ListViewItemPresenter 
        ContentTransitions="{TemplateBinding ContentTransitions}" 
        SelectionCheckMarkVisualEnabled="True" 
        CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
        CheckBoxBrush="{ThemeResource SystemControlBackgroundChromeMediumBrush}" 
        DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
        DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
        FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}" 
        FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}" 
        PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" 
        PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}" 
        PointerOverForeground="{ThemeResource SystemControlForegroundBaseHighBrush}" 
        SelectedBackground="Transparent" 
        SelectedForeground="{ThemeResource SystemControlForegroundBaseHighBrush}" 
        SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}" 
        PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" 
        SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}" 
        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
        ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}" 
        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
        ContentMargin="{TemplateBinding Padding}" 
        CheckMode="Overlay"/> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Page.Resources> 

и настройка:

<HubSection > 
    <DataTemplate> 
     <GridView IsItemClickEnabled="True" 
       ItemClick="Hub_OnClick" 
       ItemContainerStyle="{StaticResource CustomGridViewStyle}"> 
      <RelativePanel > 
       <TextBlock Text="NiceText" /> 
      </RelativePanel> 
     </GridView> 
    </DataTemplate> 
</HubSection> 

P.S. Вы также можете переопределить Exanded style