WPF and Silverlight developers are aware that XAML is a key part of UI definition.  They are also aware that authoring complex layouts, animations (and whatnot) using nothing but Visual Studio can be painful.

Thankfully, the Blend IDE can be used to rapidly construct fancy UIs in a fraction of the time.  While this aspect of Blend is fairly well understood, what many programmers do not know is that Blend also ships with a very powerful prototyping tool called SketchFlow.

As the name suggests, SketchFlow is a set of tools which allow a development team, and the software stakeholders, to rough out a software prototype for Windows Presentation Foundation and Silverlight-based applications.

When you create a WPF of Silverlight SketchFlow project, you will be happy to see that you can construct the UI using the same tools and techniques as a "normal" Blend project. For example, you can add controls to the Artboard via the Assets Library, configure their look and feel via the Properties panel, incorporate graphics and animations into the prototype, and whatnot.

What makes SketchFlow unique is that it also provides some additional tools which allow you map out and iterate the flow of an application UI and the transition from one application state to another. Using the SketchFlow Map panel, you can quickly create a set of UI layouts which will be displayed as an end user activates menu items, or advanced through a Wizard like layout via Next and Previous buttons. As well, the sequence of these transitions can be easily changed as you elicit feedback from the client.

In addition to mapping out your application's UI flow, the default style of each control and component for a SketchFlow project has been intentionally designed to look simple and generic. Using the intrinsic Sketch Styles, Sketch Shapes and Mockup Controls (all of which can be found in the Assets Library), you can design a UI which will help focus the user on the overall flow and layout of your prototype, rather than minutia level details such as font sizes, background and foreground colors and so forth. The following Figure shows a WPF Window constructed using several of these SketchFlow styles.

Another excellent aspect of SketchFlow is that it is built in such a way that client feedback can be gathered and recorded while you are in the process of building and demonstrating the prototype. While you can certainly make use of Expression Blend Annotations to do so, the SketchFlow Player provides a more powerful and interactive way to record user feedback. Clients can test multiple scenarios and provide comments for the development team by annotating their experience as they navigate the prototype.

Also know that a SketchFlow prototype can be easily used as a starting point for the "real" application you intend to develop. Thus, rather than throwing away your prototype, you can replace the SketchFlow styles as you see fit, scrape out all user feedback into a dedicated Microsoft Word document, and start to elaborate the details of your software project. Always remember that SketchFlow prototypes are not just simple drawings, but are fully functioning WPF or Silverlight applications. With a few minor modifications, you can convert your prototype into a production project, and continue to refine your prototype into a final application.

I plan to offer up some additional blog entries which illustrate the role of SketchFlow.  Until then, consider the following Figure which will give you a taste of things to come...

Happy coding!