title: Windows Phone 7: Highlight Selected Listbox item
body: <p>I have the following XAML (simple list box with custom DataTemplate). I'm trying to figure out how to highlight the selected item (maybe background colour change). I figure I need to do something with Styles in Expression Blend but I'm not quite sure where to start...
  Edit: After a bit of playing around I now have this (which doesn't seem to do anything)</p>
  
  <pre><code>&lt;phone:PhoneApplicationPage
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
      xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
      x:Class="SqueezeBox.StartPage"
      d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
      FontFamily="{StaticResource PhoneFontFamilyNormal}"
      FontSize="{StaticResource PhoneFontSizeNormal}"
      Foreground="{StaticResource PhoneForegroundBrush}"
      SupportedOrientations="Portrait"  Orientation="Portrait" 
      mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696" 
      shell:SystemTray.IsVisible="True"&gt;
      &lt;phone:PhoneApplicationPage.Resources&gt;
          &lt;Style x:Key="HighlightItemStyle" TargetType="ListBoxItem"&gt;
              &lt;Setter Property="Template"&gt;
                  &lt;Setter.Value&gt;
                      &lt;ControlTemplate TargetType="ListBoxItem"&gt;
                          &lt;StackPanel x:Name="DataTemplateStackPanel" Orientation="Horizontal"&gt;
                              &lt;VisualStateManager.VisualStateGroups&gt;
                                  &lt;VisualStateGroup x:Name="SelectionStates"&gt;
                                      &lt;VisualStateGroup.Transitions&gt;
                                          &lt;VisualTransition GeneratedDuration="0" To="Selected"&gt;
                                              &lt;Storyboard&gt;
                                                  &lt;ColorAnimation Duration="0" To="#FFFD0D0D" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ItemText" d:IsOptimized="True"/&gt;
                                              &lt;/Storyboard&gt;
                                          &lt;/VisualTransition&gt;
                                      &lt;/VisualStateGroup.Transitions&gt;
                                      &lt;VisualState x:Name="Unselected"/&gt;
                                      &lt;VisualState x:Name="Selected"/&gt;
                                      &lt;VisualState x:Name="SelectedUnfocused"/&gt;
                                  &lt;/VisualStateGroup&gt;
                              &lt;/VisualStateManager.VisualStateGroups&gt;
                              &lt;Image x:Name="ItemImage" Source="{Binding ThumbnailAlbumArtUri}" Height="62" Width="62" VerticalAlignment="Top" Margin="10,0,20,0"/&gt;
                              &lt;StackPanel x:Name="stackPanel"&gt;
                                  &lt;TextBlock x:Name="ItemText" Text="{Binding Name}" Margin="-2,-13,0,0" Style="{StaticResource PhoneTextExtraLargeStyle}" d:IsHidden="True"/&gt;
                                  &lt;TextBlock x:Name="DetailsText" Text="{Binding Artist}" Margin="0,-6,0,3" Style="{StaticResource PhoneTextSubtleStyle}"/&gt;
                              &lt;/StackPanel&gt;
                          &lt;/StackPanel&gt;
                      &lt;/ControlTemplate&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
          &lt;/Style&gt;
      &lt;/phone:PhoneApplicationPage.Resources&gt;
      &lt;!--Data context is set to sample data above and LayoutRoot contains the root grid where all other page content is placed--&gt;
      &lt;Grid x:Name="LayoutRoot" Background="Transparent" d:DataContext="{Binding ServerStatus.Players[0]}" &gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="Auto"/&gt;
              &lt;RowDefinition Height="*"/&gt;
          &lt;/Grid.RowDefinitions&gt;
  
          &lt;!--TitlePanel contains the name of the application and page title--&gt;
          &lt;StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="24,24,0,12"&gt;
              &lt;TextBlock x:Name="ApplicationTitle" Text="Now playing" Style="{StaticResource PhoneTextNormalStyle}"/&gt;
              &lt;TextBlock x:Name="ListTitle" Text="{Binding PlayerName}" Margin="-3,-8,0,0" Style="{StaticResource PhoneTextTitle1Style}"/&gt;
              &lt;ProgressBar Visibility="Visible" IsIndeterminate="True" Height="4" HorizontalAlignment="Left" Margin="10,10,0,0" x:Name="progressBar1" VerticalAlignment="Top" Width="460" /&gt;
          &lt;/StackPanel&gt;
  
          &lt;!--ContentPanel contains ListBox and ListBox ItemTemplate. Place additional content here--&gt;
          &lt;Grid x:Name="ContentPanel" Grid.Row="1"&gt;
              &lt;ListBox x:Name="MainListBox" ItemsSource="{Binding Tracks}" ItemContainerStyle="{StaticResource HighlightItemStyle}" /&gt;
          &lt;/Grid&gt;
      &lt;/Grid&gt;
  &lt;/phone:PhoneApplicationPage&gt;
  </code></pre>