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>
 
 

 
<Grid x:Name="LayoutRoot">
  <ListBox Style="{StaticResource myListboxStyle}" />
</Grid>
 
 

 Comments on this article

radekg	Commented on 23.March 2009 Simpliest and most elegant solution. Thanks!
João Pacheco	Commented on 1.April 2009 is a nice and clean solution, but how can i change the colors in code. In my example i cant change in xaml.
Robbert Dam	Commented on 19.June 2009 Excellent! But how do I change the foreground color?
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}"