Essential WPF ListBox Styling

• Posted by Diederik Krols on October 12, 2010
• 3 comments

This article explains how to style a WPF ListBox. I know: there must be a million articles about this subject. So if you're looking for kaleidoscopic brushes, dazzling effects, and animations from outer space, then feel free to press the Back button in your browser to return to your search engine page, and click the next hit. If however you're interested in some details on how to put the cherry on the templated ListBox cake, then please continue reading.

Styling the content

The first step in styling any list control is creating a data template for the list items. So let's get it over with.

A simple data template

The list control will be populated with objects with properties (obviously, because there's nothing else in .NET ;-). The following data template displays the name property of its source. The DataType property in the XAML is mandatory and then ignored.

Styling the selected items

The selected items deserve to be highlighted, so we define an extra brush for these:

The following code applies the brush through a data trigger. The XAML is quite complex, but very clear. We walk up the visual tree to discover the parent list box item, and apply the brush if it IsSelected:

This is as far as I will go regarding data templates. Check out the WPF Themes at CodePlex for some good in-depth data template examples.

Apply the template

Here's how to apply the template to a listbox:

Styling the listbox itself

A data template is not enough

Creating the data template is the fun part. Here is were most blog and other articles end - leaving you in frustration. Because just applying a data template to style a listbox's items is not sufficient to provide a nice user experience. Here's how the current listbox -with just a data template- looks like when running the application:

Even when the focus went to another control, the data-template-only listbox shows unwanted side effects:

Actually, some important looks of the selected list item(s) are not defined in the data template itself, including:

• the (blue) background color,
• the (white) foreground color, and
• the dotted border to express keyboard focus.

While it's possible to improve the looks by tweaking the data template (e.g. by using negative padding), the right place to style these settings is the parent listbox itself.

Where are the original control templates?

The XAML resource dictionaries for the builtin themes (Classic, Aero, ...) can be found here at MSDN (4.0 versions apparently are not yet available). The source code of the themes also come with Expression Blend (search for the SystemThemes folder), and can be found in a lot of other places. If you open one of these files and search for the ListBoxItem styles, you'll find stuf like this:

This code is responsible for that horrible thin blue line on the left side of your data template.

In the default XAML template for ListBoxItem you'll also find this trigger:

Here's where the blue background and the white text color comes from.

Overriding default brushes

Instead of redefining the whole ListBoxItem style, you can easily get away with overriding the brushes that are used as static resource. You can use the following XAML to make the unwanted stylings disappear:

Empty data

Unfortunately WPF controls don't have an EmptyDataTemplate property like their ASP.NET siblings. The empty data template describes how the list control looks like when it's bound to an empty data source.

In WPF we have to build this ourselves. Let's keep things simple and display a TextBox in front of the ListBox, and bind its visibility to the items count of the ListBox.

Here's the XAML:

Here's how it looks like when the app runs: 

Source Code

As usual, here's a working sample: U2UConsult.WPF.Template.Sample.zip (17,81 kb)

Enjoy!