title: Color a WPF ListBox item based on a property
body: <p>I have an observable collection of Song objects. These song objects have a property called "Playing" that is a bool (bad naming, I know). The songs display in a ListBox in my application. I want the song that is Playing to be colored red. I have been working with triggers all day trying to make this work. So far, I have gotten to the point where they are colored based on what Playing is set to when the song is added to the list. Is it possible to make it change when the Playing property changes? 
  Here is my XAML:</p>
  
  <pre><code>&lt;Window x:Class="MusicPlayer.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:MusicPlayer="clr-namespace:MusicPlayer" Title="Music" Height="350" Width="525" Name="Main"&gt;
      &lt;Grid&gt;
          &lt;ListBox HorizontalAlignment="Stretch"  Name="Playlist" VerticalAlignment="Stretch" Margin="0,23,0,79" MouseDoubleClick="Playlist_MouseDoubleClick"&gt;
              &lt;ListBox.Resources&gt;
                  &lt;Style TargetType="ListBoxItem"&gt;
                      &lt;Style.Triggers&gt;
                          &lt;DataTrigger Binding="{Binding Path=Playing}" Value="True"&gt;
                              &lt;Setter Property="Background" Value="Red" /&gt;
                          &lt;/DataTrigger&gt;
                      &lt;/Style.Triggers&gt;
                  &lt;/Style&gt;
                  &lt;DataTemplate DataType="{x:Type MusicPlayer:Song}"&gt;
                      &lt;TextBlock Text="{Binding Path=Title}"/&gt;
                  &lt;/DataTemplate&gt;
              &lt;/ListBox.Resources&gt;
  
          &lt;/ListBox&gt;
          &lt;Button Content="Play" Height="23" HorizontalAlignment="Center" Margin="0,0,330,20" Name="PlayButton" VerticalAlignment="Bottom" Width="75" Click="PlayButton_Click" /&gt;
          &lt;Button Content="Stop" Height="23" HorizontalAlignment="Center" Margin="0,0,165,20" Name="stopButton" VerticalAlignment="Bottom" Width="75" Click="stopButton_Click" /&gt;
          &lt;Button Content="Next" Height="23" HorizontalAlignment="Center" Margin="165,0,0,20" Name="nextButton" VerticalAlignment="Bottom" Width="75" Click="nextButton_Click" /&gt;
          &lt;Button Content="Add Songs..." Height="23" HorizontalAlignment="Center" Margin="330,0,0,20" Name="AddButton" VerticalAlignment="Bottom" Width="75" Click="AddButton_Click" /&gt;
          &lt;Button Content="Previous" Height="23" HorizontalAlignment="Center" Margin="0,0,0,20" Name="PreviousButton" VerticalAlignment="Bottom" Width="75" Click="PreviousButton_Click" /&gt;
          &lt;Button Content="Pause" Height="23" HorizontalAlignment="Center" Margin="0,0,330,20" Name="PauseButton" VerticalAlignment="Bottom" Width="75" Visibility="Hidden" Click="PauseButton_Click" /&gt;
          &lt;Menu Height="23" HorizontalAlignment="Stretch" Name="menu1" VerticalAlignment="Top"&gt;
              &lt;MenuItem Header="File"&gt;
                  &lt;MenuItem Header="Quit" Click="MenuItem_Click" /&gt;
              &lt;/MenuItem&gt;
          &lt;/Menu&gt;
              &lt;Slider Height="23" HorizontalAlignment="Stretch" Margin="10,0,10,50" Name="ProgressBar" VerticalAlignment="Bottom" /&gt;
      &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p>Edit: </p>
  
  <p>After implementign INotifyPropertyChanged, The color will change to red using either the above or below XAML. Now, it won't change back white using either method. I am also having a problem where my Play method will not change the background color to red, but my  next method will. Here is my code: <a href="http://pastebin.com/EMTUpTin" rel="nofollow">http://pastebin.com/EMTUpTin</a> <a href="http://pastebin.com/LuK78zGp" rel="nofollow">http://pastebin.com/LuK78zGp</a>
  Here is my new XAML:</p>
  
  <pre><code>&lt;Window x:Class="MusicPlayer.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:MusicPlayer="clr-namespace:MusicPlayer" Title="Music" Height="350" Width="525" Name="Main"&gt;
      &lt;Grid&gt;
          &lt;ListBox HorizontalAlignment="Stretch"  Name="Playlist" VerticalAlignment="Stretch" Margin="0,23,0,79" MouseDoubleClick="Playlist_MouseDoubleClick"&gt;
              &lt;ListBox.Resources&gt;
                  &lt;DataTemplate DataType="{x:Type MusicPlayer:Song}"&gt;
                      &lt;TextBlock Text="{Binding Path=Title}"&gt;
                          &lt;TextBlock.Background&gt;
                              &lt;SolidColorBrush Color="{Binding BackgroundColor}"/&gt;
                          &lt;/TextBlock.Background&gt;
                      &lt;/TextBlock&gt;
                  &lt;/DataTemplate&gt;
              &lt;/ListBox.Resources&gt;
          &lt;/ListBox&gt;
          &lt;Button Content="Play" Height="23" HorizontalAlignment="Center" Margin="0,0,330,20" Name="PlayButton" VerticalAlignment="Bottom" Width="75" Click="PlayButton_Click" /&gt;
          &lt;Button Content="Stop" Height="23" HorizontalAlignment="Center" Margin="0,0,165,20" Name="stopButton" VerticalAlignment="Bottom" Width="75" Click="stopButton_Click" /&gt;
          &lt;Button Content="Next" Height="23" HorizontalAlignment="Center" Margin="165,0,0,20" Name="nextButton" VerticalAlignment="Bottom" Width="75" Click="nextButton_Click" /&gt;
          &lt;Button Content="Add Songs..." Height="23" HorizontalAlignment="Center" Margin="330,0,0,20" Name="AddButton" VerticalAlignment="Bottom" Width="75" Click="AddButton_Click" /&gt;
          &lt;Button Content="Previous" Height="23" HorizontalAlignment="Center" Margin="0,0,0,20" Name="PreviousButton" VerticalAlignment="Bottom" Width="75" Click="PreviousButton_Click" /&gt;
          &lt;Button Content="Pause" Height="23" HorizontalAlignment="Center" Margin="0,0,330,20" Name="PauseButton" VerticalAlignment="Bottom" Width="75" Visibility="Hidden" Click="PauseButton_Click" /&gt;
          &lt;Menu Height="23" HorizontalAlignment="Stretch" Name="menu1" VerticalAlignment="Top"&gt;
              &lt;MenuItem Header="File"&gt;
                  &lt;MenuItem Header="Quit" Click="MenuItem_Click" /&gt;
              &lt;/MenuItem&gt;
          &lt;/Menu&gt;
          &lt;Slider Height="23" HorizontalAlignment="Stretch" Margin="10,0,10,50" Name="ProgressBar" VerticalAlignment="Bottom" /&gt;
      &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p><strong>Edit 2:</strong>
  I just noticed I am having another problem. If I highlight one of the items with a white background, the text is invisible. How do I fix this?<br>
  <strong>Edit 3:</strong>
  Fixed this problem by setting the background to <code>Colors.Transparent</code> instead of <code>Colors.White</code>.</p>