Guide to SketchFlow in Expression Blend 3 RC


Expression Blend 3 with SketchFlow RC is finally released today, and I could not resist having a play with it. In this post, I’m going to demonstrate building a very simple prototype using SketchFlow. First you will need to download and install it. Once that’s done, open Expression Blend 3, and create a new WPF SketchFlow solution. (Or Silverlight if you wish)

I’m assuming you would have some prior experience to using Blend. If not, you should be able to figure out the UI after playing with it for a while. I’m going concentrate on the aspects of SketchFlow in this post. First off, there’s a SketchFlow Map at the bottom dock. You can use it to create different screens of your prototype. I have created 2 Navigation screens and 1 Component Screen.

SketchFlowMap

The blue rectangles depict Navigation Screens and the green one depicts a Component Screen. Navigation screens are self explanatory, whereas a Component Screen is a “control” that you create which can be reused. For example, if there’s a certain layout that you find repeating itself across your prototype, you can bundle them into a Component Screen for reuse. The blue arrows depict the flow between your screens, and the dotted green arrow defines a “has a” relationship. SketchFlow Map is very useful forย  figuring out the structure and flow of your prototype, somewhat like a “sitemap”.

You can double click on any of these screens and your main window will display the screen you selected. Next and obvious thing to do, is to mock up your UI. Designing your layout is straightforward, like how you would do laying out normal controls, except that SketchFlow provides it’s own suite of controls. They’re all controls that we are familiar with, except that they look sketchy ๐Ÿ™‚

SketchFlowToolbox

If you look at the Xaml, they’re doing something pretty smart. For example, when you put a BasicTextBlock-Sketch control on the surface, the Xaml looks like this…

    <TextBlock Style="{DynamicResource BasicTextBlock-Sketch}" Text="Basic Text"/>

It’s essentially a normal TextBlock that’s been styled to look sketchy. If you wanted to, you can use normal WPF/Silverlight in your prototyping, but I prefer the SketchFlow ones, b’coz it looks raw and unfinished. If you presented a WPF-y looking prototype, the client might have the misconception that this is going to be the final product. It does happen…

Next I mocked up a simple Login Screen. Doesn’t it look sketchy? ๐Ÿ™‚

SketchFlow_Login

You can wire up the click event of the Login Button by right-clicking it, and selecting Navigate to, and selecting a Navigation Screen. What this does internally is attach a NavigateToScreenAction Behavior to your button. Behaviors is a new-ish feature introduced by the Expression Blend Team, and you can read some of my blog entries about some of the behaviors I created. This version of Expression Blend also ships with some pre-built behaviors out of the box, so do have a look at them. Here’s what the “trimmed down” Xaml for the Login Button.

  <Button Content="Login" Style="{DynamicResource Button-Sketch}">
    <i:Interaction.Triggers>
      <i:EventTrigger EventName="Click">
        <pb:NavigateToScreenAction TargetScreen="WpfPrototype1Screens.Screen_1_1"/>
      </i:EventTrigger>
    </i:Interaction.Triggers>
  </Button>

So far so good….next I mocked up my Main Screen, which consists of a Component Screen (doesn’t have to be a component screen, just used this for illustration) that consists of a ListBox, and a TabControl. Being a developer, I couldn’t resist hooking up the controls to an XML source for databinding. I first created a simple XML file.

< ?xml version="1.0" encoding="utf-8" ?>
<membership no="123456">
<person name="Ed Foh">
    <details type="Personal Details">
      <firstname>Ed</firstname>
      <lastname>Foh</lastname>
      <age>25</age>
      <gender>Male</gender>
    </details>
    <address type="Home Address">
      <streetno>1</streetno>
      <streetname>Some Street</streetname>
      <city>Melbourne</city>
      <state>Victoria</state>
      <country>Australia</country>
    </address>
  </person>
<person name="John Smith">
    <details type="Personal Details">
      <firstname>John</firstname>
      <lastname>Smith</lastname>
      <age>35</age>
      <gender>Male</gender>
    </details>
    <address type="Home Address">
      <streetno>51</streetno>
      <streetname>Some Other Street</streetname>
      <city>Sydney</city>
      <state>NSW</state>
      <country>Australia</country>
    </address>
  </person>
</membership>

SketchFlow_AddXmlSourceSketchFlow_DataSource

You can add an XML Source (sample or live data), by navigating to the Data tab, clicking the little drop down arrow (see left screenshot) and selecting Import Sample Data from XML. You will be presented with a dialog box asking for the location of your XML file. After adding it you will see that there’s a PersonCollection (see right screenshot) in your MembershipDataSource. In order to databind that collection to a ListBox, it’s just a simple click + hold, then drag and drop away. Too easy…

I won’t be going through the details of databinding of the ListBox’s SelectedItem to the TabControl contents, it’s no different than how you do perform databinding normally. So press F5 and your prototype runs in a new window, with an interesting looking toolbar on the left.

SketchFlow_Run1

There’s a SketchFlow Player on the left that allows a user to add comments, show/hide annotations and sketch on the prototype. It also has options to inspect the “sitemap” of the prototype and navigate to different screens.

SketchFlow_Feedback

You can add feedbacks/comments as well as sketch on the prototype itself as seen in the screenshot. When you’re done, you can export the feedback into a .feedback file. As a business stakeholder or designer working collaboratively, this feature is useful as you can send the .feedback file to someone else, and he/she can load the feedback in Expression Blend for viewing. In Expression Blend, if the Feedback Window is not visible, you can display it by selecting Window File Menu -> Feedback. You can add any feedback from that window and see the comments (see left screenshot).

SketchFlow_FeedbackWindowSketchFlow_FileMenu

Last of all, I want to talk about the import/export features of SketchFlow (see right screenshot). As you can see from the File Menu, you have various import options. When you are happy with your prototype and want to distribute it, you select Package SketchFlow Project. It spits out a bunch of files including an Executable where you can run independently. There’s also the VERY cool feature of exporting to a Word Document, which essentially becomes your requirements and UI document…how good is that!

I hope this guide has helped you in understanding the capabilities of SketchFlow as a design tool. I have zipped up the sample solution, including the exported word document and packaged executable.

Download it here. Enjoy!

Share this post:
Advertisements

3 Responses to “Guide to SketchFlow in Expression Blend 3 RC”

  1. cschormann Says:

    Nice post. Thanks! ๐Ÿ™‚

  2. SketchFlow: Exciting new design tool « Code Blitz Says:

    […] Guide to SketchFlow in Expression Blend 3 RC […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: