Introduction to Blend: Animation - Page 1
       by kirupa  |  2 June 2007

One of the cool features in Windows Presentation Foundation (WPF) is its support for animation. While the animation support is great, creating animations manually by writing XAML requires some effort. To simplify creating your own animations in WPF, you can use a graphical editor such as Blend instead. Blend features, as you will find out, an intuitive interface for creating and modifying animations. The XAML is automatically written in the background for you.

For a demo of what you will create, click here or on the following screenshot to launch the application. If you are using Firefox, be sure to download the FFClickOnce extension to be able to run ClickOnce apps directly without having to download the files first:

For this tutorial, you should be familiar enough with Blend to easily draw and customize objects. If you feel you need more practice, click here to visit/re-visit my Brushes tutorial that covers these basic tasks.

On the Menu
This tutorial covers a lot of topics, so I've broken it down into smaller sections for easy digestion:

1. Using the Label Control to Display Text
2. Simplified Look at Animation in WPF
3. Animating the Text
4. Loose Ends
    
   1. Leaving and Entering the Recording Mode
   2. Adding Label Control without Specifying Size
5. Conclusion

While there seem to be a lot of topics, this should be a fun tutorial. The output is nifty also, so let's get started by first creating the text that you will animate.

Using the Label Control to Display Text
The first thing we want to do is animate some text. In order to do that, we first need some text to animate. The following steps will explain how to use the Label component to create the text that you will animate.

1. Launch Blend and create a new .exe project from the Create New Project window. Give your project any name you want. I will be calling my project SimpleAnimation:

[ create a new exe project in Blend ]

Press OK to close the Create New Project window and to actually create your project.

2. With your project created, you should see a new window displayed in your Artboard. Select your window and make some modifications. From the Properties panel, reduce its width and height to 400 by 300, give it a dark black/blue gradient background color, and rename the title to Simple Animation:

[ make some modifications to your current window ]

3. The last few steps should have been a review for you. From here on out, I'll go a bit more slowly and explain the steps in greater detail. First, we want to create the text that slides in from right to left.
   
   From the Toolbox on the left, click on the icon containing the text controls. It should be the fourth item from the bottom, and when you click and hold that icon, a drop down menu should appear.
   
   From this drop-down menu click on the Label control:

[ select the Label control from the list of text-related controls ]

The Label control is often used for displaying text, and by default, it doesn't display a border or any extra formatting that the other text controls employ. A label is perfect for what we are trying to do - which is, just display some text.

4. After you click on the Label control, go to your Artboard and click and drag your mouse to draw a rectangle that will form the size of your text label:

[ draw the appropriate size for your label control ]

Draw a label that is large enough to hold a few words using a large font size, but we can change that easily later. Once you have the label rectangle sized, release the left mouse button and your Label control will be added:

[ when you release the left mouse button, a label with your specified size will be drawn ]

You are almost done with creating the text label. On the next page, we will finish up work on the Label and begin discussing how to think about animations  in WPF.

Onwards to the next page!

1 | 2 | 3 | 4