Change Style of ListBoxItem when we use ItemTemplate in ListBox.

We will see how can we change background and foreground of any ListBoxItem on MouseOver or on Selection, and for ListBoxItem, ItemTemplate is being used.

Consider a ListBox in XAML, in which, ListBoxItem contains multiple Label via ItemTemplate. Now you want the background color and the text color of the Labels to be changed on Mouse Over or on Selection of the Item. To achieve this we can use following style:

Scenario to Achieve:

To change the Foreground of the text we will use following style on the Labels:

<Style TargetType="{x:Type Label}" x:Key="listBoxLabel">
  <Setter Property="Foreground" Value="Black"></Setter>
    <Style.Triggers>
      <!--Triggers for the IsSelected Property to check selection status-->
      <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=IsSelected}" Value="True">
            <Setter Property="Foreground" Value="White"></Setter>
      </DataTrigger>
      <!--Triggers for the IsMouseOver Property to check focus status-->
      <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=IsMouseOver}" Value="True">
          <Setter Property="Foreground" Value="Red"></Setter>
      </DataTrigger>
    </Style.Triggers>
 </Style>

To change the Background of the Item we will write following style for the ListBox:

<!--Add this line to Resources of the ListBox to override the background on the selection of the ListBoxItem-->
<SolidColorBrush x:Key='{x:Static SystemColors.HighlightBrushKey}' Color='Green'/>

<!--Style for ListBoxItem to override the background on the focus-->
<Style TargetType="{x:Type ListBoxItem}">
   <Setter Property="Background" Value="Transparent"></Setter>
   <Style.Triggers>
      <!--Trigger to check focus status of the Listbox -->
      <Trigger Property="IsMouseOver" Value="True">
           <Setter Property="Background" Value="Gray"></Setter>
      </Trigger>
   </Style.Triggers>
</Style>

XAML Code to apply the styles

<Window x:Class="WpfApplication1.ListBoxItemTemplateStyleDemo"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:col="clr-namespace:System.Collections;assembly=mscorlib"
        Title="ListBoxItemTemplateStyleDemo" Height="300" Width="300">
 <Grid>
  <Grid.Resources>
   <col:ArrayList x:Key="LocationList">
    <col:DictionaryEntry Key="Jod" Value="Jodhpur"></col:DictionaryEntry>
    <col:DictionaryEntry Key="Mum" Value="Mumbai"></col:DictionaryEntry>
    <col:DictionaryEntry Key="Pune" Value="Pune"></col:DictionaryEntry>
    <col:DictionaryEntry Key="Ben" Value="Bangalore"></col:DictionaryEntry>
    <col:DictionaryEntry Key="Che" Value="Chennai"></col:DictionaryEntry>         </col:ArrayList>
   <Style TargetType="{x:Type Label}" x:Key="listBoxLabel">
    <Setter Property="Foreground" Value="Black"></Setter>
     <Style.Triggers>
      <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=IsSelected}" Value="True">
       <Setter Property="Foreground" Value="White"></Setter>
      </DataTrigger>
      <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=IsMouseOver}" Value="True">
       <Setter Property="Foreground" Value="Red"></Setter>
      </DataTrigger>
     </Style.Triggers>
    </Style>
   </Grid.Resources>
   <ListBox x:Name="lstLocationList" ItemsSource="{StaticResource LocationList}">
    <ListBox.Resources>
     <SolidColorBrush x:Key='{x:Static SystemColors.HighlightBrushKey}' Color='Green'/>
     <Style TargetType="{x:Type ListBoxItem}">
      <Setter Property="Background" Value="Transparent"></Setter>
       <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
         <Setter Property="Background" Value="Gray"></Setter>
        </Trigger>
       </Style.Triggers>
      </Style>
     </ListBox.Resources>
     <ListBox.ItemTemplate>
      <DataTemplate>
       <Grid>
        <Grid.ColumnDefinitions>
         <ColumnDefinition></ColumnDefinition>
         <ColumnDefinition></ColumnDefinition>
         <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Label Content="{Binding Path=Key}" Grid.Column="0" Style="{StaticResource listBoxLabel}"></Label>
        <Label Content="-" Grid.Column="1" Style="{StaticResource listBoxLabel}"></Label>
        <Label Content="{Binding Path=Value}" Grid.Column="2" Style="{StaticResource listBoxLabel}"></Label>
       </Grid>
      </DataTemplate>
     </ListBox.ItemTemplate>
    </ListBox>
   </Grid>
</Window>