Selecting, Navigating and Resizing Controls

Selecting 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.

Note: Press and hold (Ctrl) while clicking on a selected control to deselect it from the existing selection.

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.

Navigating Controls

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.

Note: Controls cannot be moved outside of their parent object boundary.

  • 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.
TIP: Dragging a group of controls with the mouse, or nudging them with the cursor keys will retain their relative positions. Altering the X and Y properties will reposition the controls top left corner of the bounding box to the new specified location. Use caution as this action could cause the controls to stack.

Note: If the Show Grid is enabled, the selected control(s) will snap to the nearest grid point, whether dragging them with the mouse or nudging them with the cursor keys.

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.
TIP: If using the keyboard shortcuts and pasting an object on the same page and within the same parent object as you copied from the new object will be placed directly over (stacked on top of) the copied object. Use the (Shift) key and the mouse to quickly align pasted controls into rows and/or columns.

Click to select the [Show Grid] button 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 .

Note: Enabling snap to grid functionality will not automatically reformat or move existing controls on the page to align with the grid. Instead with this feature enabled, any new controls added to the page or any controls moved on the page will snap to the displayed grid.

Resizing Controls

  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 re-sized 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.

    Note: If multiple controls are selected, changing the size of the bounding box will retain the relative size of the selected controls. A control that is twice the size of another will still be twice as large as the other if they are re-sized together, regardless of their previous sizes or their new size.

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 re-sized 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:

  • [Align Left] - aligns all selected controls to the left side of the bounding box
  • [Align Center] - aligns all selected controls to the vertical center 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 Middle] - aligns all selected controls to the horizontal of the middle of the bounding box
  • [Align Bottom] - aligns all selected controls to the bottom side of the bounding box
  • [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.
  • Layout Spacing - specify the distance (in pixels) between the selected objects in when using the layout and grid tools.

    Example: 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.

    Tip: Right-click on a control and select "Make the Same Size" from the context menu, to set the right-clicked control to the size of a previously selected control. For example, select button 1, right-click on button 2 and select "Make the Same Size". Button 2 will change to have the exact geometry of button 1.

Lock Position

To lock the position of all controls in the configuration, click the [Lock Position] button in the toolbar. To unlock this control, click the [Lock Position] button again.