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">
    <Style.Resources>
        <!-- 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" />
    </Style.Resources>
</Style>
 
 
The following XAML snippet shows how to apply the style to the listbox.
 
<Grid x:Name="LayoutRoot">
  <ListBox Style="{StaticResource myListboxStyle}" />
</Grid>
 
 




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

 Comments on this article

Show all comments
DSCN2258
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.;
Berti
Commented on 29.September 2009
NICE! pure zammel!
LearnerOfXAML
Commented on 2.November 2009
Great solution. This is exactly waht i was lookin 4
Shrads
Commented on 21.January 2010
Hey thanks a lot!! Its d perfect solution....
Larry
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!
kpatil
Commented on 27.April 2010
Indeed neat. Thank you.
To add more, If you want to change the TextColor use
HighlightTextBrushKey
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
iris
Commented on 17.May 2010
Thanks a lot for your great stuff! I like this solution, too:
http://wildermuth.com/2007/04/17/Changing_the_Selected_Style_of_ListBox_s_in_XAML
Hj
Commented on 6.July 2010
That is a neat solution! avoid re-templating overkill is awesome...
Homer
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...
Neztnerol
Commented on 2.September 2010
@Homer:
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}"
das
Commented on 15.September 2010
nice Explanation...in kannada to say "Tumba Chenagide":-)
Gally
Commented on 25.November 2010
I,
I'm looking for an other solution on windows phone 7 with Silverlight because <Style.Resources> doesn't exist.
Have you any idea ?
Haribabu
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
Karin
Commented on 11.December 2010
Just what I was looking for and so neatly done. Thanks Christian
bizon
Commented on 4.January 2011
Thanks. I love you :)
Alfredo...
Commented on 19.January 2011
GRANDE!!!!
Mustafa
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
avmfree
Commented on 24.February 2011
thanks. very helpful :)
smafuboj
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" />
</SolidColorBrush>
...

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

Thanks
Aditya Kiran...
Commented on 18.April 2011

Hey Thanks alot.. your site is damn good. it is very helpful.
Frank
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 ?
DoNguyen
Commented on 26.July 2011
Thanks for your solutions :)
Hamidreza...
Commented on 8.August 2011
Thank for your help. thanks
HK
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..

Name
E-Mail (optional)
Comment