Total votes: 4
Print: Print Article
Please login to rate or to leave a comment.
Published: 29 May 2007
WPF is a new framework that has many advanced capabilities. Animations are one of those capabilities, where an object can be animated via rotating, stretching, scaling, moving it across the screen, changing its color, etc. This article will show some of the basic animations.
Windows Presentation Foundation (
WPF) is a next-generation application development tool that ties together many different technologies: document data, audio, video, 2D/3D graphic rendering, etc. It has the ability to perform animation on the objects available, and this article will show some of the various animations that can be performed.
It is possible to change the color of a control from one to another through the use of the
ColorAnimation class. There are a variety of animations available, from animating colors, ints, doubles, and many more. Check the references for more information on the complete listing. The
DoubleAnimation class is used for animating double values, such as X/Y coordinates, Width values, as we will see later.
An animation is part of a
Storyboard; it must be an element of the
Storyboard class, which can contain one or more animations that run sequentially, or in parallel. To automatically begin a
storyboard, you can wrap the
Storyboard element within a
BeginStoryboard element, which automatically starts the children
Storyboard. There are other actions that can control the
storyboard, such as
Each control has a
Triggers collection, which an
EventTrigger (such as loading, clicking, etc.) can be used to trigger the beginning of a
storyboard. There are many types of triggers, but the event trigger is the most common one for combining an action with an animation. Below is a control that has the ability to change color when you click it. It defines a template for the button's interface, essentially overriding the default implementation. It has a width of 50, height of 25, and aligns to the left.
Figure 1: Color Animation
Code Listing 1: Change color example
When clicked upon, the button changes from yellow to orange inside the arrow, while the outside rectangle changes from a lighter blue to navy. Notice several properties defined with the animation. The first two key properties are
Storyboard.TargetProperty, because they identify the object and the object's property to animate, which is the
Fill.Color property of the button template.
From/To properties specify the starting and ending values, which are color values for the color animation. If the
From value is not specified, then it uses the original value per the property targeted. There is also the option of the
By value, which means how many units to progress by. For double calculation, if the
from/to values are 50/350, and a by value is 50, the animation will skip ahead 50 units as in: 50, 100, 150, 200, etc. until it reaches 350.
Duration is a
TimeSpan values that specifies the number of hours, minutes, or seconds an animation runs. In the above example, the color animation runs a half a second.
AutoReverse set to
true means that it will reverse direction back to the color specified in the
From property after the animation completes.
DoubleAnimation is a highly used animation that will change the width of a rectangle below. In the example below, a blue rectangle will have it's with change from 50 to 300, in a time of ten seconds. However, five seconds into the animation, the color will change from Blue to Yellow, as we'll see how that is done in a moment. Look at the example below:
Figure 2: Resizing a rectangle
Code Listing 2: Change color example with duration
BeginTime property specifies when the animation will take place.
BeginTime is also a
TimeSpan, which specifies that the animation will begin at the five second mark, and finish at the end (because of no duration specified). Remember that I also specified that the color animation will use the
Fill.Color for the rectangle as the starting point of the animation. The double animation, as you see, uses the same construct as the color animation, but with different values.
That's great, but what if you want to move an object? That is where the ability for the transformations come in. The rectangle below uses render transformations, meaning that the rendering of the rectangle is transformed. There are a variety of transformations that can take place, such as stretching, skewing, rotating, etc. The transformation we will look at is the
TranslateTransform, which will allow us to move the rectangle. Let's take a look at the code below:
Figure 3: Moving a rectangle
Code Listing 3: Transforming Objects
The rectangle above defines a Translate transform with the relative starting coordinates. Using this, the double animation then changes the X horizontal value from 0 to 200, moving it across the window whenever the rectangle is clicked with the left mouse button.
The next animation we will look at is the use of key frames. Each animation (
DoubleAnimation, etc.) has another associated type:
<Animation>UsingKeyFrames. These animations use a series of key frames that change the way the animation works. The animation below affects the named transformation of the rectangle, by changing the X value from 0 to 350, then back to 50, then to 200. This is all done using the
Linear version of the keyframe, instead of the
Spline or discrete versions.
Linear means it moves in a linear fashion.
Figure 4: Using key frames to move a rectangle
Code Listing 4: Key Frames animation
Spline Key Frames
Spline key frames are an alternative type of key frame. Splines use an alternative means to calculate the output values. It generates a curved line using two control points. For instance, if a line were drawn diagonally, the first point affects how much curve is in the first half of the line, and the second point controls how much curve is in the second half of the line. This is performed using an advanced calculation, which means that the amount of time spent traversing the spline will vary and possibly create a more realistic animation for your needs. Below is the animation of the rectangle using the spline.
Figure 5: Using spline key frames to move a rectangle
Code Listing 5: Spline Animation
The spline animation animates the X and the Y transforms simultaneously; after running it, you will see as it moves downward diagonally, it speeds up and slows down, due to the spline that was rendered.
This has been an overview of some of the animations available in the
WPF framework, a part of .NET framework 3.0. There are many animation capabilities available in this framework, and you have seen some of them.
Here are some references you may find helpful in your studies of the WPF animation capabilities.
Brian Mains is an application developer consultant with Computer Aid Inc. He formerly worked with the Department of Public Welfare.
In both places of business, he developed both windows and web applications, small and large, using the latest .NET technologies. In addition, he had spent many hou...
This author has published 73 articles on DotNetSlackers. View other articles or the complete profile here.
You might also be interested in the following related blog posts
CodeDigest.Com - Articles,FAQs, Codes, News - Aug,2009
Better XAML By Farr: WPF Line of Business Seminar
XAML By FARR: Animations, Resources Vs. Code Behind
InfoStrat releases a Virtual Earth control for both WPF and Surface to CodePlex
.NET FX 4
Telerik Registers Exponential Growth of Its Portfolio - Q3 Release
Introducing Newly Improved WPF Performance Profiling Tools
Billy Hollis on Making a good UI with Windows Presentation Foundation
WPF for Line of Business applications
Will Silverlight Controls Become More WPF Like - A Personal Opinion
Please login to rate or to leave a comment.