title: Changing text foreground color on mouseover and selection with Silverlight 4 ListBox
body: <p>I'm trying to accomplish the following scenario with a Silverlight ListBox:</p>
  
  <ol>
  <li>Normal items have a foreground text color of black and background color of white  </li>
  <li>Selected items have a foreground text color of white and a background color of dark blue  </li>
  <li>On mouse-over the background becomes a orangish and the foreground text color is black</li>
  </ol>
  
  <p>I have each of those pieces working individually but can't get them all working together. I started by retemplating the ListBoxItem, wrapping the ContentPresenter in a ContentControl and using Visual States to change the foreground and backgrounds for selected and mouseover states. But the selected and mouseover states can both apply simultaneously, which causes problems when you mouseover a selected item and then mouse out. The recommendation is to avoid changing a single property in states that are in different state groups. So I wrapped another ContentControl around the first content control, and tried changing the the parent ContentControl's foreground in one visual state and the child ContentControl's foreground in the other visual state. But it looks like ContentControl's don't inherit the foreground property from their parent, so that doesn't seem to work (even if I retemplate the ContentControl to remove the explicit foreground property setter).</p>
  
  <p>So I'm a bit stuck - don't know what to try next. Here's the XAML from my most recent iteration</p>
  
  <pre><code>&lt;Style x:Key="SimpleListBoxItem" TargetType="ListBoxItem"&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;Storyboard&gt;
                                      &lt;ColorAnimation Duration="0" To="Yellow" Storyboard.TargetName="ContentControlChild"
                                                                          Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" /&gt;
                                  &lt;/Storyboard&gt;
  
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="MouseOver"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Mouse_Over" /&gt;
                                      &lt;ColorAnimation Duration="0" To="{StaticResource G360-MainBlack}" Storyboard.TargetName="ContentControlChild"
                                                                          Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" /&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="Disabled"/&gt;
                          &lt;/VisualStateGroup&gt;
                          &lt;VisualStateGroup x:Name="FocusStates"&gt;
                              &lt;VisualState x:Name="Unfocused"/&gt;
                              &lt;VisualState x:Name="Focused"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Selected1" /&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                          &lt;VisualStateGroup x:Name="SelectionStates"&gt;
                              &lt;VisualState x:Name="Unselected"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Selected1" /&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="Selected"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Selected1" /&gt;
                                      &lt;ColorAnimation Duration="0" To="White" Storyboard.TargetName="ContentControlParent"
                                                                          Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" /&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="SelectedUnfocused"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Selected1" /&gt;
                                      &lt;ColorAnimation Duration="0" To="White" Storyboard.TargetName="ContentControlParent"
                                                                          Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" /&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                      &lt;/VisualStateManager.VisualStateGroups&gt;
                      &lt;Rectangle x:Name="Selected1" Opacity="0" Fill="{StaticResource G360-ListSelected}" /&gt;
                      &lt;Rectangle x:Name="Mouse_Over" RadiusX="2" RadiusY="2" Stroke="{StaticResource ListBorderSelected}" Opacity="0" Margin="2" Fill="{StaticResource -ListMouseOver}" /&gt;
                      &lt;ContentControl x:Name="ContentControlParent"&gt;
  
                          &lt;ContentControl x:Name="ContentControlChild"&gt;
                              &lt;ContentControl.Style&gt;
                                  &lt;Style TargetType="ContentControl"&gt;
                                      &lt;Setter Property="HorizontalContentAlignment" Value="Left"/&gt;
                                      &lt;Setter Property="VerticalContentAlignment" Value="Top"/&gt;
                                      &lt;Setter Property="Template"&gt;
                                          &lt;Setter.Value&gt;
                                              &lt;ControlTemplate TargetType="ContentControl"&gt;
                                                  &lt;ContentPresenter
                                                        Content="{TemplateBinding Content}"
                                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                                        Cursor="{TemplateBinding Cursor}"
                                                        Margin="{TemplateBinding Padding}"
                                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/&gt;
                                              &lt;/ControlTemplate&gt;
                                          &lt;/Setter.Value&gt;
                                      &lt;/Setter&gt;
                                  &lt;/Style&gt;
                              &lt;/ContentControl.Style&gt;
                              &lt;ContentPresenter x:Name="ContextText" Content="{TemplateBinding Content}" VerticalAlignment="Center" Margin="8,5,4,5"/&gt;
                          &lt;/ContentControl&gt;
                      &lt;/ContentControl&gt;
                  &lt;/Grid&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>