Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  

Change the Background of a selected ListBox Item

If you select an item in a listbox it gets the default selection color (usually blue) as background. Even if you specify a custom data template. The reason is that the blue background (or gray if the control is not focussed) is drawn outside of the data template. So you have no chance to override it from within the data template.

The color used to draw the blue and gray background are system colors. So the easiest way to get rid of these backgrounds is to locally override the highlight and control brushes of the system colors.

The best way to do this is to create a style for the listbox. Place the style in the resources of a parent element. For e.g. Window.Resources

<Style x:Key="myListboxStyle">
        <!-- Background of selected item when focussed -->
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red" />                
        <!-- Background of selected item when not focussed -->
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Green" />
The following XAML snippet shows how to apply the style to the listbox.
<Grid x:Name="LayoutRoot">
  <ListBox Style="{StaticResource myListboxStyle}" />

Last modified: 2008-10-24 01:37:10
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
Commented on 5.August 2009
On registering a mobile casino account you'd better have a computer at hand in addition to your phone but it is not obligatory in some cases.;
Commented on 29.September 2009
NICE! pure zammel!
Commented on 2.November 2009
Great solution. This is exactly waht i was lookin 4
Commented on 21.January 2010
Hey thanks a lot!! Its d perfect solution....
Commented on 4.March 2010
Thanks a lot! I spent 1+ days trying to solve this, thought it was hidden style overriding my setting, never thought of system colors!
Commented on 27.April 2010
Indeed neat. Thank you.
To add more, If you want to change the TextColor use
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
Commented on 17.May 2010
Thanks a lot for your great stuff! I like this solution, too:
Commented on 6.July 2010
That is a neat solution! avoid re-templating overkill is awesome...
Commented on 13.July 2010
Is not an 'Elegant' solution because it replaces a system color key, so that change will be applied to all controls that use this key...
Commented on 2.September 2010
No, it only replaces the system color key for the control that uses the style template "myListboxStyle"
So it only applies to the control that adds the property:
Style="{StaticResource myListboxStyle}"
Commented on 15.September 2010
nice kannada to say "Tumba Chenagide":-)
Commented on 25.November 2010
I'm looking for an other solution on windows phone 7 with Silverlight because <Style.Resources> doesn't exist.
Have you any idea ?
Commented on 9.December 2010
Hello tutorial Admin...
You have written tutorial well but y can't you extend topic some more briefly... For example in mouse
input why can't you explain mouse events at least few
Commented on 11.December 2010
Just what I was looking for and so neatly done. Thanks Christian
Commented on 4.January 2011
Thanks. I love you :)
Commented on 19.January 2011
Commented on 11.February 2011
Exactly what I was looking for! New to WPF and your site is the main site when I need to out figure out something with WPF
Commented on 24.February 2011
thanks. very helpful :)
Commented on 2.March 2011
Thanks for the solution. It works great in this form, but I would like to use a custom color (instead the wpf's built-in colors).
I tried this, but it doesn't work:
<!-- Background of selected item when focussed -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" >
<SolidColorBrush.Color R="0" G="154" B="213" />

Is there any way to solve my problem? Thanks for help!
Armando Rocha
Commented on 13.April 2011
Simple and nice solutions!

Aditya Kiran...
Commented on 18.April 2011

Hey Thanks alot.. your site is damn good. it is very helpful.
Commented on 13.June 2011
I'm trying top apply the same thing on a ListView but it doesn't work.
I've heard it could be due to the fact that this isn't supported on Windows 7. Any truth to this ? Is there another way to accomplish this ?
Commented on 26.July 2011
Thanks for your solutions :)
Commented on 8.August 2011
Thank for your help. thanks
Commented on 27.September 2011
I was tryin to diasble selection of node in treeview.. tis helped me to achieve it by givin d highlight colour brush same as d background colour of my window.. thanks alot..

E-Mail (optional)