You can create quick and easy prototypes by using the SketchFlow mockup controls available for Microsoft Expression Blend 4.
Mockup controls are control templates based on common windows such as the desktop, Windows Explorer, and a web browser, to which you can add buttons, menus, dialog boxes, and other frequently used controls.
After you’ve added the mockup controls to your project, you can easily modify and add interactivity to your application with a few clicks of the mouse.
You can get a preview of the mockup controls by viewing the MockupDemonstration sample available in the Welcome screen.
To view the MockupDemonstration sample
- In the Welcome screen, click Samples, and then click MockupDemonstration. The MockupDemonstration project opens in Expression Blend.Tip: If the Welcome screen isn’t visible, on the Help menu, click Welcome Screen.
- Click F5 to start the sample in the SketchFlow Player. Use the controls in the SketchFlow Player to view the project.
The mockup controls described in the sample are not included in Expression Blend by default. However, they are available for you to download. AFter you have downloaded the mockup controls, they are available for you to use in any Expression Blend project.
To download the mockup controls
- Download the mockup controls from Codeplex.
Now that you’ve installed the controls, you can now access the mockup controls from the Assets panel in both the SketchFlow category and the Categories category.
Mockup controls
The following is a description of each of the mockup controls, and information about how to modify the control after you’ve added it to your project.
You can preview each control and any built-in interactivity by pressing F5 and viewing the control in the SketchFlow Player.
BlockOfTextMockup
The BlockOfTextMockup control represents a block of text. After you’ve added the BlockOfTextMockup control to the artboard, you can click the control and customize the BlockOfTextMockup properties in the Layout category of the Properties panel. You can double-click the text inside the text block to customize the TextBlock properties in the Text category of the Properties panel.
You can also select the BlockOfTextMockup controls directly in the Objects and Timeline panel. Expand the BlockOfTextMockup control to select the TextBlock control.
DesktopMockup
The DesktopMockup control represents a Windows desktop with a simple Start menu expanded. The Start menu includes a series of buttons that can be modified to suit your needs.
After you’ve added the DesktopMockup control to the artboard, click it to modify the properties in the Layout category in the Properties panel. You can click the individual buttons to modify the properties, including the icon (the IconImage property), in the Common Properties category in the Properties panel. You can modify the text directly in the button by double-clicking inside the button that you want to modify.
You can select the DesktopMockup controls in the Objects and Timeline panel. Expand the DesktopMockup control to explore the parts of the control, including the MiniWrapPanel that contains the task bar items and the StackPanel that contains the Start menu buttons.
MediaControlsMockup
The MediaControlsMockup control represents a collection of common video and audio controls. Click the control to modify the properties in the Layout category in the Properties panel.
OneButtonDialogMockup
The OneButtonDialogMockup control represents a dialog box with a single button. After you’ve added the control to the artboard, you can modify the properties, including the icon (the IconImage property), in the Common Properties category in the Properties panel. You can modify the text in the dialog box by double-clicking the text that you want to modify.
You can also select the OneButtonDialogMockup control directly in the Objects and Timeline panel. Expand the OneButtonDialogMockup control to select the Button, TextBox and TextBlock controls.
TwoButtonDialogMockup
The TwoButtonDialogMockup control represents a dialog box with two buttons. After you’ve added the control to the artboard, you can modify the properties, including the icon (the IconImage property), in the Common Properties category in the Properties panel. You can modify the text in the dialog box by double-clicking the text that you want to modify.
You can also select the TwoButtonDialogMockup control directly in the Objects and Timeline panel. Expand the TwoButtonDialogMockup control to select the Button, TextBox and TextBlock controls.
ThreeButtonDialogMockup
The ThreeButtonDialogMockup control represents a dialog box with three buttons. After you’ve added the control to the artboard, you can modify the properties, including the icon (the IconImage property), in the Common Properties category in the Properties panel. You can modify the text in the dialog box by double-clicking the text that you want to modify.
You can also select the ThreeButtonDialogMockup control directly in the Objects and Timeline panel. Expand the ThreeButtonDialogMockup control to select the Button, TextBox and TextBlock controls.
ValueEditorMockup
The ValueEditorMockup control represents a property value editor. After you’ve added the ValueEditorMockup control to the artboard, click it to modify the properties in the Layout category in the Properties panel. You can modify the text directly by double-clicking the text that you want to modify.
You can also select the ValueEditorMockup control directly in the Objects and Timeline panel. Expand the ValueEditorMockup control to select the TextBox and TextBlock controls.
WindowsExplorerMockup
The WindowsExplorerMockup control represents an open instance of Windows Explorer. After you’ve added the WindowsExplorerMockup control to the artboard, click it to modify the properties in the Layout category in the Properties panel. You can modify the dialog box title text, address bar text, and file location text directly by double-clicking the text that you want to modify.
You can also select the WindowsExplorerMockup control directly in the Objects and Timeline panel. Expand the WindowsExplorerMockup control to select the TextBox and TextBlock controls.
ButtonIconWithMockup
The ButtonIconWithMockup control represents a button with an icon and text. After you’ve added the ButtonIconWithMockup control to the artboard, click it to modify the properties in the Layout category in the Properties panel. You can click the individual buttons to modify the properties, including the icon (the IconImage property), in the Common Properties category in the Properties panel. You can modify the text directly in the button by double-clicking inside the button.
IconMockup
The IconMockup control represents an icon. After you’ve added the IconMockup control to the artboard, you can modify the icon (the IconImage property), in the Common Properties category in the Properties panel.
MediaPlayerMockup
The MediaPlayerMockup control represents a media player. After you’ve added the MediaPlayerMockup control to the artboard, click it to modify the properties in the Layout category in the Properties panel. You can modify the media player title text and the text inside the player.
You can also select the MediaPlayerMockup control directly in the Objects and Timeline panel. Expand the MediaPlayerMockup control to select the TextBox and TextBlock controls.
OptionButtonIconWithMockup
The OptionButtonIconWithMockup control represents a radio button with an icon and text. After you’ve added the OptionButtonIconWithMockup control to the artboard, click it to modify the properties in the Layout category in the Properties panel. You can click the individual buttons to modify the properties, including the icon (the IconImage property), in the Common Properties category in the Properties panel. You can also modify the text directly in the button by double-clicking inside the button.
ToggleButtonIconWithMockup
The ToggleButtonIconWithMockup control represents a radio button with an icon and text. After you’ve added the ToggleButtonIconWithMockup control to the artboard, click it to modify the properties in the Layout category in the Properties panel. You can click the individual buttons to modify the properties, including the icon (the IconImage property), in the Common Properties category in the Properties panel. You can also modify the text directly in the button by double-clicking inside the button.
WebBrowserMockup
The WebBrowserMockup control represents an instance of a web browser. You can modify the browser title text, address bar text, and status bar text directly by double-clicking the text that you want to modify.
You can also select the WebBrowserMockup control directly in the Objects and Timeline panel. Expand the WebBrowserMockup control to select the TextBox and TextBlock controls.
CursorMockup
The CursorMockup control represents a cursor. After you’ve added the CursorMockup control to the artboard, you can modify the type of cursor (the IconImage property), in the Common Properties category in the Properties panel.
LogonMockup
The LogonMockup control represents a log on prompt. After you’ve added the LogonMockup control to the artboard, click it to modify the properties in the Layout category in the Properties panel. You can modify the text directly by double-clicking the text that you want to modify.
You can also select the LogonMockup control directly in the Objects and Timeline panel. Expand the LogonMockup control to select the Button, TextBox and TextBlock controls.
MenuMockup
The MenuMockup control represents an expanded drop-down menu. After you’ve added the MenuMockup control to the artboard, click it to modify the properties in the Layout category in the Properties panel. You can click the individual menu items to modify the properties, including the icon (the IconImage property), in the Common Properties category in the Properties panel. You can modify the text directly in the menu item by double-clicking inside the menu item.
You can also select the MenuMockup control directly in the Objects and Timeline panel. Expand the MenuMockup control to select the ButtonWithIconMockup controls.
PageSelectorMockup
The PageSelectorMockup control represents a page selector. After you’ve added the PageSelectorMockup control to the artboard, you can click the control and customize the PageSelectorMockup properties in the Layout category of the Properties panel. You can double-click the text inside the text block to customize the TextBlock properties in the Text category of the Properties panel.
You can also select the PageSelectorMockup controls directly in the Objects and Timeline panel. Expand the PageSelectorMockup control to select the TextBlock control.
WindowMockup
The WindowMockup control represents an instance of an application. You can modify the window title text and status bar text directly by double-clicking the text that you want to modify.
You can also select the WindowMockup control directly in the Objects and Timeline panel. Expand the WebBrowserMockup control to select the TextBox and TextBlock controls.
Putting it all together
By mixing and matching the mockup controls, and then defining navigation, applying built-in behaviors, creating Sketchflow animations, or adding other interactive elements such as visual states or sample data, you can quickly and easily build a professional looking prototype for your next Windows Presentation Foundation (WPF) or Silverlight SketchFlow project.