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.

score 26 · Accepted Answer · answered Aug 31 '15 at 00:12

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.

Thank you! It's just what I needed. – alecardv Aug 31 '15 at 03:08 — alecardv, Aug 31 '15 at 03:08

score 25 · Answer 2 · answered Nov 20 '18 at 18:11

25

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>

answered Nov 20 '18 at 18:11

Daniel Glick

385
3
4

how to get the list of keys available. Basically i want to change the corner radius of the ListViewItem when hovered/selected – Sudheer Kumar Mar 04 '21 at 06:07
One spot is here: https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.listviewitem?view=winrt-22621 – grimus Sep 08 '22 at 21:41

score 12 · Answer 3 · answered Nov 19 '15 at 19:28

12

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.

answered Nov 19 '15 at 19:28

bastecklein

211
2
4

where do you set these? – yalematta Jun 04 '16 at 11:11

score 4 · Answer 4 · answered Jul 21 '16 at 17:48

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

answered Jul 21 '16 at 17:48

Adam J Inks

41
1

If i put this in the App.xaml.cs the changes will be reflected on the whole application? – alecardv Jul 21 '16 at 19:37
unfortunately, yes. However, you can change the color programmatically once the UIElement has the focus. So if you click the hamburger menu button, fire that code with a custom color. Then if you click another element that you want to have a different color, then fire the code again. – Adam J Inks Jul 27 '16 at 16:38
In my case for some reason only this "App.Current" version worked. "Application.Current" had no effect. Thanks man! – Alexander Marek Mar 29 '17 at 12:45

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

4 Answers4

Linked