Animieren Schaltfläche auf MouseOver und MouseDown

Question

Ich mache meine eigene ControlTemplate für eine Standard-Schaltfläche in WPF. Ich möchte den Hintergrund meiner Schaltfläche ändern, wenn der Benutzer mit der Maus über die Schaltfläche fährt, aber auch, wenn der Benutzer die Schaltfläche drückt (zu einer anderen Farbe). Dies scheint ein häufiges Verhalten zu sein, aber ich kann es nicht zum Laufen bringen.

Meine Vorlage besteht aus einem Rahmen mit einem Bild im Inneren. Es ist die Hintergrundfarbe (eigentlich ein Farbverlauf) der Border, die ich animieren möchte. Ich habe Auslöser in meiner Vorlage, die Animationen (Storyboards) aktiviert.

Das MouseOver/Out funktioniert gut. Mein Problem tritt auf, wenn ich den Knopf drücke. Die Presseanimation wird ordnungsgemäß ausgeführt, ebenso wie die Release-Animation. Aber danach wird der MouseOut niemals ausgeführt. Die Schaltfläche bleibt im Status MouseOver hängen.

Was mache ich falsch?

<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

Animationen haben eine Eigenschaft namens FillBehavior, ist der Standardwert HoldEnd.

Nachdem Ihre MouseUp-Animation beendet ist, enthält sie den Wert, der verhindert, dass die Mouse-Out-Animation ordnungsgemäß angezeigt wird. Die Mouse-Out-Animation läuft zwar, wird aber von der Mouse-Up-Animation abgedeckt. Wenn Sie die Reihenfolge Ihrer Trigger umkehren, können Sie zuerst IsPressed setzen und sehen, dass die IsMouseOver-Animation alle IsPressed-Animationen abdeckt.

Sie können FillBehavior zu Stopp setzen die Animationen die Eigenschaft zu stoppen, um zu verdecken, wenn sie fertig sind.

In Ihrem Fall, FillBehavior zu Stop auf Ihre MouseOutAnimation und MouseUpAnimation zu setzen, macht den Trick.

(In diesem Beispiel auf dem Storyboard festgelegt, so dass es gilt für all enthaltenen Animationen.)

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

können Sie weitere Informationen über FillBehavior in der MSDN-Artikel Übersicht über Animationen unter What Happens After an Animation Ends? finden.