Shawn Wildermuth

Author, Teacher, and Filmmaker
.NET Foundation Board Member

Changing the "Selected" Style of ListBox's in XAML

I use ListBox's and DataTemplates a lot to show data in different ways in WPF. One of the problems I've faced is how to change the look of the "Selected" element. All the examples I could find assumed you were not using a DataTemplate.  Luckily Chris Sells came to my rescue and pointed me at the ItemContainerStyle.  Using a Template for the ListBoxItem in the ItemContainerStyle let me control the look and feel of the Selected element (or disabled items) easily.

What I wanted was a nice glow effect instead of the default blue background:

This worked fine, but I was still getting the default behavor (of coloring the background blue) when I selected an item.  To fix it, I added a Style that overrode the ListItemBox's template and replaced it with a simple border.  I added a Trigger to this template on the IsSelected to add a nice bitmap affect of a red glow.  Here's the entire XAML example:

<Grid xmlns=""


    <!-- The Data Source -->
    <XmlDataProvider x:Key="FolderListData">
        <People xmlns="">
          <Person Name="Chris"
                  Picture="" />
          <Person Name="Shawn"
                  Picture="//" />
          <Person Name="Ian"
                  Picture="" />
        </People >

    <!-- ItemContainerStyle with the Trigger for Selected -->
    <Style x:Key="RedGlowItemContainer" TargetType="{x:Type ListBoxItem}">
      <Setter Property="Template">
          <ControlTemplate TargetType="{x:Type ListBoxItem}">
            <Border Background="LightGray"
                    Margin="8,4,8,4" >
              <ContentPresenter />
              <Trigger Property="IsSelected" Value="true">
                <Setter TargetName="IconBorder" Property="BitmapEffect">
                    <OuterGlowBitmapEffect GlowColor="Red" GlowSize="5" />


  <ListBox ItemsSource="{Binding Source={StaticResource FolderListData}, XPath=//Person}"
           ItemContainerStyle="{StaticResource RedGlowItemContainer}">
        <StackPanel Margin="10,10,10,10"
                    VerticalAlignment="Center" >
          <Image Width="90"
                 Source="{Binding XPath=@Picture}" />
          <TextBlock HorizontalAlignment="Center"
                     Text="{Binding XPath=@Name}"/>

Let me know what you think...