Components let you create reusable bits and share them across multiple screens. This is helpful for creating common parts like navigation, headers and footers. Components can then be used by other screens without unnecessary duplication. Changes to a component are automatically reflected in every place it is used. Components in WireframeSketcher behave a lot like “masters” in other tools, or “master objects” to be more precise. However components are much more flexible – hence the name.
Any regular screen can be used as a component. Use this feature to create screen variations without content duplication. Additionally, you can place multiple components in the same screen file using named groups. This is the recommended way to create stencils.
You can quickly extract selected widgets into a component using Convert to Component… action from the context menu. Choose a new screen file to save the component to and click Finish.
Screens that to be used as components can also be placed in the “assets” folder in the root of your project. These screens will be automatically loaded into the Palette. Use Mockups Gallery to add pre-built assets.
Assets can be shared between projects using project references. Project references can be configured using Project Explorer. Right-click on a project and then select Properties > Project References. This mechanism lets you place assets in a global project and then reference it in other projects that also need those assets.
Like images, components can be added using several methods:
Components come with an inheritance mechanism that allows component instances to be customized by overriding their individual properties. The instance remains linked to its source and is updated, with overrides preserved, when the source is changed. To override properties, first “enter” the component in Overriding properties mode using double-click. Edit the component’s contents in the usual way by changing properties, moving, resizing or deleting widgets. Hit Escape to exit component editing.
Note that Overriding properties mode has some limitations. Specifically, it’s not possible to add/nest new components while in this mode. Pasting, duplicating or adding new components from the palette while being in this mode will result in a warning message. The solution to this issue is to exit this mode and to overlay new components above instead of nesting them inside.
A component can also be detached from its original source and copied into the current screen as a group. Detaching the component will automatically apply any overrides and make them part of the copy. To detach the component choose “Detach Component” from the context menu.
When designing components use anchors to control how widgets behave when the component is resized. Using anchors it’s possible to combine simple shapes and objects into complex components that resize well and are more reusable.
Consider using SVG images for new components. You can place helper images in “assets” directory and use them in your stencil. Prefix image names with underscore, e.g. _ipad_popover.svg, to hide them from the Palette.
Next: Working with Annotations