title: Hightlight effect with animation for `ComboBoxItem`s
body: <p>I want a simple animation effect on the background of <code>ComboBoxItem</code>s in the <code>ComboBox</code> element. The items should highlight with the defined color when the pointer is over it and revert to its original state when the pointer leaves.</p>
  
  <p>This is my template</p>
  
  <pre><code>&lt;Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}"&gt;
      &lt;Setter Property="SnapsToDevicePixels" Value="true" /&gt;
      &lt;Setter Property="OverridesDefaultStyle" Value="true" /&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type ComboBoxItem}"&gt;
                  &lt;Border x:Name="Border"
                          Padding="2"
                          SnapsToDevicePixels="true"&gt;
                      &lt;Border.Style&gt;
                          &lt;Style TargetType="{x:Type Border}"&gt;
                              &lt;Style.Triggers&gt;
                                  &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                                      &lt;Trigger.EnterActions&gt;
                                          &lt;BeginStoryboard&gt;
                                              &lt;Storyboard&gt;
                                                  &lt;ColorAnimation Duration="0:0:0.01"
                                                                  Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                                                                  To="#FFA7ACD4" /&gt;
                                              &lt;/Storyboard&gt;
                                          &lt;/BeginStoryboard&gt;
                                      &lt;/Trigger.EnterActions&gt;
                                      &lt;Trigger.ExitActions&gt;
                                          &lt;BeginStoryboard&gt;
                                              &lt;Storyboard&gt;
                                                  &lt;ColorAnimation Duration="0:0:0.6"
                                                                  Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                                                                  To="White" /&gt;
                                              &lt;/Storyboard&gt;
                                          &lt;/BeginStoryboard&gt;
                                      &lt;/Trigger.ExitActions&gt;
                                  &lt;/Trigger&gt;
                              &lt;/Style.Triggers&gt;
                          &lt;/Style&gt;
                      &lt;/Border.Style&gt;
                      &lt;VisualStateManager.VisualStateGroups&gt;
                          &lt;VisualStateGroup x:Name="SelectionStates"&gt;
                              &lt;VisualState x:Name="Unselected" /&gt;
                              &lt;VisualState x:Name="Selected"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"&gt;
                                          &lt;EasingColorKeyFrame KeyTime="0" Value="{DynamicResource ColorItemSelectedBackground}" /&gt;
                                      &lt;/ColorAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="SelectedUnfocused"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                              Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"&gt;
                                          &lt;EasingColorKeyFrame KeyTime="0"
                                              Value="{StaticResource SelectedUnfocusedColor}" /&gt;
                                      &lt;/ColorAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                      &lt;/VisualStateManager.VisualStateGroups&gt;
                      &lt;ContentPresenter /&gt;
                  &lt;/Border&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>I have a hunch that triggers is the way to go.
  I've tried using <code>VisualSateGroups</code> with both <code>MouseEnter</code> and <code>MouseOver</code>.
  <code>MouseEnter</code> did nothing and <code>MouseOver</code> didn't revert to its original state.
  I recon this example reflects best on what I want to achieve.</p>
  
  <p>WPF is not new to me but I find dependency objects very confusing. Especially with the multiple approaches available for manipulating or animating properties.
  There is a <code>NullReferenceException</code> upon opening the dropbox. Which is clear to me. There simply isn't a dependency object linked to the storyboard, but in this approach, I can't set the <code>TargetName</code> property inside a <code>Style</code> trigger.</p>
  
  <p>What's the right approach for this? If using <code>VisualSate</code> is the "native" approach, then I would prefer this over triggers.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>This works, but it uses triggers. I would prefer a solution using <code>VisualStateGroups</code> just for learning purposes.</p>
  
  <pre><code>&lt;Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}"&gt;
      &lt;Setter Property="SnapsToDevicePixels" Value="true" /&gt;
      &lt;Setter Property="OverridesDefaultStyle" Value="true" /&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="{x:Type ComboBoxItem}"&gt;
                  &lt;ControlTemplate.Triggers&gt;
                      &lt;Trigger Property="IsHighlighted" Value="true"&gt;
                          &lt;Trigger.EnterActions&gt;
                              &lt;BeginStoryboard&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ColorAnimation Duration="0:0:0.01"
                                                      Storyboard.TargetName="Border"
                                                      Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                      To="#FFA7ACD4" /&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/BeginStoryboard&gt;
                          &lt;/Trigger.EnterActions&gt;
  
                          &lt;Trigger.ExitActions&gt;
                              &lt;BeginStoryboard&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ColorAnimation Duration="0:0:0.6"
                                                      Storyboard.TargetName="Border"
                                                      Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                      To="White" /&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/BeginStoryboard&gt;
                          &lt;/Trigger.ExitActions&gt;
                      &lt;/Trigger&gt;
                  &lt;/ControlTemplate.Triggers&gt;
                  &lt;Border x:Name="Border"
                          Padding="2"
                          SnapsToDevicePixels="true"
                          Background="White"&gt;
                      &lt;VisualStateManager.VisualStateGroups&gt;
                          &lt;VisualStateGroup x:Name="SelectionStates"&gt;
                              &lt;VisualState x:Name="Unselected" /&gt;
                              &lt;VisualState x:Name="Selected"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"&gt;
                                          &lt;EasingColorKeyFrame KeyTime="0" Value="{DynamicResource ColorItemSelectedBackground}" /&gt;
                                      &lt;/ColorAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                              &lt;VisualState x:Name="SelectedUnfocused"&gt;
                                  &lt;Storyboard&gt;
                                      &lt;ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                              Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"&gt;
                                          &lt;EasingColorKeyFrame KeyTime="0"
                                              Value="{StaticResource SelectedUnfocusedColor}" /&gt;
                                      &lt;/ColorAnimationUsingKeyFrames&gt;
                                  &lt;/Storyboard&gt;
                              &lt;/VisualState&gt;
                          &lt;/VisualStateGroup&gt;
                      &lt;/VisualStateManager.VisualStateGroups&gt;
                      &lt;ContentPresenter /&gt;
                  &lt;/Border&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>