Sizing objects

You can change the dimensions of objects on the Design Canvas in any of the following ways:

• Dragging selection handles
• Using shifted arrow keys to change dimensions in one-pixel increments
• Explicitly setting the values of the Size property
• Duplicating the dimensions of a specified base object
• Sizing objects to grid dimensions

Sizing objects by dragging

To size objects by dragging, select one or more objects that you want to operate on. Click on a selection handle on one of the objects and hold down the primary mouse button while you drag that object to the desired shape. Changes to the dimensions of the dragged object are applied in equal increments to all selected objects.

Once you have sized controls the way you want them, you can lock them to protect against their being resized by dragging. To do so, right-click on the Design Canvas and select Lock Controls. A locked control shows a small padlock icon at its top left corner when selected. This option does not prevent resizing by setting values in the Properties grid, nor does it apply to controls that you add after you invoke the locking option. To turn off the option, select Lock Controls from the context menu again.

Changing dimensions by increments of one pixel

To increase or decrease width or height by increments of a single pixel, select one or more objects that you want to operate on. Hold down Shift and press an arrow key as follows:

• Shift + right arrow - To increase the width by one pixel
• Shift + left arrow - To decrease the width by one pixel
• Shift + down arrow - To increase the height by one pixel
• Shift + up arrow - To decrease the height by one pixel

Sizing objects by setting property values

To size objects explicitly to precise dimensions, select one or more objects that you want to operate on. In the Properties view, click the Properties tab and find the Size property in the grid.

• When a single object is selected - The Size row of the grid shows the current dimensions (in pixels) in the right (value) column as two comma-separated values, width first followed by height. You can expand this row by clicking the plus symbol (+) to show separate Width and Height properties. You can edit the values in place in any of these three rows.
• When multiple objects are selected - The Size row of the grid is blank and is not expandable. However, you can enter the desired dimensions (in pixels) in the right column as two comma-separated values, width first followed by height. The dimensions you specify are applied to all selected objects.

Sizing objects by duplicating dimensions

Use this technique when you want to make one or more objects the same size (height, width, or both) as another existing object. Select the base object, that is, the object whose dimension(s) you want to duplicate, select the target objects to which you want to apply the dimension(s) of the base object. Select Design > Size. From the sub-menu, select Width, Height, or Both to apply one or both dimensions of the base object to the target objects.

Sizing objects to grid dimensions

The Design Canvas has an underlying grid (not visible on the form at run time) that is available to help you size and position objects. You can set various options related to use of the grid on the Visual Designer Preferences page. These options include the horizontal and vertical spacing of the grid lines.

The Size To Grid option is a quick way to adjust the size of selected objects so that their dimensions are multiples of the specified grid spacing values. The adjustment either enlarges or shrinks each object to the nearest exact multiple. For example, suppose you are using the default grid spacing of eight pixels for both horizontal and vertical dimensions. If you apply the Size To Grid command to a control that measures 17 pixels wide by 23 pixels high, the control is resized to 16 pixels wide by 24 pixels high (the nearest exact multiples of 8 to 17 and 23, respectively).

To use this command, select the controls to be resized and then select Design > Size > Size To Grid. Note that this command also snaps the objects to the nearest grid lines.