SketchFlow Templates for Windows Phone

Yes, you can now get SketchFlow templates for Windows Phone (or sketchy styles as they’re known) and I thought I’d have a play. (You must have a version of Blend 4 with SketchFlow enabled for this to work eg it wont work with the free version of Expression Blend for Windows Phone)

First thing to do is head over to https://wp7sketchflow.codeplex.com/ and download the zip file. Extract and run the msi to install. Now, when you start Blend you should have a new project type:

image

Create a new Windows Phone SketchFlow Application and you get a set of default screens (Start, Search, AppList) as well as an empty screen for your prototype application:

image

I’m going to mock up the “I Look Awesome” app which allows me to take a photo of myself at any time and keep it for posterity. Of course I’ll have a Panorama on my home screen (Screen1) and to which I shall add a Button to take my picture.

You’ll find all the sketchy controls in the Assets panel. Look for the Windows Phone specific ones in Controls –> Mockups. You’ll find a Panorama in there that can be added to the LayoutRoot of Screen1. I’ve auto-sized it to “fill” and edited the title text etc as well as adding a Button to take the photo (you’ll find the sketchy Button in Styles –> Sketch Styles in the Assets panel):

image

I add a connected screen by hovering over Screen1 in the SketchFlow Map and selecting “Create a connected screen”. To this screen I add a CameraCaptureTaskMockup (found in Controls –> Mockups).

image

Finally I can “wire” up the button in Screen1 to invoke the capture task by associating it with a NavigateToScreenAction (Assets panel Behaviors) and setting the TargetScreen to Screen2.

Now, when hit F5 it invokes the SketchFlow Player application and I can “test” my prototype including navigating between screens.

image

The Panorma behaves like a real Panorama, the button works (invokes the capture screen), the phone navigation buttons work etc. It all “feels” very realistic as well as allowing me to capture accurate feedback from my customer, me in this case.

Having seen the app in action I think I may be thinking a bit too inside the box. A little too niche. Back to the drawing board….