In the last post, we examined the role of "component screens" in a SketchFlow prototype. Recall that this allows you to define a replicate a block of UI content across multiple screens in your app.

You also learned at that time how the SketchFlow player can allow the user to manually transition between screens, however what if you wish to build a prototype which has the built in smarts to transition to particular screens using a typical menu selection or button press?

While we could handle events and author code to deal with such issues, Blend provides the NavigateToScreenAction behavior.

When we created our prototype, the component screen had three geometries (star shapes) representing stylized button controls. We now need to somehow account for the fact that when the user clicks on a given star graphic, they will launch to the correct screen. The simplest way to do so is to leverage some unique context menus of the Artboard. Open the Artboard for your NavSystem component, and right click on the star which will bring the user to the main screen. From here, use the Navigate To menu to select the MainScreen option:

So, what exactly did the IDE do based on these actions? If you were to look at the XAML for your NavSystem component, you will see that the navigation logic is handled by a SketchFlow behavior object named NavigateToScreenAction. For example, here is the markup for the first star graphic:

   1: <ed:RegularPolygon ed:GeometryEffect.GeometryEffect="Sketch" 

   2:     InnerRadius="0.47211" PointCount="5" Stretch="Fill" 

   3:     Stroke="{StaticResource BaseBorder-Sketch}" StrokeThickness="2" 

   4:     UseLayoutRounding="False" Height="120" Fill="#FFCE8585">

   5:   <i:Interaction.Triggers>

   6:     <i:EventTrigger EventName="MouseLeftButtonDown">

   7:       <pi:NavigateToScreenAction 

   8:           TargetScreen="OnlineStoreAppScreens.Screen_1"/>

   9:     </i:EventTrigger>

  10:   </i:Interaction.Triggers>

  11: </ed:RegularPolygon>

You could also connect elements to navigation actions by manually adding a SketchFlow behavior from the Assets Library found under the Behaviors section of the SketchFlow node, and then configuring it with the Blend Properties window.

On a related note, like any element on the Artboard, you can locate these behaviors from the Objects and Timeline panel and then change the settings. For example, consider the following figure which shows you how the NavigateToScreenAction behavior was configured by default. Here you can see that the MouseLeftMouseDown trigger is the instigating event, however you are free to change these default settings as you see fit.

In any case, at this point you will find your Map panel is not only showing that each screen is making use of the Component Screen, but you can also see the navigation connection lines:

Now, launch your prototype by pressing the F5 key! You should find that you can navigate between each screen by using the SketchFlow Player NAVIGATE area, as well as when you click on a given star graphic:

So far so good!  In the next blog post, we will learn how to add some interactivity into our prototype using a lightweight animation and effects editor.

See you next week.