| title | ms.custom | ms.date | ms.prod | ms.reviewer | ms.suite | ms.technology | ms.tgt_pltfrm | ms.topic | helpviewer_keywords | ms.assetid | caps.latest.revision | author | ms.author | manager | |||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
How to: Animate a Property by Using a Storyboard |
03/30/2017 |
.net-framework |
|
article |
|
f4a314e9-1da2-4367-85fc-1232487efa7a |
12 |
dotnet-bot |
dotnetcontent |
wpickett |
How to: Animate a Property by Using a Storyboard
This example shows how to use a xref:System.Windows.Media.Animation.Storyboard to animate properties. To animate a property by using a xref:System.Windows.Media.Animation.Storyboard, create an animation for each property that you want to animate and also create a xref:System.Windows.Media.Animation.Storyboard to contain the animations.
The type of property determines the type of animation to use. For example, to animate a property that takes xref:System.Double values, use a xref:System.Windows.Media.Animation.DoubleAnimation. The xref:System.Windows.Media.Animation.Storyboard.TargetName%2A and xref:System.Windows.Media.Animation.Storyboard.TargetProperty%2A attached properties specify the object and property to which the animation is applied.
To start a storyboard in [!INCLUDETLA#tla_xaml], use a xref:System.Windows.Media.Animation.BeginStoryboard action and an xref:System.Windows.EventTrigger. The xref:System.Windows.EventTrigger begins the xref:System.Windows.Media.Animation.BeginStoryboard action when the event that is specified by its xref:System.Windows.EventTrigger.RoutedEvent%2A property occurs. The xref:System.Windows.Media.Animation.BeginStoryboard action starts the xref:System.Windows.Media.Animation.Storyboard.
The following example uses xref:System.Windows.Media.Animation.Storyboard objects to animate two xref:System.Windows.Controls.Button controls. To make the first button change in size, its xref:System.Windows.FrameworkElement.Width%2A is animated. To make the second button change color, the xref:System.Windows.Media.SolidColorBrush.Color%2A property of the xref:System.Windows.Media.SolidColorBrush is used to set the xref:System.Windows.Controls.Control.Background%2A of the button that is animated.
Example
[!code-xamlAnimatePropertyStoryboards#1]
[!NOTE] Although animations can target both a xref:System.Windows.FrameworkElement object, such as a xref:System.Windows.Controls.Control or xref:System.Windows.Controls.Panel, and a xref:System.Windows.Freezable object, such as a xref:System.Windows.Media.Brush or xref:System.Windows.Media.Transform, only framework elements have a xref:System.Windows.FrameworkElement.Name%2A property. To assign a name to a freezable so that it can be targeted by an animation, use the x:Name Directive, as the previous example shows.
If you use code, you must create a xref:System.Windows.NameScope for a xref:System.Windows.FrameworkElement and register the names of the objects to animate with that xref:System.Windows.FrameworkElement. To start the animations in code, use a xref:System.Windows.Media.Animation.BeginStoryboard action with an xref:System.Windows.EventTrigger. Optionally, you can use an event handler and the xref:System.Windows.Media.Animation.Storyboard.Begin%2A method of xref:System.Windows.Media.Animation.Storyboard. The following example shows how to use the xref:System.Windows.Media.Animation.Storyboard.Begin%2A method.
[!code-csharpAnimatePropertyStoryboards#11] [!code-vbAnimatePropertyStoryboards#11]
For more information about animation and storyboards, see Animation Overview.
If you use code, you are not limited to using xref:System.Windows.Media.Animation.Storyboard objects in order to animate properties. For more information and examples, see Animate a Property Without Using a Storyboard and Animate a Property by Using an AnimationClock.