title: Using storyboard animations for mouseover and selection in WPF ListBoxItems
body: <p>I've got a WPF app that has a listbox which I'm trying to apply some mouseover effects to. It all works fine when I use simple <code>Setter</code>s to change the background color on mouseover/selection, but I figured it would look nicer if it animated between states, so I switched the <code>Setter</code>s for enter/exit <code>Storyboard</code>s. It all works nicely initially (mouseover animates in &amp; out, selection animates in &amp; out), but once something has been selected and then become deselcted, it will never do the mouseover effect again.</p>
  
  <p>Here's the minimal code example to show the issue:</p>
  
  <pre><code>&lt;Window x:Class="WpfTest.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="MainWindow" Height="500" Width="500"&gt;
    &lt;Window.Resources&gt;
      &lt;Style x:Key="ListboxItemStyle" TargetType="{x:Type ListBoxItem}"&gt;
        &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
            &lt;ControlTemplate TargetType="{x:Type ListBoxItem}"&gt;
              &lt;Border x:Name="border" BorderThickness="1" Height="50" Background="#000"&gt;
                &lt;ContentPresenter /&gt;
              &lt;/Border&gt;
              &lt;ControlTemplate.Triggers&gt;
                &lt;MultiTrigger&gt;
                  &lt;MultiTrigger.Conditions&gt;
                    &lt;Condition Property="IsMouseOver" Value="True" /&gt;
                    &lt;Condition Property="IsSelected" Value="False" /&gt;
                  &lt;/MultiTrigger.Conditions&gt;
                  &lt;MultiTrigger.EnterActions&gt;
                    &lt;BeginStoryboard&gt;
                      &lt;Storyboard&gt;
                        &lt;ColorAnimation Duration="0:0:0.15" Storyboard.TargetName="border"
                            Storyboard.TargetProperty="Background.Color" To="#00F" /&gt;
                      &lt;/Storyboard&gt;
                    &lt;/BeginStoryboard&gt;
                  &lt;/MultiTrigger.EnterActions&gt;
                  &lt;MultiTrigger.ExitActions&gt;
                    &lt;BeginStoryboard&gt;
                      &lt;Storyboard&gt;
                        &lt;ColorAnimation Duration="0:0:0.3" Storyboard.TargetName="border"
                            Storyboard.TargetProperty="Background.Color" To="#008" /&gt;
                      &lt;/Storyboard&gt;
                    &lt;/BeginStoryboard&gt;
                  &lt;/MultiTrigger.ExitActions&gt;
                &lt;/MultiTrigger&gt;
                &lt;Trigger Property="IsSelected" Value="True"&gt;
                  &lt;Trigger.EnterActions&gt;
                    &lt;BeginStoryboard&gt;
                      &lt;Storyboard&gt;
                        &lt;ColorAnimation Duration="0:0:0.15" Storyboard.TargetName="border"
                            Storyboard.TargetProperty="Background.Color" To="#F00" /&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.3" Storyboard.TargetName="border"
                            Storyboard.TargetProperty="Background.Color" To="#800" /&gt;
                      &lt;/Storyboard&gt;
                    &lt;/BeginStoryboard&gt;
                  &lt;/Trigger.ExitActions&gt;
                &lt;/Trigger&gt;
              &lt;/ControlTemplate.Triggers&gt;
            &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
        &lt;/Setter&gt;
      &lt;/Style&gt;
    &lt;/Window.Resources&gt;
    &lt;Grid&gt;
      &lt;ListBox x:Name="ConnectedDevicesListBox"
          ItemContainerStyle="{DynamicResource ListboxItemStyle}" &gt;
        &lt;ListItem/&gt;
        &lt;ListItem/&gt;
        &lt;ListItem/&gt;
        &lt;ListItem/&gt;
        &lt;ListItem/&gt;
        &lt;ListItem/&gt;
        &lt;ListItem/&gt;
        &lt;ListItem/&gt;
      &lt;/ListBox&gt;
    &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p>I've made the exit animations fade to a non-black color so you can see that the it's getting stuck after the <code>IsSelected</code> exit storyboard.</p>
  
  <p>Any ideas?</p>