RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Code-Free User-Interface Design with Expression Blend : Page 3

Find out how easy user-interface design is with Microsoft's new, full-featured design tool.

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.

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.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date