July 14th, 2009

Using SketchFlow and Behaviors for quick easy demos

All Silverlight Examples, Silverlight 3 tutorials, Silverlight Blend Tutorials, by Gavin Wignall.

In the below example I have produced an example of a very quick and easy demo, used to show a client an example of a piece of functionality for their application. Blend 3 also allows us to use Behaviors so that, in the below example, we can add all the functionality in using Blend and not needing to touch Visual Studio or any C#.

In this example I have used behaviors to do the following functionality:

  • Drag using the mouse
  • Change visibility properties
  • Play Storyboards

First off SketchFlow offers us a set of new pre-styled controls, the style is meant to give the impression that the work shown is at Sketch level and therefore allow the user to concentrate on functionality and not get held up on design / look and feel.

SketchFlow offers many more features including the ability to navigate between different pages (or screens) and a new player that allows the user to report feedback through a range of means. For the above example I have switched off the user feedback area to save space, but the example source (available at the bottom of this post) still has it all intact.

The ‘How to’ bit

First off we need to create a SketchFlow Project, to do this simply open up Blend 3 and select ‘New Project’ and then ‘Silverlight 3 SketchFlow Application’, as seen in the image below:

Open up a new SketchFlow document

Open up a new SketchFlow document

Now you have access to many new features, but for now we will concentrate on finding the new SketchFlow styled controls. Click on the ‘Assets’ icon near the bottom of the toolbar to open up all the available assets. In the window that opens, go to the left hand menu and select SketchFlow >> Styles >> SketchStyles. You should now see around 33 different controls / elements available to you in the new SketchStyle styling:

Open up the assets window and find the SketchStyle controls

Open up the assets window and find the SketchStyle controls

For my example I have used the following items from the above list:

  • Rectangle-Sketch
  • ScrollViewer-Sketch
  • Button-Sketch

Once you have got all your elements in place we need to wire them up. This used to involve going into the C#, but thanks to behaviors (new to Blend 3) we can now wire up most basic functionality inside Blend without needing to touch a single line of code!

Follow these simple rules and you will become a master at using Behaviors!

You will need to add a new Behavior element for each action you want to create (Play a storyboard = 1 Bevaior, Change a Visibility value of an object = 1 Behavior). The object that controls the action needs to have the Behavior attached to it (for example a button). Any object can have mulitple Behaviors attached to it.

To attach a Behavior, first open up the ‘Assets’ window again. Now click on ‘Behaviors’ in the left hand menu, this should give you around 13 different types of Behaviors to choose from:

Open up the Assets window and select Behaviors

Open up the Assets window and select Behaviors

In this example I only use 2 types of Behaviors, they are:

  • ChangePropertyAction
  • ControlStoryboardAction

To apply a Behavior, simply drag your desired Behavior from the window shown above onto the object you require to activate the Behavior. You can drag the Behavior onto an object on in the Visual view area or in the Objects and Timeline tab. Once the Behavior has been assigned it will appear below the object it is controlled by. Now select the Behavior in the Objects and Timeline tab and go to the Properties tab, you should be presented with a set of fields asking you what action under what circumatances you want to control.

Repeat the above paragraph for each action you want to create. I used a total of 10 Behaviors to get the example shown in this post working.

Grab the Code

As always you can download the code for this post here.

Back Top

Responses to “Using SketchFlow and Behaviors for quick easy demos”

  1. What steps did you perform to embed the player experience in your blog?

  2. The tutorial is quite useful. But I have a small problem.. I downloaded Expression Blend 3 + SketchFlow RC from Microsoft site. But I could not find any controls under Assets -> SketchFlow -> Styles. I mean the 33 controls listed here in the tutorial are not found in my version. Can you help me plz. I am a novice with blend.

  3. SketchFlow is such a great idea to make prototyping much easier. I hope you will show us more about it.

    Regards
    Peter Loebel

  4. Hi,

    i dont have SketchStyles if i show in my assets. I have installed expression blend 3 and silverlight 3. i can start a silverlight 3 sketchflow application, but my styles-folder is empy…

    Can you help please?

  5. You might need to download and install additional items found here: http://silverlight.net/GetStarted/ . I think the styles you are missing may be part of the Toolkit download. Let me know if this solves the problem :)

  6. To display Silverlight inside WordPress I use a plugin called Embed Iframe.

  7. I have downloaded and installed “Silverlight 3 Toolkit July 2009 Installer” but no sketchflow-styles added. :-(

  8. I think the sketchflow stylesare under projects > controls in Blend 3.

  1. DotNetShoutout (,July 16, 2009)

    Using SketchFlow and Behaviors for quick easy demos ยป Silverlight Buzz…

    Thank you for submitting this cool story – Trackback from DotNetShoutout…

  2. Using SketchFlow and Behaviors for quick easy demos | Silverlight Travel (,July 17, 2009)

    [...] the example I have produced an example of a very quick and easy demo, used to show a client an example of a [...]

Leave a Reply

Back Top