Add Simple Animations to Your WPF Application with Timelines

In the previous article of this series, I introduced you to WPF transformations. This article will continue to work with transformation, but also introduce timelines that help you create animations in your WPF applications.

Setting Up a Scene

You will start by setting up a scene in which you will add some simple animations. Your scene will contain four buttons and a text box that will be rotated by pushing the buttons. The scene is shown in the image below:

In the previous articles, you used the Timeline window, where the tree with the elements of the scene is displayed. As the name suggests, this window is more than just that; it provides support for creating animations via timelines.

On the center top of the window, there is a series of buttons. The first one called Create New Timeline; it creates a new timeline.

The top red bar shows the time in seconds, not frames. You don't have to worry about frames and frame rates because the Interactive Designer takes direct advantage of the hardware configurations and sets up the frame rate automatically. You can zoom in and out of the timeline with the zoom tool at the bottom of the window.

A vertical line indicates the current position in the timeline. When you move this pointer, the top-right time display shows the position in seconds of the pointer.

Creating Timelines

What you will do in this article is create four timelines for the textbox control and add some transformations inside each timeline. Then, you will add triggers for these timelines so that you can start the animations by pushing the buttons that you added to the scene.

To start, select the TextBox control and add four timelines. In each of the four timelines, you will add a key frame at two seconds. To do that, move the timeline pointer to two seconds (make sure the textbox control is selected) and open the Transform window and set the Z property to -90 degrees. That means a rotation of the text box with 90 degrees counter-clockwise.

For the second timeline, set a rotation of -180 degrees, for the third 90 degrees, and for the fourth 180 degrees.

Notice that you did not set a start key frame in any timeline. This way, an animation does not require a start position to play, but instead it will begin from the current position of the control. You'll be able to test that when running the application and pushing the buttons before the animation trigger ends.

Adding Triggers for the Timelines

You can test the animations in the timeline window by using the playing buttons (on the center top of the Timeline window), but the animations would be pointless unless they can be triggered while the application runs. To create triggers for the timelines, open the Timeline Properties window (from the View menu). Then, select Timeline1, select ButtonTop and use the Add button to add a trigger. It will show you tree combo boxes.

The first one contains the control used to trigger the animation. (If you selected the ButtonTop control, it should be the only one displayed and selected here.) The second one represents an event that can trigger the playing of the timeline. Scroll through the events and select Click. The third combo represents an action concerning the animation and can be Begin, End, Pause, or Resume (make sure Begin is selected).

Repeat the same procedure with the Timeline2 associated with the ButtonLeft control, Timeline3 with the ButtonBottom control, and Timeline4 with the ButtonRight control. And that is all. you have successfully set up an application that can play some simple animations with a text box. Run the application and use the buttons to rotate the text box control. As already pointed out, if you press a button before the playing animation ends, the triggered animation starts from the present position of the control.

Previous Series Articles

About the Author

Marius Bancila

Marius Bancila is a Microsoft MVP for VC++. He works as a software developer for a Norwegian-based company. He is mainly focused on building desktop applications with MFC and VC#. He keeps a blog at, focused on Windows programming. He is the co-founder of, a community for Romanian C++/VC++ programmers.



  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Java developers know that testing code changes can be a huge pain, and waiting for an application to redeploy after a code fix can take an eternity. Wouldn't it be great if you could see your code changes immediately, fine-tune, debug, explore and deploy code without waiting for ages? In this white paper, find out how that's possible with a Java plugin that drastically changes the way you develop, test and run Java applications. Discover the advantages of this plugin, and the changes you can expect to see …

  • Live Event Date: September 17, 2014 @ 1:00 p.m. ET / 10:00 a.m. PT Another day, another end-of-support deadline. You've heard enough about the hazards of not migrating to Windows Server 2008 or 2012. What you may not know is that there's plenty in it for you and your business, like increased automation and performance, time-saving technical features, and a lower total cost of ownership. Check out this upcoming eSeminar and join Rich Holmes, Pomeroy's practice director of virtualization, as he discusses the …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds