Blend Storyboards - An Introduction

Before we jump into Blend storyboards, you might have gotten here looking for Infragistics’ Indigo Studio storyboards (example shown above). They are very different things—Indigo Studio uses the more traditional meaning of the word—telling a story with pictures and words (on a board). We go a step beyond and integrate working prototypes into the storyboard boxes. If you’re interested in that, learn more about storyboarding in the software design process, and then you can go check out and download Indigo Studio to try it out for yourself. In addition to storyboarding, Indigo Studio is a rich, code-free prototyping and wireframing tool.

The rest of this article focuses on Microsoft Blend’s use of the term, which as you’ll see is more technical and tied to the XAML technologies.

What is a Storyboard?

Consider that you want to change one or more properties of controls based on either a time constraint or some user interaction or some event. This can be achieved through an animation.

Consider that you want to group one or more animations into a container and be able to organize and control its working. This can be achieved through a storyboard.

In an Expression Blend application, a storyboard is a resource containing a collection of timeline objects such as animations, each of which targets a specific property of a control. Animations here mean actions that temporarily change the property values of elements. For example, an animation action can comprise a button changing its color when mouse hovers over it. Or you could have a series of actions like rendering a continually moving ellipse and changing its color periodically. You can accomplish this by organizing these actions in a storyboard and controlling how the storyboard works.

Why Use Storyboards?

Storyboards can be started, stopped, or paused by using triggers that are set on objects, by using behaviors, or by using event handlers. When a storyboard is selected, a pop-up menu helps to duplicate, reverse, delete, rename, or close the currently selected storyboard. You can set the properties of a storyboard to make it automatically reverse or repeat when it has reached the end of its last timeline.

Where Can We Create Storyboards?

Storyboards can be created in the following locations (or scopes) of your application:

• Within the main body of your document:   You can create your animation timelines in the main body of your document if your application needs to present an animation, or if you do not require reusing the animation elsewhere.
• Within a scene or user control: You can create your animation timelines in a user control if you plan to reuse an animation several times in a single application, or in another application.
• Within the template of a control: You can create the animation in the template of the control if you need all the controls of a specific type in your application to be animated in the same way.
• Within a state: If you want to modify the animation that occurs after transitioning to a new state, you can select the state in the States panel, and then click Show Timeline  in the Objects and Timeline panel to make your changes.

How to Create Storyboards

Storyboards are created in Blend using the Storyboard picker.

1. Launch Expression Blend 4 and create a Silverlight 5 application.

Figure 1 shows the New Project dialog box that is displayed when creating a Silverlight project using Blend.

Figure 1 - New Project Dialog Box

1. Add a Button control to it.

1. Then, launch the Storyboard Picker by clicking the + symbol and selecting the New option.

Figure 2 shows the New option in the Objects and Timeline pane. 

Figure 2: New Option

1. In the Create Storyboard Resource dialog box that is displayed as seen in figure 3, leave the default name as is. In a real-world scenario, you would always change it though. 

Figure 3: Create Storyboard

1. Use the drop-down option in the Objects and Timeline section to open the newly created Storyboard.

Figure 4: Open a Storyboard

1. Select the Properties pane for the Button and after scrolling to the Transform property group, choose Scale option and specify the X and Y values as 2.5 each.

Any actions that are done at this stage, such as this transform setting, is recorded as part of the storyboard.

1. To stop the recording, click the red icon that says “Storyboard1 timeline recording is on”.

Figure 5: Storyboard recording in progress

Click the Play icon u to play the storyboard.

You will see the button being shrunk in size.

This was a very basic example. You can create far complex storyboards with lots of actions in them.

What is the Storyboard Class?

The Storyboard class defined in  System.Windows.Media.Animation namespace represents a storyboard. This class defines a property called Children, which represent a collection of animation objects. These animations are started when the Storyboard is started. The Storyboard class has its own set of methods for starting, stopping, pausing, and resuming animation actions.  The Storyboard class provides the Storyboard.TargetName and Storyboard.TargetProperty attached properties. You set these properties on an animation to specify its target object and property. When you add animations as child timelines of the Storyboard, you can organize and apply the animations through the storyboard. In XAML, BeginStoryboard object should be used with an EventTrigger, Trigger, or DataTrigger. In code-behind, the Begin method should be used.

The Begin() method of a storyboard can be invoked in an event handler to start the storyboard actions at a particular instant.

Consider an example. Open the application created earlier.

1. In the Properties Pane for the button, click the lightning bolt symbol to open the Events pane.
2. Add an event for Button_Click. If you are using Visual Studio 2010 Express Edition or Visual Web Developer Express Edition, then you will have to manually copy the event handler to the Page.xaml.cs file. Otherwise, in other editions such as Professional edition, the event handler is automatically added to the Page.xaml.cs file.
3. Within the event handler, in the Page.xaml.cs file, add the following code (marked bold for your reference):

1. Save, build and test the application. Click the button on the browser output and see the animation action.

For more on storyboards, Microsoft has a great resource here.