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.
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 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:
- 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
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.
Toproperties 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
FillBehaviorproperty. The value of this property should be
AutoReverse property of the animation lets us reverse the animation.
System.Windows.Media.Animationnamespace. A few ones worth mentioning are the
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.
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
PointAnimationUsingPath paup = new PointAnimationUsingPath(); paup.PathGeometry = myPathGeometry; paup.Duration = TimeSpan.FromSeconds(3); paup.RepeatBehavior = RepeatBehavior.Forever;You can add this
storyboardor an object:
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.
ResourcesMSDN intro on Animations
MSDN link on Dependancy Object
MSDN link on Dependancy Property