• Download FanTutorial - 196.97 KB
• Note that you needExpression Blend 2 with .NET 3.0 installed.

Introduction

In this tutorial, I'm going to explain how to draw and animate WPF Fan control that can be used in Manufacturing Simulation, using Blend 2. It is only XAML code. By the end of this tutorial, you'll know:

• how to draw basic element using Blend 2
  
• how to animate
  

Background

Get some basic knowledge of Blend 2 from:

.NET 3.0 WPF Tools && Examples

Using the code

Step1: When you create a new application project in Blend2, you should see the Window and Layout Root Grid in the Objects and Timeline. Add Grid and Canvas as showed below.

Step 2: Draw the Stand of the Fan using Rectangle Element in Blend2. There are two Horizontal Rectangle and one Vertical Rectangle.

Step 3: Draw the Cap and Wings of the the Fan using Eclipse Element in Blend2. You can show Transform and Rotate to duplicate the wings drawings.

Step 4: After finish the Fan drawing, you can add a new Storyboard by click the "+".

Enter the Name of the Storyboard.

Step 5:From the storyboard, click on the "+" to enable recording.

You shall notice "Timeline recording is on" showed

Step 6: Draw the timeline from 0:00.000 to 0:00.100.

Step 7: Select the FanCanvas from Objects and Timeline and make sure it is on focus.

From the Designer windows, looks for the rotate icon at the edge of the canvas.

Rotate the canvas 360 degree. You shall notice Render Transform->Rotation->Angle are added.

Step 8: Right-click on the Angle Timeline and you shall notice the "Edit Repeat Count"

Step 9: Click on the infinity icon from the window to make sure it rotates forever

Step 10: Add basic Triggers interaction by Adding +Event->Window.Loaded->TurningFan.Begin

Step 11: Press F5 and your first WPF Fan is completed.

View more WPF Controls from nextwavesoft