Show Grid and 
Snap to Grid on the main toolbar, the grid will help you decide where to drop
the controls. With Snap to Grid on, the top left corner of the control
will snap to the nearest grid corner.When you create a prototype, you need to layout controls on the form. There are several ways to help you position the controls.
| Grid line | Alignment | Moving | Spacing |
You can set a grid view over the composer. If you select
Show Grid and
Snap to Grid on the main toolbar, the grid will help you decide where to drop
the controls. With Snap to Grid on, the top left corner of the control
will snap to the nearest grid corner.
In this figure, a button is dragged to the grid:
In order to align controls, there must be at least 2 controls selected. Hold down the ctrl key while selecting them with the mouse. The relevant composer toolbar buttons are then activated. The controls will be aligned using the first selection as the reference. In this next example, see how you could align 3 buttons. The top button was the first selected and is shown with a blue contour. On the composer toolbar, we select the Align to Left button.
The 3 buttons are now all in line with the left side of the top button because this was the first one selected.
It is possible to align to left (
),
right (
),
top (
),
or bottom (
).
At times, you may want to center the alignment of 2 or more controls. Let's take for example a label and an editor pane. The label could be aligned to the top of the editor pane but you may prefer to have it centered like in the following figure:
Notice how we selected the editor pane first (blue contour) and then the
label. The command center horizontally (
)
is executed in relation to the first selected control. Of course, there is also
the command center vertically (
)
available.
At any time, it is possible to use the general Center Horizontally (
)
and Center Vertically (
)
at the right of the composer toolbar. These commands center one or more controls
selected within their container. In the following example, there are several
controls within a panel.
If we select, for example, the label User Name: and then the shortcut
keys ctrl+A, by pressing the Center Horizontally ()
and Center Vertically ()
commands, we will get the following result:
The controls are now well centered within the panel. Now, let's select the
login panel and press the Center Horizontally ()
and Center Vertically ()
commands, we will get the following result:
There are 2 ways to move controls in the composer: with the mouse and with the keyboard.
Note: If you drop a control over another one, you may not be able to see it or select it afterwards. In this case, you can use the Undo command during the current session.
To manage the spacing between controls, there must be at least 2 controls selected. Hold down the ctrl key while selecting them with the mouse. The relevant composer toolbar buttons are then activated. The spacing will be calculated between the first and last selected controls of a series. In this next example, see how you make the spacing equal between the 3 buttons (there must be at least 3 controls selected for this command to be activated). The top button was the first selected and is shown with a blue contour. On the composer toolbar, we select the Make Vertical Spacing Equal button.
The space between the 3 buttons is now equal.
It is possible to increase (
)
or decrease (
)
the spacing between the controls by 1 pixel at a time. It is also possible to remove
(
)
completely any space between the controls.
The similar horizontal commands display on the composer toolbar if the selected controls are in horizontal position like this example:
