icrosoft Expression Blend is a new full-featured design tool for creating highly-interactive and sophisticated Windows application user interfaces using Windows Presentation Foundation (WPF). With Expression Blend, a designer can design and create the UI of an application without worrying about the logic of the application. Once the UI is completed, it can be passed to the developer who will in turn code the business logic of the application.

Because Expression Blend is a very powerful and sophisticated design tool, getting comfortable with using it requires some effort. Part 1 of this series will take you on a quick tour of Expression Blend, showing you how to perform simple animations on a Windows application and how to control them.

Obtaining Expression Blend
At the time of writing, there are two different versions of Expression Blend available:

• Expression Blend 1.0 (download a free trial here)
• Expression Blend 2 September Preview (download a free trial here)

The key difference between these two versions is that Expression Blend 2 September Preview supports the building of Silverlight applications (see my article on Silverlight here). This article will use Expression Blend 1.0.

Creating the User Interface
First, launch Microsoft Expression Blend and create a new project. There are two types of projects you can create using Expression Blend:

• Standard Windows application
• Control Library

You can also choose the language you want to use for the project. At the moment, only Visual C# and Visual Basic are supported.

This article will focus on building a standard Windows application. Choose the Standard Application (.exe) project type and name the project SimpleAnimation. Click OK.

The project will now be created and you will see the environment as shown in Figure 1. You can view your project in two different workspaces:

• Design Workspace
• Animation Workspace

The Design Workspace is shown in Figure 1 with the various parts of the workspace labeled.

Figure 1. Design Workspace: Expression Blend in the Design Workspace view.

?

Figure 2. Animation Workspace: Expression Blend in the Animation Workspace view.

The Animation Workspace rearranges the various panels and places the Interaction panel at the bottom of the page so that it has a bigger area of focus. You can switch to the Animation Workspace by selecting Window?>Animation Workspace (or press F7). Figure 2 shows Expression Blend in Animation Workspace view.

The Project section shows the various files in your projects. Note that the UI of the window is generated using XAML code (Windows1.xaml) and the business logic is stored in a code-behind file (Window1.xaml.cs). Double-clicking on the code-behind file will launch Visual Studio 2005.

Now, add some controls to the window. First, you’ll add an image to the window and then you’ll perform some simple animation on it.

Select the Canvas panel in the Toolbox and double-click it to add an instance to the window. A Canvas panel acts as a container for other controls/panels.

Once the Canvas panel is added to the window, add an Image control onto the Canvas panel. To do so, click on the Asset Library item in the Toolbox and the Asset Library window will open (see Figure 3). Tick the Show All checkbox and double-click on the Image control.

The Image control now appears in the Toolbox. Double-click on the Image control in the Toolbox to add it to the window.

Figure 3. Add an Image Control: Select the Image control from the Asset Library.

?

Figure 4. The Canvas Panel: Drag and drop the Image control onto the Canvas panel.

If you observe the Objects and Timeline window, you will notice that the Image control is on the same level as the Canvas panel (see left of Figure 4). To ensure that the Image control is contained within the Canvas panel, drag and drop it into the Canvas panel, as seen on the right of Figure 4.

Next, set the Image control to display a picture. To do so, select the Image control in the Objects and Timeline window and click the Properties Inspector window. Click the ??? button next to the Source drop down list and select an image.

After resizing on the Canvas panel and Image control, the window should look like Figure 5.

So far, you’ve been building the UI of the application visually using drag and drop. The XAML code is automatically generated as you build the UI. To view the XAML code, click on the XAML tab located on the Artboard (see Figure 10).

Figure 5. The Results: The finished look of the UI.

?

Figure 6. The XAML Code: Viewing the XAML code in the Artboard.

If you prefer, you can always build the UI by writing XAML code directly into the editor. The following is the XAML code for the UI that you’ve just built:

Figure 7. The Results: Your application with the image.

Press F5 to test view your application now. Figure 7 shows the window with the image displayed.

