Published: 29 May 2007
By: Brian Mains

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.

Color Animation

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 PauseStoryboard, StopStoryboard, etc.

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

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.TargetName and Storyboard.TargetProperty, because they identify the object and the object's property to animate, which is the Fill.Color property of the button template.

Next, the 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.

Double Animation

The 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

Resizing a rectangle

Code Listing 2: Change color example with duration

The 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

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.

Key Frames

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

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

Using spline key frames to move a 


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.

Continue reading and see our next or previous articles Next Article >>

About Brian Mains

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.

Other articles in this category

Integrate Lua into WPF Games
Lua is a world-famous scripting language. It is a lightweight multi-paradigm programming language de...
Cascading ListBox Using MVVM in WPF
In this article we will see how we could implement a List Box and using the powerful Model View View...
Creating Video Clips in WPF
In this article we will see how we can clip videos with few kilobytes of memory being used by your h...
Styles in WPF
In this article, you will learn what are styles, how to create and use styles in WPF applications.
Storyboard Playing with Playlist Manager in WPF
In last article we achieved clipping videos out of the parent video. In this article we will see how...

You might also be interested in the following related blog posts

CodeDigest.Com - Articles,FAQs, Codes, News - Aug,2009 read more
Better XAML By Farr: WPF Line of Business Seminar read more
XAML By FARR: Animations, Resources Vs. Code Behind read more
InfoStrat releases a Virtual Earth control for both WPF and Surface to CodePlex read more
.NET FX 4 read more
Telerik Registers Exponential Growth of Its Portfolio - Q3 Release read more
Introducing Newly Improved WPF Performance Profiling Tools read more
Billy Hollis on Making a good UI with Windows Presentation Foundation read more
WPF for Line of Business applications read more
Will Silverlight Controls Become More WPF Like - A Personal Opinion read more

Please login to rate or to leave a comment.