33

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.

4 Answers 4

26

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.

1
  • 1
    Thank you! It's just what I needed.
    – alecardv
    Aug 31, 2015 at 3:08
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>
2
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.

1
  • where do you set these?
    – yalematta
    Jun 4, 2016 at 11:11
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);
3
  • If i put this in the App.xaml.cs the changes will be reflected on the whole application?
    – alecardv
    Jul 21, 2016 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. Jul 27, 2016 at 16:38
  • In my case for some reason only this "App.Current" version worked. "Application.Current" had no effect. Thanks man! Mar 29, 2017 at 12:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.