Animation
So far, This application is nothing special?you could easily achieve the same thing using Windows Forms. But what’s really exciting with WPF is its ability to create exciting user interface designs using animation. Making your image perform animation will demonstrate how easy it is to use WPF.

In the Objects and Timeline section, click on the “+” button to create a new timeline. A timeline is a sequence of animation that you can apply to objects in a project.

The Create Storyboard Resource dialog will appear. Use the default name of Timeline1 and click OK. To make it easier to create the animation, switch to Animation Workspace (press F7).

Figure 8. Beginning Animation: Inserting a keyframe in a timeline.

Select the Canvas panel and click on the Record Keyframe button to insert a keyframe (see Figure 8). A keyframe (represented as an oval-shaped icon) is a marker on the timeline that indicates when a property change occurs. The yellow line indicates the time in the sequence of animation. Currently, it is set at time 0 second.

Drag the top of the yellow line and drop it at 4. Click on the Record Keyframe button once more. This will indicate that the entire animation will take four seconds. If you need to have a smaller interval of time, you can change the zoom level to a higher number, such as 400 or 500 percent.

With the Canvas panel selected and the yellow line in the 4 position, click on the Properties Inspector and click on the Translate tab in the Transform section. Set the value of x to 300 and leave the value of y as 0. This will move the Canvas panel (containing the image) 300 pixels to the right.

Next, click on the Rotate tab of the Transform section and set the Angle to 360. This will cause the Canvas panel to rotate a full circle (360 degrees).

You can now preview the animation by clicking on the Play button in the Objects and Timeline section (see Figure 9).

Figure 9. Staging: Previewing the animation.

?

Figure 10. The Results: Testing the animation on the window.

To see how the animation looks within the window, press F5 to run the application. Figure 10 shows the image rotating a full circle and at the same time moving towards the right.

Events
When you run the application, notice that the image rotates automatically. Why does this happen? The fact is, an event was added for you automatically when you created that timeline. Looking at the Interaction section of Expression Blend, you will see that, under the Triggers group, there is a Windows.Loaded event. When this event is raised, the Timeline1 object begins.

To add a new event to the project, click the “+ Event” button. In the bottom view of the Triggers group, select the canvas panel and the MouseDown event and then click the “+” button to add a new trigger. The Timeline1 object and its Begin event are selected by default. This new event indicates that the image will perform its rotation whenever you click on the canvas panel.

Author’s Note: Before you click on the “+ Event” button, you must click on the canvas object in the Objects and Timeline window first. Otherwise, you won’t be able to select the canvas object in the bottom view of the Triggers window. This seems like a bug in Expression Blend.

If you don’t want the image to automatically rotate when the window is loaded, remove the Window.Loaded event by selecting it and clicking the “- Trigger” button.

Press F5 to test the application again. This time, when the load is loaded, the image will only be rotated if you click on it.

Controlling the Animation
So far, your animation is continuous, from beginning to end. But what if you want to pause and then resume it again?

To do so, add two Button controls to the window. It’s simpler to add them to the XAML code directly, as shown in the following code in bold:

Figure 11 shows the two Button controls on the window.

Figure 11. Adding Controls:The two Button controls added to the window.

?

Figure 12. Adding Event Handlers: Adding the event handlers for the Pause and Continue buttons.

Next, you’ll add two events to the project: one for the Pause button and one for the Continue button. The event handlers are shown in Figure 12.

The following code in bold shows the events handler represented in XAML:

Figure 13. The Results: Pausing and resuming the animation.

Press F5 to test the application. The image will rotate when you click on it. To pause the animation, click the Pause button and click Continue to resume the animation (see Figure 13).

Code-Free Design
Hopefully, you’ve seen enough to be familiar with the many tools offered by Expression Blend and you’ll be well prepared for more exciting things ahead in this series. You’ll note that you didn’t actually write any code, which is the way it should be; designers are not supposed to write code.