Styling a ListBox

I’ve found that the WPF ListBox control is one of my most commonly used controls when designing screens. Its ability to use DataTemplates to control how each item is rendered, ability to override the layout mechanism of the items via the ItemsPanelTempalte and even some pretty cool grouping capabilities.

Over the last couple of weeks I’ve put together a few screens in a little app that I’m writing. It had got to the stage where data was appearing on screen and the back-end (consisting of LINQ for SQL) was doing a good job of extracting the information from the existing database. I figured it was time to allow myself a little time to “pretty up” the UI.

I applied some very simple backgrounds and a simple animation for “mouse over” highlighting of list box items. But then I hit a stumbling block. The SelectedItem was being rendered using the standard blue background, or gray when the control didn’t have focus. What’s more this was taking preference to any property changes I made in the IsSelected trigger. No problem – that should be easy to change right? Hmm… at least that’s what I thought.

ListBoxItem width default selection 

What’s with the ugly blue background on the selected item?

Of course the most obvious choice seemed to be to completely redo the control template. Now apparently you can rip the template of a control using Expression (or code) and edit just the bit you want – but this sounds pretty horrid to me. It’s the equivalent of copying huge amounts of code that you don’t really understand and changing just a couple of lines – to achieve a simple effect.

The solution (to this common problem) that seemed to be the most prevalent on the net was certainly much easier, but it just seemed to be clumsy and error prone. You “highjack” the resource keys used to render the standard template’s selection background in a local scope – either replacing with your own colour – or disabling by making them transparent and handle the rendering yourself via your own triggers (with animations etc.).

        <ListBox x:Name="eventList" Background="Black" ItemsSource="{Binding Path=Events/Events}" 
="True" Grid.Row="1" ItemTemplate="{StaticResource dayTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" BorderThickness="0"> <ListBox.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/> <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/> </ListBox.Resources> </ListBox>

For this to work:

  1. You have to know that the standard colours for highlighting in a ListBox are System.Highlight (fairly obvious) and System.Control (guesswork).
  2. No other components of the controls standard rendering that you want to retain can use these colours.

There must be a better, simple way?

4 thoughts on “Styling a ListBox”

  1. Hi Anonymous,

    Not sure what you wanted so see in the sample project. Are you just after something to show that the selection background can be changed – or did you want something more specific such as the template for the sample shown?


  2. You’ve expressed my thoughts exactly. It’s so frustrating. I wonder did they include those simple control templates to make editing those controls easier. They definitely need to find a more intuitive way of dealing with this issue.

  3. There is – use a RelativeSource binding to walk up the element tree and override the background of the containing ListBoxItem. See for more details

    Something like:

    Background=”{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=Background}”

    on the containing listbox element

    See page 565 of the awesome Apress book “Pro WPF in C# 2008” for more details. Cant recommend it enough

Comments are closed.