How to change SelectedBackground in ListViewItemPr

Question

I have a Clickable-Gridview insde a HubSection:

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

Now everytime I've clicked on that hub, a blue-border will appear around the GridView (SelectedBackground).

In LiveVisualTree it shows me, that the border is from a "ListViewItemPresenter" control inside the GridViewItem. Therefore I modified the style from the original control and pasted it into the Page.Resources tag.

<!-- 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>

But this isn't working for me. The SelectedBackground-Border is still blue. But why? Where is my mistake?

Answer 1

You should to override GridViewItem style and setup new style to GridView. In page resource declare your new style:

<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>

And setup:

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

p.s. You also can override Exanded style