Bouton d'animation sur MouseOver et MouseDown

Question

Je crée mon propre ControlTemplate pour un bouton standard dans WPF. Je veux changer l'arrière-plan de mon bouton lorsque l'utilisateur passe la souris sur le bouton, mais aussi lorsque l'utilisateur appuie sur le bouton (pour une autre couleur). Cela semble être un comportement commun, mais je n'arrive pas à le faire fonctionner.

Mon modèle est constitué d'une bordure avec une image à l'intérieur. C'est la couleur de fond (vraiment un dégradé) de la bordure que je veux animer. J'ai des déclencheurs dans mon modèle qui active les animations (storyboards).

La fonction MouseOver/Out fonctionne très bien. Mon problème se produit lorsque j'appuie sur le bouton. L'animation Press s'exécute comme il se doit, tout comme l'animation Release. Mais après cela, le MouseOut ne fonctionnera jamais. Le bouton reste bloqué dans l'état MouseOver.

Qu'est-ce que je fais 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

Animations ont une propriété appelée FillBehavior, la valeur par défaut est HoldEnd. Une fois votre animation MouseUp terminée, elle conserve la valeur empêchant l'animation de la souris de s'afficher correctement. L'animation de la souris s'exécute, mais elle est couverte par l'animation de la souris. Si vous inversez l'ordre de vos déclencheurs, en plaçant IsPressed en premier, vous pouvez voir que l'animation IsMouseOver couvre toutes les animations IsPressed.

Vous pouvez définir FillBehavior à Arrêt pour faire les animations cessent de couvrir la propriété quand ils sont faits.

Dans votre cas, définir FillBehavior sur Stop sur votre MouseOutAnimation et MouseUpAnimation fait l'affaire.

(Dans cet exemple situé sur le story-board de sorte qu'il applique à toutes les animations endigués.)

<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> 

Vous pouvez trouver plus d'informations sur FillBehavior dans l'article MSDN animation Vue d'ensemble sous What Happens After an Animation Ends?.