Yesterday I was looking at WPF ListBox controls and ran into an interesting low-level problem. When a user clicks on an item in a ListBox control to select the item, the background color of the selected item is set to a system-defined color — a medium blue by default. This medium blue color looks great on machines running Windows Vista but on earlier versions of Windows (Server 2003 in particular) the blue is darker and makes the text of the selected item very difficult to read. So, how hard can it be to modify the WPF XAML description to change the background color of a selected ListBoxItem? See the image below. Well, it was a lot harder than I thought it would be to track down the documentation on exactly how to do this. I discovered fairly quickly that it isn’t too hard to modify the background color of selected items in a ListBox by directly modifying the ListBox XAML definition to include a Resources tag:

 

<ListBox Name="employeeListBox" Grid.Column="0" Grid.Row="1"
  ItemsSource="{Binding Source={StaticResource SkillDataSource},
  XPath=Employee}"
  ItemTemplate="{StaticResource nameItemTemplate}">

  <ListBox.Resources>
   <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
    Color="LightYellow" />
  </ListBox.Resources>
</ListBox>

 

However, the example WPF application I was looking at had more than one ListBox, so I wanted to create a Style tag in the main App.xaml file and apply the style to the ListBox controls defined elsewhere. It took me much longer to discover how to do this. The obvious approach simply does not work:

 

<!– wrong –>
<Style x:Key="listBoxItemStyle" TargetType="{x:Type ListBoxItem}">
  <Setter Property="Background" Value="LightYellow" />
</Style>

 

Here’s the correct way to define a style:

 

<!– Correct way –>
<Style x:Key="listBoxItemStyle" TargetType="{x:Type ListBoxItem}">
  <Style.Resources>
   <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
    Color="LightYellow"/>
  </Style.Resources>
</Style>

 

And then background color of selected items in any ListBox control can be modified using the ItemContainerStyle attribute to point to the Style template defined in the App.xaml file:

 

<ListBox Name="employeeListBox" Grid.Column="0" Grid.Row="1"
  ItemsSource="{Binding Source={StaticResource SkillDataSource},
  XPath=Employee}"
  ItemTemplate="{StaticResource nameItemTemplate}"
  ItemContainerStyle="{StaticResource listBoxItemStyle}"> 
</ListBox>

 

WPF is still a new technology. Common tasks like this — modifying the background color of a selected ListBoxItem — take a bit longer to figure out than you might expect.