Inveigled By Design

One thing I want to have in the project prototype I’m working on in Sketchflow is the ability to run a storyboard automatically when a form loads. This is a fairly straightforward process. I’ll demonstrate it using a progress bar whose value progresses from 0 to 100 after the screen loads. Click this link for a sneak peak at the functionality:

Auto Run a Storyboard Demo

Step 1: Create a Progress Bar on the Sketchflow Screen:

Open Blend and create a new Silverlight 3 Sketchflow Application. Display the SketchStyles assets by clicking on the Assets tab on the left column of the Blend window, expanding the Styles list, and choosing SketchStyles:

Drag a progress bar to the screen Sketchflow created for you and set its properties on the right column of the Blend window in the Layout section as shown below:

Step 2: Create a Storyboard to Animate the Progress Bar:

You can create animations in Silverlight and WPF using Storyboards to change the values of the user interface controls over time. For this demonstration, you’ll animate the value of the progress bar. About half-way down the left column of the Blend window, in the Objects and Timeline section, click on the plus sign to add a new storyboard. Name the new storyboard progressBarValue:

In the newly-created storyboard you’ll see a timeline with a 0, 1, and 2 at the top. Make sure the screen edit window is highlighted in red and the message “progressBarValue timeline recording is on” appears at the top. You’ll be animating the value of the progress bar as the storyboard progresses from 0 to 2.

Click on the number 1 so that the line below it appears in yellow. Click on the progress bar to make sure it’s selected and then in the right column of the Blend window in the Common Properties section, set the Value of the progress bar to 50. You’ll see the bar turn gray half way across:

Now click on the 2 at the top of the storyboard layout so that the line below it turns yellow. In the Common Properties section, set the progress bar Value to 100. The bar should be solid gray now:

Click Close in the Objects and Timeline section of the left column of the Sketchflow window to close the storyboard.

Step 3: Create a Behavior to Auto-Run the Storyboard:

You can use a Behavior that is triggered by an event to trigger the storyboard to start running. The behaviors are located in the Assets tab in the left column of the Blend window. Select the behavior called ControlStoryboardAction:

Drag the ControlStoryboardAction to the Objects and Timeline section and drop it on the object named LayoutRoot. LayoutRoot is the default grid that Sketchflow created on the screen that contains the progress bar you created. Now you should see ControlStoryboardAction nested under LayoutRoot in the Objects and Timeline section:

Click on the ControlStoryBoard action to make sure it is selected. In the right column of the Blend window on the Properties tab, edit the properties of the action so that Trigger event name is Loaded and the ControlStoryboardOption is Play. Select progressBarValue from the Storyboard list to run the storyboard we created for the progress bar.

At this point you can run the project to view the results. Unfortunately, you’ll discover that by the time Silverlight loads in the test page, the animation will have already started and likely completed running. This will be evident because the progress bar will be completely gray.

Step 4: Adjust the Timing of the Storyboard:

In the middle column of the Blend window where the screen display is, look for a button with <> on it toward the top right of the artboard. This will change the display to show you the xaml that is being used to create the display. For the progressBarValue storyboard change the StartTime to 00:00:04 to delay the start until 4 seconds after the LayoutRoot is loaded. You can adjust this value to whatever delay you would like. You can also adjust the two keytimes to control the speed of the animation:

Now when you run the project, you should see the screen load and then within a second or two, the progress bar will gradually change from 0 to 100 over a few seconds.

That’s all there is to it. You can use many different events and controls to run a storyboard either automatically, or in response to a user action.