Animieren Sie die Taste auf MouseOver und MouseDown
Ich mache meine eigenen ControlTemplate für einen standard-Button in WPF. Ich möchte den hintergrund ändern, meine Taste, wenn der Benutzer mit der Maus über die Schaltfläche mit der Maus, sondern auch dann, wenn der Benutzer den Knopf drückt (um noch eine andere Farbe). Das scheint ein normales Verhalten, aber ich kann nicht ankommen es zu wirken.
Meine Vorlage besteht aus einem Rahmen mit einem Bild im inneren. Es ist die Hintergrundfarbe (ein Farbverlauf wirklich) von der Grenze, dass ich Sie animieren möchten. Ich habe Trigger in mein template aktiviert und Animationen (storyboards).
Den MouseOver/Out funktioniert genauso gut. Mein problem tritt auf, wenn ich auf den Knopf drücke. Die Presse animation läuft, wie es sollte, und so sieht der Release-animation. Danach aber das MouseOut wird nie ausgeführt. Die Taste klemmt im MouseOver-Zustand.
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>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Animationen haben eine Eigenschaft namens FillBehavior, der Standardwert ist HoldEnd.
Nach Ihrem MouseUp-animation beendet ist, hält der Wert der Verhinderung der Maus animation korrekt anzeigen. Die Maus-animation eigentlich nicht laufen, aber ist bedeckt von der Maus bis animation. Wenn Sie spiegeln die Reihenfolge der Trigger, setzen IsPressed können Sie zunächst sehen, dass die IsMouseOver-animation deckt alle IsPressed Animationen.
Können Sie festlegen, FillBehavior zu Stop, um die Animationen zu stoppen Abdeckung der Eigenschaft, wenn Sie fertig sind.
In Ihrem Fall, die Einstellung FillBehavior zu Stoppen auf Ihrem MouseOutAnimation und MouseUpAnimation funktioniert der trick.
(In diesem Beispiel legen Sie Sie auf das storyboard, so dass es gilt für alle enthaltenen Animationen.)
Finden Sie mehr info auf FillBehavior in dem MSDN-Artikel, Animations-Übersicht unter Was Passiert, wenn eine Animation Beendet ist?.