How to change Highlight color of the selected ListView item in UWP (Windows 10)

Question

I'm working on a Windows 10 app using C# and XAML. I have a ListView and I want to change the default HighLight color of an selected item. I was seeing many code examples (like this) but all are designed for WP8 or Win8, I was trying to implement those but they do not work for me.

In general I'm having troubles modifying the default themes of controls because I don't find useful documentation. It would be great if someone can help me with the highlight color and also recommend me good documentation.

Solution 1

Actually a better way to discover the styling properties is to use Blend.

First, open up your page in Blend. Then right click on your ListView and go

Edit Additional Templates > Edit Generated Item Container (ItemContainerStyle) > Edit a Copy.

Give it a name and hit OK.

Now, you have generated the full built-in style for your ListViewItems and this is where you can find all the information about their appearance, animations and other visual behaviors.

You should be look at this piece of code -

<ListViewItemPresenter CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
                       ContentMargin="{TemplateBinding Padding}" 
                       CheckMode="Inline" 
                       ContentTransitions="{TemplateBinding ContentTransitions}" 
                       CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
                       DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" 
                       DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
                       DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" 
                       DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                       FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}" 
                       FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}" 
                       HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                       PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
                       PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
                       PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
                       PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
                       ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" 
                       SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
                       SelectionCheckMarkVisualEnabled="True" 
                       SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
                       SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}" 
                       SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}"
                       VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />

See the line SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}"? That's where you can apply your own color to it. Keep in mind that it should be of type Brush instead of Color.

Solution 2

This can be achieved in XAML by overriding the resource.

<ListView ...>
    <ListView.Resources>
        <SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="#FF0000" />
        <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="#FF0000" />
    </ListView.Resources>
</ListView>

Solution 3

If you don't want to use XAML, here is an even easier way (in my opinion) to change these settings, using c#:

Application.Current.Resources["SystemControlHighlightListAccentLowBrush"] = new SolidColorBrush(Colors.Red);
Application.Current.Resources["SystemControlHighlightListAccentMediumBrush"] = new SolidColorBrush(Colors.Red);

This way you can really customize your items logically.

Solution 4

To extend on bastecklein's Answer. You want to use App instead of Application for this method to work in a UWP project. You can use this code in your App.xaml.cs as you load your initial frame, or you can just set the resource color on the code behind the page that you want to affect.

App.Current.Resources["SystemControlHighlightListAccentLowBrush"] = new SolidColorBrush(Colors.Red);
App.Current.Resources["SystemControlHighlightListAccentMediumBrush"] = new SolidColorBrush(Colors.Red);

View more solutions