Create an application flow in Blend SketchFlow

The SketchFlow Map panel is a graph editor in which you can define the structure, flow, navigation, and composition of an application.

You can use the SketchFlow Map panel to focus on the structure of an application, and the artboard to focus on the content of individual screens.

Navigation screens

Every screen in your prototype is represented by a node in the SketchFlow Map panel. You can connect one screen to another by using a navigation connection to imply the navigation between screens. When you run the prototype in the SketchFlow Player, the connections between navigation nodes simulate the navigation between screens in the Navigate panel.

Component screens are also displayed in the SketchFlow Map panel. For more information, see "Component screens," later in this topic.

There are several ways to define navigation between screens in SketchFlow. You can create new connected screens from existing screens in the SketchFlow Map panel. You can connect two unconnected screens in the SketchFlow Map panel. Or you can right-click an object on a screen and define the navigation by using the Navigate to command on the shortcut menu.

To add a new connected navigation screen to the SketchFlow map

1. When you create a new SketchFlow project, a new file named "Screen 1.xaml" is created. It appears in the SketchFlow Map panel as a node, and in the Project panel as a UserControl.

   Note

   To open a new SketchFlow project, see Create a prototype project in Blend SketchFlow.

   Move the pointer over the first node (Screen 1) in the upper-left corner of the SketchFlow Map panel.

   Note

   If you can't see the SketchFlow Map panel, on the Window menu, click SketchFlow Map, or press SHIFT+F12.

   The node becomes highlighted, and its associated XAML file name appears in a tooltip. A visual menu also appears at the bottom of the node:

   

2. Move the pointer over the left icon in the visual menu. Start dragging the icon. A new "ghosted" node appears, following the pointer.

3. Finish dragging the navigation screen icon to where you want the new screen to be. You can now name the screen by typing directly in the text box. If the new screen is not renamed, the new node will be named "Screen x," where "x" is the next number in the series of numbered screen names that appear in the application flow.

   Note

   You can change the name by right-clicking the node and then clicking Rename, or by clicking the node, pressing SHIFT+F2, and then typing the new name directly in the node.

4. To draw something on the new screen, double-click the node in the SketchFlow Map panel to select the associated document tab.

To add a new unconnected navigation screen to the SketchFlow map

1. Right-click in the SketchFlow Map panel, and then click Create a screen.

   Note

   If you can't see the SketchFlow Map panel, on the Window menu, click SketchFlow Map, or press SHIFT+F12.

   Note

   You can change the name by right-clicking the node and then clicking Rename, or by clicking the node, pressing SHIFT+F2, and then typing the new name directly in the node.

2. To draw something on the new screen, double-click the node in the SketchFlow Map panel to select the associated document tab.

   Tip

   Alternatively, in the SketchFlow Map toolbar, click Create a screen .

To connect two unconnected navigation screens

1. In the SketchFlow Map panel, move the pointer over the node from which you want to connect.

   Note

   If you can't see the SketchFlow Map panel, on the Window menu, click SketchFlow Map, or press SHIFT+F12.

   The node becomes highlighted, and its associated XAML file name appears in a tooltip. A visual menu also appears at the bottom of the node:

   

2. Move the pointer over the Connect an existing screen  icon in the visual menu that is second from the left. Start dragging the icon to create a new navigation connection. An arrow appears, following the pointer.

3. Finish dragging the arrow to the screen to which you want to connect. To remove the connection, right-click on the arrow and click Remove.

   Tip

   Alternatively, click and drag the node over the node to which you want to connect.

Component screens

Component nodes, like navigation nodes, appear in the SketchFlow Map panel. One important difference between component nodes and navigation nodes is that component nodes, unlike navigation nodes, do not have incoming navigation connections. However, component nodes can have incoming composition connections. Connections, the arrows that imply links between nodes in the application flow, indicate the screens in which a component screen appears.

A component node contains content that can be reused on multiple screens. For example, you can create a component node that contains a background and another component node that contains a menu, and then use those components on multiple screens throughout the prototype.

There are different ways to create a new component node. You can add a new component node directly in the SketchFlow Map panel, or you can select content on the screen and make it into a screen that appears as a component node in the SketchFlow map.

To add a new unconnected component screen to the SketchFlow map

• Right-click anywhere in the SketchFlow Map panel, and then click Create a component screen.

To add a new connected component screen to the SketchFlow map

1. In the SketchFlow Map panel, move the pointer over the node from which you want to add a connected component screen.

   Note

   If you can't see the SketchFlow Map panel, on the Window menu, click SketchFlow Map, or press SHIFT+F12.

   The node becomes highlighted, and its associated XAML file name appears in a tooltip. A visual menu also appears at the bottom of the node.

   

2. Move the pointer over the Create and insert a component screen icon in the visual menu that is second from the right. Start dragging the icon to create a new component connection. An arrow appears, following the pointer.

UserControls

A component screen is a type of UserControl. When you create a component screen, it appears in the SketchFlow map. You can also create a UserControl that is not a component screen. User controls that are not component screens do not appear in the SketchFlow map.

To make a UserControl into a component screen

1. Select the object or group of objects that you want to convert into a component screen.

   Note

   To select a group of objects, drag a bounding outline around the group of objects that you want to include.

2. Right-click the selection, and then click Make Into Component Screen.

3. In the Make Into Component Screen dialog box, in the Name box, type a name for the UserControl.

4. Click OK.

   Note

   The project may have to be rebuilt (F5) before the component screen appears in the navigation screen.

To create a new UserControl from an existing object

1. Select the object or group of objects that you want to convert into a UserControl.

   Note

   To select a group of objects, drag a bounding outline around it. You can also select objects directly in the Resources panel.

2. Right-click the selection, and then click Make Into UserControl.

3. In the Make Into UserControl dialog box, in the Name box, type a name for the UserControl.

   For more information, see Create an empty user control.

Visual tagging

Visual tagging can help you differentiate between types of screens and types of connections by applying different colors to different types of screens and connections in the SketchFlow map.

To add visual tagging to a node

1. Move the pointer over the node that you want to tag in the SketchFlow Map panel.

   Note

   If you can't see the SketchFlow Map panel, on the Window menu, click SketchFlow Map, or press SHIFT+F12.

2. The node becomes highlighted, and its associated XAML file name appears in a tooltip. A visual menu also appears at the bottom of the node:

   

3. Move the pointer over Change visual tag (the icon on the right). Click the icon, and then click the color that you want to use for the node.

To add visual tagging to a connection

1. Right-click the connection that you want to tag in the SketchFlow Map panel.

   Note

   If you can't see the SketchFlow Map panel, on the Window menu, click SketchFlow Map, or press SHIFT+F12.

   The connection becomes highlighted.

2. Click Visual Tag, and then click the color that you want to use for the connection.