Pooja PoojariandAndy De George
692293bda8
* Updated H2 and column headers. * Metadata update. * Minor edits. * Apply suggestions from code review Co-authored-by: Andy (Steve) De George <[email protected]>
6.1 KiB
title, description, ms.date, ms.custom, dev_langs, helpviewer_keywords, ms.assetid
| title | description | ms.date | ms.custom | dev_langs | helpviewer_keywords | ms.assetid | |||
|---|---|---|---|---|---|---|---|---|---|
| How to: Set a Property After Animating It with a Storyboard | Learn how to set a Property after animating it with a Storyboard. | 03/30/2017 | devdivchpfy22 |
|
|
79466556-4dbf-40bd-9c1e-a77613b07077 |
How to: Set a Property After Animating It with a Storyboard
In some cases, it might appear that you can't change the value of a property after it has been animated.
Animate the color of a SolidColorBrush
In the following example, a xref:System.Windows.Media.Animation.Storyboard is used to animate the color of a xref:System.Windows.Media.SolidColorBrush. The storyboard is triggered when the button is clicked. The xref:System.Windows.Media.Animation.Timeline.Completed event is handled so that the program is notified when the xref:System.Windows.Media.Animation.ColorAnimation completes.
[!code-xamltimingbehaviors_snip#GraphicsMMButton1Declaration]
Change the brush color
After the xref:System.Windows.Media.Animation.ColorAnimation completes, the program attempts to change the brush's color to blue.
[!code-csharptimingbehaviors_snip#GraphicsMMButton1Handler] [!code-vbtimingbehaviors_snip#GraphicsMMButton1Handler]
The previous code doesn't appear to do anything: the brush remains yellow, which is the value supplied by the xref:System.Windows.Media.Animation.ColorAnimation that animated the brush. The underlying property value (the base value) is actually changed to blue. However, the effective, or current, value remains yellow because the xref:System.Windows.Media.Animation.ColorAnimation is still overriding the base value. If you want the base value to become the effective value again, you must stop the animation from influencing the property. There are three ways to do this with storyboard animations:
-
Set the animation's xref:System.Windows.Media.Animation.Timeline.FillBehavior%2A property to xref:System.Windows.Media.Animation.FillBehavior.Stop
-
Remove the entire Storyboard.
-
Remove the animation from the individual property.
Set the animation's FillBehavior property to Stop
By setting xref:System.Windows.Media.Animation.Timeline.FillBehavior%2A to xref:System.Windows.Media.Animation.FillBehavior.Stop, you tell the animation to stop affecting its target property after it reaches the end of its active period.
[!code-xamltimingbehaviors_snip#GraphicsMMButton2Declaration]
[!code-csharptimingbehaviors_snip#GraphicsMMButton2Handler] [!code-vbtimingbehaviors_snip#GraphicsMMButton2Handler]
Remove the entire storyboard
By using a xref:System.Windows.Media.Animation.RemoveStoryboard trigger or the xref:System.Windows.Media.Animation.Storyboard.Remove%2A?displayProperty=nameWithType method, you tell the storyboard animations to stop affecting their target properties. The difference between this approach and setting the xref:System.Windows.Media.Animation.Timeline.FillBehavior%2A property is that you can remove the storyboard at anytime, while the xref:System.Windows.Media.Animation.Timeline.FillBehavior%2A property only has an effect when the animation reaches the end of its active period.
[!code-xamltimingbehaviors_snip#GraphicsMMButton3Declaration]
[!code-csharptimingbehaviors_snip#GraphicsMMButton3Handler] [!code-vbtimingbehaviors_snip#GraphicsMMButton3Handler]
Remove an animation from an individual property
Another technique to stop an animation from affecting a property is to use the xref:System.Windows.Media.Animation.Animatable.BeginAnimation%28System.Windows.DependencyProperty%2CSystem.Windows.Media.Animation.AnimationTimeline%29 method of the object being animated. Specify the property being animated as the first parameter and null as the second.
[!code-xamltimingbehaviors_snip#GraphicsMMButton4Declaration]
[!code-csharptimingbehaviors_snip#GraphicsMMButton4Handler] [!code-vbtimingbehaviors_snip#GraphicsMMButton4Handler]
This technique also works for non-storyboard animations.