Create an application flow

  • Article

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.

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 application flow

  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.

    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:

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(en-us,Expression.30).png

  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. The new node appears and is called "Screen 2" by default.

    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.

The connection between nodes implies navigation between those nodes. You can also create navigation nodes that do not have a navigation connection defined.

To add a new unconnected navigation screen to the application flow

  1. Right-click in the SketchFlow Map panel, and then click Add navigation 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 screenEe341405.d63bd8e7-f302-48bb-a42e-119eb2fa06f8(en-us,Expression.30).png.

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.

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(en-us,Expression.30).png

  2. Move the pointer over the Connect an existing screenEe341405.edc454d7-a6dd-4721-a849-4069d5ffebe6(en-us,Expression.30).png 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 mouse 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 connections. Component nodes have only outgoing 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 and add it to the application flow

  • Right-click anywhere in the SketchFlow Map panel, and then click Add Component Screen.

To add a new connected component screen and add it to the application flow

  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.

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(en-us,Expression.30).png

  2. Move the pointer over the Create and insert a component screenEe341405.91c06759-86fc-4dbf-a8b7-061300304308(en-us,Expression.30).png 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 mouse pointer.

  3. Drag the arrow to the screen to which you want to connect, and release the mouse.

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. Optional: To add the component screen to the application flow, select Add to SketchFlow Map.

  5. Click OK.

    Note

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

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 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.

    Ee341405.051894cf-0f0d-482f-a15c-02ed9cdd0a01(en-us,Expression.30).png

  3. Move the pointer over 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. Move the pointer over 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.

You can also change the visual tagging for an entire project by modifying the SketchFlow project settings.

For more information, see Modify the SketchFlow project settings.