title: Silverlight Listbox Item Style
body: <p>How would one go about styling a listbox such that the selection has a different text color than the default view? I've looked at this in several ways and because the ContentPresenter lacks a Foreground property. </p>
  
  <p>The default control template of the listbox provides several rectangles which one can use to adjust the highlight color. For example, with the default style a rectangle called BGColor3 has its opacity adjusted to get a highlight effect.</p>
  
  <p>Here is the bulk of my control template: </p>
  
  <pre><code>&lt;Grid&gt;
      &lt;Rectangle x:Name="BGColor2" Fill="{StaticResource HoverBrush}" Stroke="Black" StrokeThickness="1" Opacity="0"/&gt;
      &lt;Rectangle x:Name="BGColor3" Fill="{StaticResource ListboxHighlightBrush}" StrokeThickness="0" Opacity="0"/&gt;
      &lt;Rectangle x:Name="BGColor" Stroke="Black" StrokeThickness="0" Opacity="0.2" Fill="{TemplateBinding Background}"/&gt;
      &lt;Border Height="20"&gt;
          &lt;ContentPresenter HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/&gt;
      &lt;/Border&gt;
      &lt;Rectangle Fill="Blue" Opacity="0.4" x:Name="FocusVisual" Stroke="#BF313131" Margin="1" StrokeThickness="1" StrokeDashArray="1 2" StrokeDashCap="Square" Visibility="Collapsed" /&gt;
      &lt;Rectangle x:Name="BorderRect" Stroke="Black" StrokeThickness="1" Opacity="0.3" /&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>In the selection Visual State, here is the gist:</p>
  
  <pre><code>&lt;VisualStateGroup x:Name="SelectionStates"&gt;
      &lt;VisualState x:Name="Unselected"/&gt;
      &lt;VisualState x:Name="Selected"&gt;
          &lt;Storyboard&gt;
              &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BGColor2" Storyboard.TargetProperty="(UIElement.Opacity)"&gt;
                  &lt;SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.8"/&gt;
              &lt;/DoubleAnimationUsingKeyFrames&gt;
          &lt;/Storyboard&gt;
      &lt;/VisualState&gt;
  &lt;/VisualStateGroup&gt;
  </code></pre>
  
  <p>What is evident is that BGColor2 the rectangle is being modified (opacity) so that the selected item has a background. Fair enough. Within this portion of the Storyboard, is there anyway to access either the ContentPresenter or something else similar and toggling the text foreground color?</p>
  
  <p>Footnote: wouldn't it be much cleaner to simply have different templates versus visual state transitions?</p>
  
  <p>---- added after first answer given ----</p>
  
  <p>Using a TextBlock <em>almost</em> does the trick but what's interesting is that the transition for SelectedUnfocused does not appear to be enforced which is to say that implementing your solution works perfectly until a person mouses over a previously selected item then the text once again goes to black. </p>
  
  <p>Here is my template:</p>
  
  <pre><code>&lt;!-- ItemStyle brushes --&gt;
  &lt;SolidColorBrush x:Key="BaseColorBrush" Color="White"/&gt;
  &lt;SolidColorBrush x:Key="BaseColorBrushFaint" Color="#265B0000"/&gt;
  &lt;SolidColorBrush x:Key="ForegroundColorBrush" Color="#FFFFFFFF"/&gt;
  &lt;SolidColorBrush x:Key="HoverBrush2" Color="#FF808000"/&gt;
  &lt;LinearGradientBrush x:Key="HoverBrush"  EndPoint="0.5,1" StartPoint="0.5,0"&gt;
      &lt;GradientStop Color="#FF406DC7" Offset="1"/&gt;
      &lt;GradientStop Color="#FF002C83"/&gt;
  &lt;/LinearGradientBrush&gt;
  
  &lt;LinearGradientBrush x:Key="ListboxHighlightBrush" EndPoint="0.5,1" StartPoint="0.5,0"&gt;
      &lt;GradientStop Color="#FF7CA8FF" Offset="1"/&gt;
      &lt;GradientStop Color="#FF376FDC"/&gt;
  &lt;/LinearGradientBrush&gt;
  
  &lt;SolidColorBrush x:Key="HyperlinkBrush" Color="#FFC8A1A1"/&gt;
  
  &lt;!-- Search Listbox ItemStyle --&gt;
  &lt;Style x:Key="ItemStyle" TargetType="ListBoxItem"&gt;
      &lt;Setter Property="Padding" Value="4"/&gt;
      &lt;Setter Property="HorizontalContentAlignment" Value="Left"/&gt;
      &lt;Setter Property="VerticalContentAlignment" Value="Top"/&gt;
      &lt;Setter Property="Background" Value="{StaticResource BaseColorBrush}"/&gt;
      &lt;Setter Property="BorderBrush" Value="{StaticResource HoverBrush}"/&gt;
      &lt;Setter Property="Foreground" Value="#FF333333"/&gt;
      &lt;Setter Property="BorderThickness" Value="1"/&gt;
      &lt;Setter Property="TabNavigation" Value="Local"/&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="ListBoxItem"&gt;
                  &lt;Grid&gt;
                      &lt;VisualStateManager.VisualStateGroups&gt;
                          &lt;VisualStateGroup x:Name="CommonStates"&gt;
                              &lt;VisualState x:Name="Normal"/&gt;
                              &lt;VisualState x:Name="MouseOver"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;DoubleAnimation Storyboard.TargetName="BGColor3" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/&gt;
                                      &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BGColor" Storyboard.TargetProperty="(UIElement.Opacity)"&gt;
                                          &lt;SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.3"/&gt;
                                      &lt;/DoubleAnimationUsingKeyFrames&gt;
                                      &lt;ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"&gt;
                                          &lt;EasingColorKeyFrame KeyTime="00:00:00" Value="White"/&gt;
                                      &lt;/ColorAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="Disabled"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)"&gt;
                                          &lt;SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.55"/&gt;
                                      &lt;/DoubleAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                          &lt;VisualStateGroup x:Name="SelectionStates"&gt;
                              &lt;VisualState x:Name="Unselected"/&gt;
                              &lt;VisualState x:Name="Selected"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BGColor2" Storyboard.TargetProperty="(UIElement.Opacity)"&gt;
                                          &lt;SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.9"/&gt;
                                      &lt;/DoubleAnimationUsingKeyFrames&gt;
                                      &lt;ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"&gt;
                                          &lt;EasingColorKeyFrame KeyTime="00:00:00" Value="White"/&gt;
                                      &lt;/ColorAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="SelectedUnfocused"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BGColor2" Storyboard.TargetProperty="(UIElement.Opacity)"&gt;
                                          &lt;SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.9"/&gt;
                                      &lt;/DoubleAnimationUsingKeyFrames&gt;
                                      &lt;ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"&gt;
                                          &lt;EasingColorKeyFrame KeyTime="00:00:00" Value="#FFFFFFFF"/&gt;
                                      &lt;/ColorAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                          &lt;VisualStateGroup x:Name="FocusStates"&gt;
                              &lt;VisualState x:Name="Focused"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0"&gt;
                                          &lt;DiscreteObjectKeyFrame KeyTime="0"&gt;
                                              &lt;DiscreteObjectKeyFrame.Value&gt;
                                                  &lt;Visibility&gt;Visible&lt;/Visibility&gt;
                                              &lt;/DiscreteObjectKeyFrame.Value&gt;
                                          &lt;/DiscreteObjectKeyFrame&gt;
                                      &lt;/ObjectAnimationUsingKeyFrames&gt;
                                      &lt;ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"&gt;
                                          &lt;EasingColorKeyFrame KeyTime="00:00:00" Value="White"/&gt;
                                      &lt;/ColorAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="Unfocused"&gt;
                                  &lt;Storyboard/&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                      &lt;/VisualStateManager.VisualStateGroups&gt;
                      &lt;Rectangle x:Name="BGColor2" Fill="{StaticResource HoverBrush}" Stroke="Black" StrokeThickness="0" Opacity="0"/&gt;
                      &lt;Rectangle x:Name="BGColor3" Fill="{StaticResource ListboxHighlightBrush}" StrokeThickness="0" Opacity="0"/&gt;
                      &lt;Rectangle x:Name="BGColor" Stroke="Black" StrokeThickness="0" Opacity="0.3" Fill="{TemplateBinding Background}"/&gt;
                      &lt;Border Height="20"&gt;
                          &lt;TextBlock Canvas.ZIndex="22" x:Name="contentPresenter" Foreground="{TemplateBinding Foreground}"
                              Text="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding 
                              HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" /&gt;
                      &lt;/Border&gt;
                      &lt;Rectangle  Opacity="0.4" x:Name="FocusVisual" Stroke="#BF313131" Margin="1" StrokeThickness="1" StrokeDashArray="1 2" StrokeDashCap="Square" Visibility="Collapsed" /&gt;
                      &lt;Rectangle x:Name="BorderRect" Stroke="Black" StrokeThickness="0" Opacity="0.3" /&gt;
                  &lt;/Grid&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>And my consumption of the template:</p>
  
  <pre><code>    &lt;ListBox ItemContainerStyle="{StaticResource ItemStyle}" x:Name="testListBox" /&gt;
  </code></pre>
  
  <p>And finally some code to populate the listbox:</p>
  
  <pre><code>            List&lt;string&gt; data = new List&lt;string&gt;();
              for (int i = 0; i &lt; 30; i++) { 
                  data.Add(DateTime.Now.AddDays(i).ToString("MMMM dd yyyy"));
              }           
              testListBox.ItemsSource = data;         
  </code></pre>