Create content on the artboard in Blend SketchFlow

You add new screens to your prototype project in the SketchFlow Map panel, and then create content on the artboard in the Design window.

When you focus on individual screens, you can draw with any of the vector graphics drawing tools available in Blend, or you can import files from Photoshop, preserving layers, vector masks, and text, if you like. You can also use pictures of user interface (UI) controls as part of your prototype, and create reusable components on the fly. You also have access to the full range of actual UI controls available for Windows Presentation Foundation (WPF) and Microsoft Silverlight.

	Artboard
	SketchFlow Map panel

To create a new unconnected screen

1. Right-click anywhere in the SketchFlow Map panel, and then click one of the following:

   • Create a Screen

   • Create a Component Screen

   Note

   To connect the new screen to an existing screen, click the new screen, and then drag the new screen to the screen to which you want to connect it.

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

Objects

In Blend, an object is anything that you can position on the artboard. For example, after you add a visual element to the artboard, it becomes an object in your application.

You can add an object to the artboard by selecting a tool in the Tools panel or in the Assets panel, or by selecting a styled or custom control in the Assets panel. You can also drag a styled control from the Resources panel, or drag resources from the Resources panel onto an existing object on the artboard to apply the resource to one of the properties of the object. In addition, you can drag images, sound files, video files, and other media directly from Windows Explorer into Blend, or copy images from other applications and paste them directly onto the artboard.

For more information about working with objects, see Working with objects and controls.

Controls

A control is a type of object that enables user interaction or input. Blend provides an extensive list of controls that you can use to design your WPF and Silverlight prototypes.

Because polished UI elements can distract from reviewing the interactive design instead of the look of an application, SketchFlow also includes a set of styles that give the standard controls a hand-sketched look while maintaining all their functionality.

For more information about working with controls in Blend, see Insert controls and modify their behavior in Blend.

SketchFlow animations

SketchFlow animations can be used in SketchFlow prototypes to help reviewers visualize the different states a particular part of UI might be in. They can be used to show how interaction with the screen might look. They can also be used to hold different design alternatives for any given screen.

For more information about working with SketchFlow animation, see Add interactivity in Blend SketchFlow.

Behaviors

Blend includes behaviors, which are reusable blocks of code that make it easy to apply production-quality interactivity to any design element on the artboard without your having to know or write code. Although Blend provides some prepackaged behaviors, you can also add custom behaviors. A developer can provide a custom behavior that a designer can then easily apply to a design element on the artboard.

For more information about working with behaviors in Blend, see Add interactivity in Blend SketchFlow.

Zooming and panning

If you have a mouse with a mouse wheel, you can zoom in and out on the artboard by pressing CTRL and rotating the mouse wheel.

You can also drag the artboard and any of the elements contained in it if you press SPACEBAR while dragging. In addition, you can drag the application flow diagram anywhere in the window by pressing SPACEBAR while dragging the diagram.

Annotations

In addition to creating and modifying objects and controls on the artboard, you can leave comments and notes on the artboard by using Annotations. Annotations can also be attached directly to objects on the screen. Design-time annotations are visible when you open a SketchFlow project in Microsoft Visual Studio.

For more information, see Annotating project files.

See Also

Tasks

Create reusable content in Blend SketchFlow

Concepts

Add content to the artboard in Blend SketchFlow