Introduction
Windows Presentation Foundation (WPF) is a powerful technology when it comes to graphics and rich user interfaces. Imaginary Screen Transitions are no longer out of reach.
WPF would define Animation as the sequence of steps that are followed to change the values of a dependency property over time.
This article helps you start with the basic animations in WPF. Subsequent articles on this topic will delve deeper into the concept.
Before we dive into the topic, this excerpt from MSDN is worth reading:
For a property to have animation capabilities, it must meet the following three requirements:
- It must be a dependency property.
- It must belong to a class that inherits from DependencyObject and implements the IAnimatable interface.
- There must be a compatible animation type available.
Before we start looking at animation samples, let’s first start by looking at some key terminologies.
- Dependancy Object: This represents an object which participates in the dependency property system.
- Dependancy Property: This represents a property that can be set through easy methods.
- Double Animation: A type of animation that generates double values to control the dependency property of a dependency object.
- Story Board: The timeline properties of an object can be controlled using a Story Board.
The MSDN sample of a rectangle fading in/fading out (animation) is the simplest one to start with:
<Rectangle Name=”MyRectangle” Width=”100″ Height=”100″ Fill=”Blue”>
<Rectangle.Triggers>
<!– Animates the rectangle’s opacity. –>
<EventTrigger RoutedEvent=”Rectangle.Loaded”>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName=”MyRectangle”
Storyboard.TargetProperty=”Opacity”
From=”1.0″ To=”0.0″ Duration=”0:0:5″
AutoReverse=”True” RepeatBehavior=”Forever” />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
The sample shows a rectangle whose opacity is changed at a pre-defined length of time. This is through the double animation and StoryBoard objects. The StoryBoard object is the core object that defines a series of steps to be executed. The storyboard has two main properties:
- TargetName,
- TargetProperty
The TargetName and the TargetProperty are the keys that link to the animation created on the DependancyObject. The double animation as the name suggests, is used to control the properties of dependency objects that are of type double values.
The animation type shares the following properties:
- From
- To
- Duration
- Repeat Behavior
The event is triggered used the routed events and in this case it is the Loaded event of the rectangle. The RoutedEvents can be as simple as a MouseEnter or MouseLeave events too. Note that you can use the DataTriggers to trigger these storyboard actions when the data of the control changes. Also note that the animations are executed asynchronously.
In the example shown above, opacity is the dependency property. The From and the To properties of the double animation allows us to create a transition effect between the values. As per the default behavior when the animation ends, the value of the dependency property on which the animation is applied is copied over to the “To” value of the animation. This can be avoided and the value can be reset to the original value using the FillBehavior property. The value of this property should be Stop.
The AutoReverse property of the animation lets us reverse the animation.
The double animation and other animation classes can be found at System.Windows.Media.Animation namespace. A few ones worth mentioning are the PointAnimation and ColorAnimation.
This MSDN link on Animations covers each one of these properties in greater detail.
Animations are also controlled by the Repeat Behaviors. In the code sample above, we see that it is set to “Forever”. The Repeat Behavior simply determines the timeline’s repeatness after the animation duration.
The code snippet below shows you how to do a simple fade in an animation on a rectangle object.
//Create a double animation
DoubleAnimation myFadeInAnimation =
new DoubleAnimation(0, 1, new Duration(TimeSpan.FromSeconds(3.0)));
//Create the storyboard target
Storyboard.SetTarget(myFadeInAnimation, myRectangle);
//Set the Target property
Storyboard.SetTargetProperty(fadeInAnimation, new PropertyPath(UIElement.OpacityProperty));
Storyboard myStoryBoard = new Storyboard();
//Add the animation to the storyboard.
myStoryBoard.Children.Add(myFadeInAnimation);
//Start the storyboard.
myStoryBoard.Begin();
You can store these storyboard animations in resources and share them across your projects too. This is possible with the same approach as other objects stored in resources.
Use the FindResource method and specify the key of the StoryBoard as in the following code sample.
Storyboard myStoryBoard = (Storyboard) FindResource( “myStoryBoardKey” );
You can using the PointAnimationUsingPath class in the System.Windows.Media.Animation namespace to animate the values of the PathGeometry.
PointAnimationUsingPath paup = new PointAnimationUsingPath();
paup.PathGeometry = myPathGeometry;
paup.Duration = TimeSpan.FromSeconds(3);
paup.RepeatBehavior = RepeatBehavior.Forever;
You can add this PointAnimationUsingPath to a storyboard or an object:
myRectangle.BeginAnimation(EllipseGeometry.CenterProperty, paup);
It is a good practice to remove the animations on XAML objects when the objects are unloaded.
Another way to animate controls is using Transformations. It is a big topic in its own. However, the code sample below should provide a good idea of what it does. The storyboard uses the double animation to change the behavior of the RenderTransform property of the rectangle. It changes the rectangle’s angle from 0-90 in 8 seconds.
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard Storyboard.TargetName=”myRectangle”
Storyboard.TargetProperty=”(RenderTransform).
(RotateTransform.Angle)”>
<DoubleAnimation From=”0″ To=”90″ By=”45″ Duration=”0:0:8″
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
Thanks for reading along. I hope this article has given you some insight on WPF Transformations. As always I’d love to hear your article ideas or comments. Happy Coding!
In my future articles we will dig deeper into WPF transformations and some more complex animations.
Resources
MSDN intro on Animations
MSDN link on Dependancy Object
MSDN link on Dependancy Property
