Create content on the artboard
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 Expression 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.
.png "Ee341385.c5da9dd8-4356-4803-aab0-64635bf9866b(en-us,Expression.40).png")
.png "Ee341385.25182a96-9a69-478a-9cfe-5b360e6a9bea(en-us,Expression.40).png") |
Artboard |
.png "Ee341385.05fe4b1d-f584-4bd2-99b6-8bc2d735a89d(en-us,Expression.40).png") |
SketchFlow Map panel |
To create a new unconnected screen
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.
To draw something on the new screen, double-click the node in the SketchFlow Map panel to select the associated document tab.
For more information about creating new screens and working in the SketchFlow Map panel, see Create an application flow.
Objects
In Expression 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 Expression 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. Expression 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. On the Assets panel, click Styles.
For more information about working with controls in Expression Blend, see Choosing and using interactive controls.
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.
Behaviors
Expression 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 Expression 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 Expression Blend, see Add interactivity.
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 Annotate a document.
Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.