Notice at the bottom of Blend next to the Results panel you see a new panel called SketchFlow Map (see Figure 16-2). If you don't see this panel, you can click Window

Figure 16.2. The SketchFlow Map.

Now that we have the structure of the SketchFlow down, it is time to start adding some visuals. SketchFlow applications are meant to be design-less, but we still need something to convey the idea of what the final application will do. For this reason, we keep our visuals very simple and without final design. We are going to start off with a TextBlock on each page saying what that page is. We are going to use a BasicTextBlock-Sketch Style for our TextBlock. Double-click the Homepage Screen to start editing it and you can then click the Asset Library and type Sketch to find the BasicTextBlock-Sketch Style, as I am doing in Figure 16-8.

Figure 16.8. Locate the BasicTextBlock-Sketch Style in the Asset Library.

Now that you have set up the visuals for all of your Screens, you can move on and make a navigation Component Screen.

Now that we have all the Screens set up, and they all have some visuals, we need a way for users of your SketchFlow application to get from one Screen to the next. We can do this quickly and easily by adding a Component Screen. Let's do that now.

If you look at your Navigation Map you will see there is now a green tile for Nav. It is green to represent the fact that it is a Component Screen and not a regular screen, which is blue. You can see that the Component Screen has blue arrows, meaning that you can get to any of the Screens from the Component Screen—but notice that only one screen, the Homepage Screen, has a green line coming from the Component Screen. This is because all the other Screens don't have the Nav Component Screen on them. We need to change this now:

Hold your mouse cursor over the Nav Component Screen until its drawer slides out and place ther cursor over the third icon from the left (shown in Figure 16-18). This is the "Insert a Component screen" icon. Click and draw a connection to each of the existing screens (except the Homepage Screen, which is already connected).

Figure 16.18. The "Insert a Component screen" icon.

Your SketchFlow Map should now look like what I have in Figure 16-19.

Figure 16.19. Your Nav Component Screen should now have green lines to each of the Screens.

If you look at each of the pages you will see they do in fact have the Nav Component Screen on them. They need to be positioned so that they are directly under the TextBlock for the page. Adjust each page's Nav Component Screen now. Once you have done that, press F5 to compile and run the application and use the navigation Component Screen to move around the different pages. Pretty cool!

We now have the start of an interactive SketchFlow application. Next we need to add some content to one of the pages. I figure we will start with the ShopForMusic page. On this page we are going to add a mock-up song that shoppers can purchase. When they do purchase the song, we are going to use the Visual State Manager to show a dialog box that thanks the shopper for purchasing the song. They then have the option of going to the Checkout page or to continue shopping. Let's add that functionality now:

Now that the fake dialog box is no longer visible or hittest visible, we can go ahead and add the Visual State Group to make it visible and able to be clicked when the user clicks the Buy Now Button; this is common functionality in many shopping applications.

Now we have the Visual States we need to actually hook them up to do something. Specifically, we want the Buy Now buttons to activate the ShowDialog state so that the DialogBox will appear and be able to be clicked.

At this point we have the DialogBox Grid appearing when we click the Buy Now Button. We also need to make the DialogBox disappear when the user clicks the Continue Shopping Button in the DialogBox or navigate to the Checkout Screen if the user clicks the Checkout Button also contained in the DialogBox Grid. Let's do that now!

Now press F5 to run the application and navigate to the Shop for Music page and click the Buy Now Button. Notice how your dialog box appears. If you click Continue Shopping it will just disappear but if you click Checkout it will actually navigate to the Checkout Screen. Pretty cool, huh? So, now you have an interactive SketchFlow application that has different screens and even a partially functional Shop for Music Screen. I challenge you to go ahead and add a fake Movie to the Shop for Movies page, and a fake Book to the Shop for Books page. And then add an interactive dialog box like we added to the Shop for Music Screen.

The SketchFlow Player shown in Figure 16-31 is what the users see when they run your SketchFlow application. It is here that they can navigate the different Screens. They can also make annotations to give you, the developer, feedback on the application. To show you better, let's add some annotations that we can then load up and view as the developer.

Figure 16.31. The SketchFlow Player in the browser.

Moreover, the developer can see the ink revisions made by the client (see Figure 16-42).

Figure 16.42. The developer can see the ink notations from the client right in Blend.

As you can see, this is a feature that will quickly help the client and the developer communicate changes that should be made to the SketchFlow application.

Once your SketchFlow is complete, and all the Screens are signed off on, then it is time to build the real application. SketchFlow has a very handy feature whereby you can create a document that will serve as the development guide to the team that is going to build the real application. Let's go ahead and create the documentation for our SketchFlow application.

When the Word document opens (see Figure 16-45) you will see that there is a very thorough document that tells you about all of the different Screens, the Visual States, a SketchFlow Map, and even the Feedback we entered earlier. This is not exactly as complete as a wireframe document that is given to developers before they are about to build a piece of software, but it is an amazingly wonderful start.

Figure 16.45. The SketchFlow Word document,

My project can be found on the download page on the Friends of ED web site, and here: http://windowspresentationfoundation.com/Blend4Book/ShopingSketchflow.zip

My SketchFlow Word document, from Figure 16-45, can be found here: http://windowspresentationfoundation.com/Blend4Book/ShopingSketchflow.doc. To watch a video tutorial on how to create a Sketchflow Prototype application navigate to: http://www.windowspresentationfoundation.com/?p=116.

In this chapter you learned about SketchFlow Prototyping and why it is used. You then made your own SketchFlow application complete with different Screens, a Component Screen, and even a Visual State Group to show and hide a fake dialog box. You then learned how easy it is to give feedback as a client and then load that feedback right into Blend as a developer. Finally, you learned how to easily create a Word document from your SketchFlow application that can be used as the basis for wireframes to help developers actually develop your SketchFlow into a real piece of software. In the next chapter I talk about some of the new features in Silverlight 4 that I haven't covered yet.