Alvin Ashcraft is Microsoft Visual C# MVP and .NET developer from the Philadelphia, PA area. He has more than 15 years of software development experience in the Health Care and Manufacturing industries. His wife and three daughters keep him occupied when he is not writing code. Alvin has posted 134 posts at DZone. View Full User Profile

Getting Started with SketchFlow in Expression Blend 3

02.02.2010
| 14113 views |
  • submit to reddit

Hello SketchFlow

Last year Microsoft shipped Expression Blend 3, and along with it the first release of SketchFlow. SketchFlow is a set of tools which allows designers and developers to quickly mock up or sketch out concepts for user interface design. Under the covers, SketchFlow mockups are XAML just like WPF and Silverlight windows. To give them that “sketched on a napkin” look and feel, a sketch style is applied to the controls on the screen.

There are some good resources for getting up and running quickly with SketchFlow in Blend. However, they are still few in number since it is a relatively new product.

The first thing to do is to install Blend. A 60-day evaluation copy of Blend can be downloaded here. There are evaluation copies of the other Microsoft Expression products available there as well. There is also a link to a preview of Expression Blend for .NET 4 on the page but it does not currently support SketchFlow projects.

When you launch Blend and select “New Project…”, you will be presented with the New Project dialog:

New Project

You can select WPF or Silverlight SketchFlow project types, give your project a name and click OK.

The SketchFlow Design Environment

Here’s a rundown of the windows you’ll be working with when you create a SketchFlow project in Blend.

Editor – This is the main window where you can either manually write your XAML or use the WSIWYG designer.

SketchFlow Map – The Map window displays all of your screens and component screens and provides the ability to map out the flow between them. In the example map below, I have create a Main Window screen which has a Detail View component screen. This component screen is displayed within the Main Window. There is also an Add Item screen which can be navigated to from the Main Window.

Map

Projects – A treeview of all the files in the current project. This should be familiar to any Visual Studio or Expression user.

Assets – From the assets tab, all of the sketch-style controls can be added to the editor window. They can be found under the SketchFlow—>Styles—>SketchStyles tree. Under the SketchFlow assets, you can also find all of the current Navigation Screens, Component Screens and Behaviors in the project.

 Assets

SketchFlow Animation – The animation panel allows you to create states of the controls on the screen and builds an animation. The example below has a single button control that changes its background color from red to white twice during the animation.

Animation

Objects and Timeline – The Objects view provides a hierarchical view of the controls on the selected screen. This is the easiest way to determine which control is currently selected in the Editor window. The timeline is used when creating storyboards for event actions.

Properties – This is pretty self-explanatory. The properties window displays the available properties for the selected control and allows them to be set.

Quick n’ Dirty

Here is an example screen mocked up in SketchFlow containing some of the available sketch-styled controls. The sketch style is great for design reviews. It tends to keep feedback focused on what the screen does, not how it looks.

Mockup Screen

More Resources

 

Happy Sketching!

 

Published at DZone with permission of its author, Alvin Ashcraft.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)