Botón Animar en MouseOver y MouseDown

Question

Estoy creando mi propio ControlTemplate para un botón estándar en WPF. Quiero cambiar el fondo de mi botón cuando el usuario pasa el mouse por encima del botón, pero también cuando el usuario presiona el botón (hasta otro color). Esto parece ser un comportamiento común, pero no puedo hacer que funcione.

Mi plantilla consiste en un borde con una imagen adentro. Es el color de fondo (un gradiente realmente) del Borde que quiero animar. Tengo activadores en mi plantilla que activa animaciones (guiones gráficos).

El MouseOver/Out funciona bien. Mi problema ocurre cuando presiono el botón. La animación de prensa se ejecuta como debería, y también lo hace la animación de lanzamiento. Pero después de esto, MouseOut nunca se ejecutará. El botón se atasca en el estado de MouseOver.

¿Qué estoy haciendo mal?

<ControlTemplate TargetType="{x:Type Button}"> 
    <ControlTemplate.Resources> 
     <Storyboard x:Key="MouseOverAnimation"> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" Storyboard.TargetProperty="Color" To="#ffefefff" Duration="0:0:0.2" /> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" Storyboard.TargetProperty="Color" To="#ffc7c7ff" Duration="0:0:0.2" /> 
     </Storyboard> 
     <Storyboard x:Key="MouseOutAnimation"> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" Storyboard.TargetProperty="Color" To="#ffeeeeee" Duration="0:0:0.2" /> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" Storyboard.TargetProperty="Color" To="#ffcccccc" Duration="0:0:0.2" /> 
     </Storyboard> 
     <Storyboard x:Key="MouseDownAnimation"> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" Storyboard.TargetProperty="Color" To="#ffc7c7ff" Duration="0:0:0.1" /> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" Storyboard.TargetProperty="Color" To="#ff9a9aff" Duration="0:0:0.1" /> 
     </Storyboard> 
     <Storyboard x:Key="MouseUpAnimation"> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" Storyboard.TargetProperty="Color" To="#ffefefff" Duration="0:0:0.1" /> 
      <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" Storyboard.TargetProperty="Color" To="#ffc7c7ff" Duration="0:0:0.1" /> 
     </Storyboard> 
    </ControlTemplate.Resources> 


    <Border x:Name="ButtonBorder" CornerRadius="0" BorderBrush="#55aaaaaa" BorderThickness="1" Width="23" Height="22"> 
     <Border.Background> 
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
       <GradientBrush.GradientStops> 
        <GradientStop x:Name="ButtonBorderGradientStop1" Color="#ffeeeeee" Offset="0.0" /> 
        <GradientStop x:Name="ButtonBorderGradientStop2" Color="#ffcccccc" Offset="1.0" /> 
       </GradientBrush.GradientStops> 
      </LinearGradientBrush> 
     </Border.Background> 
     <Image x:Name="ButtonIcon" Source="icons/searchicon_bw.png" Width="16" Height="16" /> 
    </Border> 


    <ControlTemplate.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Trigger.EnterActions> 
       <BeginStoryboard Storyboard="{StaticResource MouseOverAnimation}" /> 
      </Trigger.EnterActions> 
      <Trigger.ExitActions> 
       <BeginStoryboard Storyboard="{StaticResource MouseOutAnimation}" /> 
      </Trigger.ExitActions> 
     </Trigger> 
     <Trigger Property="IsPressed" Value="True"> 
      <Trigger.EnterActions> 
       <BeginStoryboard Storyboard="{StaticResource MouseDownAnimation}" /> 
      </Trigger.EnterActions> 
      <Trigger.ExitActions> 
       <BeginStoryboard Storyboard="{StaticResource MouseUpAnimation}" /> 
      </Trigger.ExitActions> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

Answer 1

Las animaciones tienen una propiedad llamada FillBehavior, el valor predeterminado es HoldEnd.

Después de que termine la animación de MouseUp, contiene el valor que impide que la animación del mouse se muestre correctamente. La animación de salida de mouse realmente se ejecuta, pero está cubierta por la animación del mouse. Si cambia el orden de los desencadenadores, colocando IsPressed primero, puede ver que la animación IsMouseOver cubre todas las animaciones IsPressed.

Puede establecer FillBehavior a parada para hacer las animaciones dejar de cubrir la propiedad cuando se hacen.

En su caso, configurar FillBehavior para detenerse en su MouseOutAnimation y MouseUpAnimation hace el truco.

(En este ejemplo establecido en el guión gráfico por lo que se aplica a todas las animaciones contenidas.)

<ControlTemplate.Resources> 
    <Storyboard x:Key="MouseOverAnimation" Storyboard.TargetProperty="Color"> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" To="#ffefefff" Duration="0:0:0.2" /> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" To="#ffc7c7ff" Duration="0:0:0.2" /> 
    </Storyboard> 
    <Storyboard x:Key="MouseOutAnimation" Storyboard.TargetProperty="Color" 
       FillBehavior="Stop"> <!-- <=================== --> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" To="#ffeeeeee" Duration="0:0:0.2" /> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" To="#ffcccccc" Duration="0:0:0.2" /> 
    </Storyboard> 
    <Storyboard x:Key="MouseDownAnimation" Storyboard.TargetProperty="Color"> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" To="#ffc7c7ff" Duration="0:0:0.1" /> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" To="#ff9a9aff" Duration="0:0:0.1" /> 
    </Storyboard> 
    <Storyboard x:Key="MouseUpAnimation" Storyboard.TargetProperty="Color" 
       FillBehavior="Stop"> <!-- <=================== --> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop1" To="#ffefefff" Duration="0:0:0.1" /> 
     <ColorAnimation Storyboard.TargetName="ButtonBorderGradientStop2" To="#ffc7c7ff" Duration="0:0:0.1" /> 
    </Storyboard> 
</ControlTemplate.Resources> 

Puede encontrar más información sobre FillBehavior en el artículo de MSDN Animación general bajo What Happens After an Animation Ends?.