In the previous few posts, you created an initial SketchFlow project, examined the starter code and some new features of the Blend IDE.  In this post, you will add functionality to the prototype via "component screens".

When you are building a WPF or Silverlight application, it is very common to create a navigation system which is common to a set of related Window / UserControl objects. This navigation system might be a traditional menu system, however it is also possible to create a custom navigation scheme consisting of animated graphics, a tree-like navigation system or what have you.

SketchFlow Component Screens allow you to define such a navigation scheme, which can then be connected to any screen which requires the navigation UI. Internally, a Component Screen is a custom UserControl object (for both WPF and Silverlight based projects) which is added to the layout manager of the item making use of it. This is certainly a useful approach, as if you wish to change the look and feel of your navigation system, you only need to change the Component Screen UI, and the remaining nodes will be refreshed upon the next build.

To begin, hover your mouse over the MainScreen node to open the node configuration tool, and click the Insert and Create a Component Screen button:

Once you have done so, rename the new node to NavSystem, and drag it away from the MainScreen node for readability purposes. Notice that Component Screen nodes are green in color by default, and make use of a green connection arrow which points from the Component Screen node to the screen which makes use of it:  

Now, ensure the Artboard for your NavSystem screen is active in the IDE. Using the Assets Library, locate the Sketch Styles node under the Styles section. Here, you will find each of the prototyping controls typically used in a SketchFlow project. While you are free to use any control in your prototype, recall that one benefit of these SketchFlow styled controls is that they clearly inform the client that this is a working prototype not a production ready UI:

Also notice that the Styles section of the Assets Library provides a set of styled shapes (Ellipse, Rectangle, etc) which also support this prototype look-and-feel. Because these styles have been set to be the default, they will automatically be used when you select an item on the Tools panel. This all being the case, use the Tools panel (or Assets Library) to build a navigation system consisting of three colored geometries of your liking. In the following figure, you can see I've opted to arrange some star-shaped geometries and some informational TextBox controls:

Now, the end goal is to allow the user to navigate to three specific screens when a given star shape is clicked upon with the mouse. While you could handle various mouse events and code for such situations, the Blend IDE can automate this process using various SketchFlow behaviors. Before we build these additional screens, complete your MainScreen by adding a simple blurb of descriptive text via the TextBlock control:

So far so good!  We now have integrated our component screen within a larger UI.  In the next post, we will create some additional screens (which also use our navigation system) and then wire up the navigation logic using the NavigateToScreen behavior object.

See you next week!