Gewusst wie: Festlegen einer Eigenschaft nach einer Storyboard-Animation
Aktualisiert: November 2007
In einigen Fällen kann es so aussehen, als ob Sie den Wert einer Eigenschaft nicht ändern können, nachdem sie animiert wurde.
Beispiel
Im folgenden Beispiel wird ein Storyboard verwendet, um die Farbe für SolidColorBrush zu animieren. Das Storyboard wird ausgelöst, wenn auf die Schaltfläche geklickt wird. Das Completed-Ereignis wird so behandelt, dass das Programm benachrichtigt wird, wenn der ColorAnimation-Vorgang abgeschlossen ist.
<Button
Content="Animate and Then Set Example 1">
<Button.Background>
<SolidColorBrush x:Name="Button1BackgroundBrush"
Color="Red" />
</Button.Background>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="Button1BackgroundBrush"
Storyboard.TargetProperty="Color"
From="Red" To="Yellow" Duration="0:0:5"
FillBehavior="HoldEnd"
Completed="setButton1BackgroundBrushColor" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
Nachdem der ColorAnimation-Vorgang abgeschlossen wurde, versucht das Programm, die Farbe des Pinsels in Blau zu ändern.
private void setButton1BackgroundBrushColor(object sender, EventArgs e)
{
// Does not appear to have any effect:
// the brush remains yellow.
Button1BackgroundBrush.Color = Colors.Blue;
}
Es erscheint, als ob der vorherige Code keine Auswirkung hat: Der Pinsel bleibt gelb, also auf dem Wert, der von ColorAnimation als Animation des Pinsels angegeben wurde. Tatsächlich wird jedoch der zugrunde liegende Eigenschaftenwert (der Basiswert) in Blau geändert. Der aktive bzw. der aktuelle Wert bleibt jedoch der Wert für Gelb, weil ColorAnimation den Basiswert noch überschreibt. Wenn Sie möchten, dass der Basiswert wieder zum aktiven Wert wird, müssen Sie es rückgängig machen, dass die sich die Animation auf die Eigenschaft auswirkt. Es gibt drei Möglichkeiten, dies bei Storyboard-Animationen zu erreichen:
Legen Sie die FillBehavior-Eigenschaft der Animation auf den Wert Stop fest.
Entfernen Sie das gesamte Storyboard.
Entfernen Sie die Animation aus der jeweiligen Eigenschaft.
Festlegen der FillBehavior-Eigenschaft der Animation auf "Stop"
Indem Sie FillBehavior auf Stop setzen, weisen Sie die Animation an, nicht mehr auf die Zieleigenschaft zu wirken, nachdem das Ende des Aktivitätszeitraums erreicht wurde.
<Button
Content="Animate and Then Set Example 2">
<Button.Background>
<SolidColorBrush x:Name="Button2BackgroundBrush"
Color="Red" />
</Button.Background>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="Button2BackgroundBrush"
Storyboard.TargetProperty="Color"
From="Red" To="Yellow" Duration="0:0:5"
FillBehavior="Stop"
Completed="setButton2BackgroundBrushColor" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
private void setButton2BackgroundBrushColor(object sender, EventArgs e)
{
// This appears to work:
// the brush changes to blue.
Button2BackgroundBrush.Color = Colors.Blue;
}
Entfernen des gesamten Storyboards
Indem Sie einen RemoveStoryboard-Trigger oder die Storyboard.Remove-Methode verwenden, weisen Sie die Storyboard-Animationen an, nicht mehr auf ihre Zieleigenschaften zu wirken. Der Unterschied zwischen diesem Ansatz und dem Festlegen der FillBehavior-Eigenschaft besteht darin, dass Sie das Storyboard jederzeit entfernen können, während sich die FillBehavior-Eigenschaft nur auswirkt, nachdem die Animation das Ende ihres Aktivitätszeitraums erreicht hat.
<Button
Name="Button3"
Content="Animate and Then Set Example 3">
<Button.Background>
<SolidColorBrush x:Name="Button3BackgroundBrush"
Color="Red" />
</Button.Background>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Name="MyBeginStoryboard">
<Storyboard x:Name="MyStoryboard">
<ColorAnimation
Storyboard.TargetName="Button3BackgroundBrush"
Storyboard.TargetProperty="Color"
From="Red" To="Yellow" Duration="0:0:5"
FillBehavior="HoldEnd"
Completed="setButton3BackgroundBrushColor" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
private void setButton3BackgroundBrushColor(object sender, EventArgs e)
{
// This appears to work:
// the brush changes to blue.
MyStoryboard.Remove(Button3);
Button3BackgroundBrush.Color = Colors.Blue;
}
Entfernen einer Animation aus einer einzelnen Eigenschaft
Ein anderes Verfahren zum Beenden der Auswirkung einer Animation auf eine Eigenschaft ist die Verwendung der BeginAnimation(DependencyProperty, AnimationTimeline)-Methode des Objekts, das animiert wird. Geben Sie die animierte Eigenschaft als ersten Parameter und null als zweiten Parameter an.
<Button
Name="Button4"
Content="Animate and Then Set Example 4">
<Button.Background>
<SolidColorBrush x:Name="Button4BackgroundBrush"
Color="Red" />
</Button.Background>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="Button4BackgroundBrush"
Storyboard.TargetProperty="Color"
From="Red" To="Yellow" Duration="0:0:5"
FillBehavior="HoldEnd"
Completed="setButton4BackgroundBrushColor" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
private void setButton4BackgroundBrushColor(object sender, EventArgs e)
{
// This appears to work:
// the brush changes to blue.
Button4BackgroundBrush.BeginAnimation(SolidColorBrush.ColorProperty, null);
Button4BackgroundBrush.Color = Colors.Blue;
}
Dieses Verfahren funktioniert auch für Animationen ohne Storyboard.
Siehe auch
Konzepte
Übersicht über die Verfahren zur Animation von Eigenschaften