[UWP] Styling a ListviewItem without creating a copy of the ItemContainer style

Styling a XAML ListView in a UWP app can lead to a lot of generated XAML styles. If you want to change style properties of the generated items, you would typically edit a copy of the ItemContainerStyle. Are you looking to a more lightweight way to style your ListView? This tutorial explains how to change selection colors and other properties with one line of code!

Here is an unstyled ListView with three items:

listview

The selection color is the Windows Accent color.

Change the Selected Background color

To change the background color of the selected item, you would typically edit a copy of ItemContainerStyle.

listview

This would result in this style:

<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="Background" Value="{ThemeResource ListViewItemBackground}"/>
    <Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}"/>
    <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="AllowDrop" Value="False"/>
    <Setter Property="UseSystemFocusVisuals" Value="True"/>
    <Setter Property="FocusVisualMargin" Value="0"/>
    <Setter Property="FocusVisualPrimaryBrush" Value="{ThemeResource ListViewItemFocusVisualPrimaryBrush}"/>
    <Setter Property="FocusVisualPrimaryThickness" Value="2"/>
    <Setter Property="FocusVisualSecondaryBrush" Value="{ThemeResource ListViewItemFocusVisualSecondaryBrush}"/>
    <Setter Property="FocusVisualSecondaryThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <ListViewItemPresenter 
                    CheckBrush="{ThemeResource ListViewItemCheckBrush}" 
                    ContentMargin="{TemplateBinding Padding}" 
                    CheckMode="{ThemeResource ListViewItemCheckMode}" 
                    ContentTransitions="{TemplateBinding ContentTransitions}" 
                    CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}" 
                    DragForeground="{ThemeResource ListViewItemDragForeground}" 
                    DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
                    DragBackground="{ThemeResource ListViewItemDragBackground}" 
                    DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                    FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}" 
                    FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}" 
                    FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}" 
                    FocusVisualMargin="{TemplateBinding FocusVisualMargin}" 
                    FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}" 
                    FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}" 
                    FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}" 
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                    Control.IsTemplateFocusTarget="True" 
                    PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}" 
                    PressedBackground="{ThemeResource ListViewItemBackgroundPressed}" 
                    PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}" 
                    PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}" 
                    ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
                    SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}" 
                    SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}" 
                    SelectedForeground="{ThemeResource ListViewItemForegroundSelected}" 
                    SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}" 
                    SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}" 
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And change:

SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}" 

To something like:

SelectedBackground="Red" 

That seems like a lot of code just to change a color. We can also change the ListViewItemPresenter properties without having to create a copy of the ListViewItem Style

Style overriding

Let’s assume we are changing the Selected Background Color for all ListViews on a page. And with accessibility in mind, we will only change the background color for the default theme:

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>

            <ResourceDictionary x:Key="Default">
                <SolidColorBrush x:Key="ListViewItemBackgroundSelected">Red</SolidColorBrush>
            </ResourceDictionary>

            <ResourceDictionary x:Key="HighContrast">
            </ResourceDictionary>

        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

This results in:

listview

You can do it for other types as well. In the next XAML, the MinHeight (double) is added to the style:

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>

            <ResourceDictionary x:Key="Default">
                <SolidColorBrush x:Key="ListViewItemBackgroundSelected">Red</SolidColorBrush>
                <x:Double x:Key="ListViewItemMinHeight">80</x:Double>
            </ResourceDictionary>

            <ResourceDictionary x:Key="HighContrast">
            </ResourceDictionary>

        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

listview

Style names

To find out what style key you need to override, you can temporarily edit a copy of the style (just like in the beginning of this tutorial) or find this file on your computer:

c:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.15063.0\Generic\themeresources.xaml

Here you will find all the styles for a certain UWP Version (10.0.15063.0 = Creators update)

.
.
<StaticResource x:Key="ListViewItemBackground" ResourceKey="SystemControlTransparentBrush" />
<StaticResource x:Key="ListViewItemBackgroundPointerOver" ResourceKey="SystemControlHighlightListLowBrush" />
<StaticResource x:Key="ListViewItemBackgroundPressed" ResourceKey="SystemControlHighlightListMediumBrush" />
<StaticResource x:Key="ListViewItemBackgroundSelected" ResourceKey="SystemControlHighlightListAccentLowBrush" />
<StaticResource x:Key="ListViewItemBackgroundSelectedPointerOver" ResourceKey="SystemControlHighlightListAccentMediumBrush" />
<StaticResource x:Key="ListViewItemBackgroundSelectedPressed" ResourceKey="SystemControlHighlightListAccentHighBrush" />
.
.