In a previous post, I chatted a bit about what role SketchFlow plays in the Blend IDE. I'd like to follow that up by walking you through one of the SketchFlow example projects, while pointing out the usefulness of the Map panel.

If you'd like to follow along (and you have a copy of Expression Blend Ultimate), activate the Help | Welcome Screen menu option. Click on the Samples tab, and select the PCGamingSketch sample project:

Once the sample project has loaded, you will notice a new aspect of the Blend IDE, the SketchFlow Map panel, can be found docked below the artboard:

The SketchFlow Map panel is a graph editor in which you can define the structure, flow, navigation, and composition of an application. Unlike the artboard (which allows you to focus on the content for a given Window or UserControl), the SketchFlow Map panel allows you to focus on the overall structure of the application.

Each node in the SketchFlow Map panel represents a specific "screen" in your prototype, which will typically correlate to a specific Window or UserControl. In the PCGamingSketch project, note that the set of left most nodes are named "MouseWheel", "InternalPage", "Refined" and "Version Approved".

Collectively, these nodes represent a set of screens that show the final approved UI of the initial GUI mockups for the application. If you double click on any of these nodes (or any node in the SketchFlow map for that matter) you will open up the related screen within the artboard for viewing. The following figure shows the screen representing the "Version Approved" node:

If you were to open the "Refined" node (Figure 8-5), you would find a formal UI layout constructed using the expected Silverlight layout managers (such as the Grid and Canvas) and numerous UI controls (TextBlock, custom components, etc) and Blend behaviors:

Notice that each of the nodes under discussion are connected together using directional arrows. For example, the "Version Approved" node has three outbound arrows which connect to the remaining three left-most nodes. These relationships represent the basic flow of the UI, and can be tested using the SketchFlow player's navigation editor. As well, you can make use of various navigation behaviors to quickly model this flow via user interactions (button clicks, menu selections, etc). Best of all, these navigational relations can be changed on the fly using the Blend IDE.

Now, note that the Start node has been decorated with a specific green triangle icon on the upper left of the node (See next screen shot). When you create a new SketchFlow application, you will automatically be provided with an initial screen node marked in this manner, which represents the initial screen to show upon prototype startup.

If you wish to change the startup node, you simply need to right click on any node and select the Set as Start menu option. Once you have done so, the "green triangle" will move to the selected node. For example:

Each node can be assigned a unique color, which can be useful when you wish to visual show a set of related nodes. A node's color has no impact on the runtime behavior of your prototype, however by default; the color blue represents a Navigation screen, where green represents what is termed a Composition screen. As explained later in this chapter, "composition screens" allow you to define a chunk of repeatable UI content (such as a navigation menu) which will be displayed on multiple Navigation screens.

You can change the color of any node by hovering your mouse on top of it to expose the node editing tray. From here, use the integrated color editor on the far right:

If you'd like to run this prototype (via the SketchFlow Player), simply hit the F5 key.

In my next blog post, you'll learn more about the SketchFlow prototyping process, where we will add new nodes (and screens) to the prototype.