Selecting, Navigating and Resizing Controls

To select a control you must first exit draw mode. To exit draw mode, click on the [Select Mode] button in the toolbar or press (Esc) on your alphanumeric keyboard. Next select a control on the Page workspace or click on the control's name in Object Browser.

While in Select Mode, you can select multiple controls:

• Press and hold (Ctrl) while clicking to select a control. Each new control clicked adds that control to the current selection.
• Click and drag a box around the controls you wish to select, then releasing the mouse button to initiate a rubber-band selection. Controls that fall entirely within the selection box will be included.

A parent object can be defined as any frame, tab, pop up, and even the page itself. Parent objects have a selection context which allows you to add and select controls that fall within the parent object boundaries. You may select any and all controls within the boundary of a parent object but you cannot select multiple controls of two different parent objects at one time.

Select all controls within a selected parent object at once using the following method:

• with the parent object selected, select (Edit) "Select All".

• with the parent object selected, press (Ctrl) + (A) from the alphanumeric keyboard.

A boundary rectangle is automatically drawn around the selection and includes handles to resize the selected objects.

To delete a control:

• in Select Mode enabled, select the control and press (Delete) from your alphanumeric keyboard.
• right-click on the control and select "Delete" from the context menu.

To move a control or multiple controls, you must first select them.

• drag and drop the control(s) to a new location.
• change the "X" and "Y" properties of the control as found in the Property Editor.
• use the cursor keys on the alphanumeric keyboard to move the controls one pixel at a time.

You can use the (Shift) key as a toggle to constrain the movement of one or more controls so that they move only in a horizontal or vertical direction.

Click to select a control or multiple controls as required then press and hold the (Shift) key on your alphanumeric keyboard. Keeping the mouse button held and moving the control(s) maintains the horizontal or vertical axis for the selection. Releasing the (Shift) key will unlock the locked axis.

When controls of the same size, type, and even state are required on different pages of your configuration; you can copy and paste a control between pages.

1. Select the control or multiple controls to be copied.
2. Right-click and select "Copy" from the context menu or press (Ctrl) + (C) on your alphanumeric keyboard.
3. Navigate to the page you wish to place the copied control(s).
4. If the control is to be in a parent object other than the page itself, select the parent object.
5. Right-click and select "Paste" from the context menu or press (Ctrl) + (V) on your alphanumeric keyboard.

Click to select the [Show Grid] icon on the configuration toolbar to enable snap to grid functionality. Once enabled, the grid is displayed behind all controls in the Page workspace.

Grid spacing can be changed using the grid spacing box located to the right of the [Show Grid] button .

1. To resize a control or multiple controls of varying sizes at once, maintaining each controls proportion, you must first select them. See "Selecting Controls" for detailed instruction. Controls cannot be resized larger than their parent object boundary.
2. Click one of the eight 'handles' around the outside of the bounding box and drag them to a new size.

   

   • The handles in the four corners of the bounding box will resize the selected control(s) such that the diagonally opposite corner will remain fixed, allowing both the width and height to be altered at once.
   • The handles in the middle of each edge will resize the selected control(s) such that the opposite edge remains fixed, therefore only altering width or height, depending on the edge that the handle is on.

3. Alternatively you can modify the "Width" and "Height" properties of the control as found in the Property Editor.

To resize a control or multiple controls of varying sizes at once, changing their proportion to equal sizes, you must first select the controls to be modified. See "Selecting Controls" for detailed instruction. Controls cannot be resized larger than their parent object boundary. Once the controls are selected, use the tools in the configuration toolbar to resize and align the controls.

From left to right, the tools are:

• [Layout Horizontal] - resize selected controls into equal sized horizontal columns
• [Layout Vertical] - resize selected controls into equal sized vertical rows
• [Layout Grid] - resize selected controls proportionally to fill the space of the bounding box. Additionally, a spacing box is provided to select grid layout spacing.
• [Align Left] - aligns all selected controls to the left side of the bounding box
• [Align Right] - aligns all selected controls to the right side of the bounding box
• [Align Top] - aligns all selected controls to the top side of the bounding box
• [Align Bottom] - aligns all selected controls to the bottom side of the bounding box

The layout spacing tool is located in the toolbar with the layout proportion (size) tools . The layout spacing tool allows you to increase or decrease the spacing between the controls, in pixel increments. This tool works in conjunction with the layout proportion tools such as the [Layout Horizontal], [Layout Vertical], and [Layout Grid].

You can resize controls that have been laid out using the layout tools to fit within a bounding box. For example if you have four buttons selected and utilize the [Layout Vertical] tool, the buttons cluster together in a bounding box separated by the amount of pixels that are set in the layout spacing tool.

With the cluster of controls still selected, you can change the spacing between the buttons as needed, increasing the space between the buttons (raising the numeric value in the layout spacing tool) or decreasing the space between the controls (lowering the numeric value in the layout spacing tool). The bounding box remains the same size and in the same location, no matter what spacing is specified for between the controls.