Getting Started : The Visual Development Tools : Composition Editor: going deeper : Resizing, aligning, and positioning parts
Resizing, aligning, and positioning parts
The next step in working with parts is learning how to fine tune the placement of your parts. This helps the overall look of your user interface. This section introduces you to the following tasks:
Resizing parts
Aligning parts
Positioning parts
Resizing parts
To change the size of a visual part:
1. Select the part you want to resize. The selection handles display at each corner and in the middle of each edge.
2. Drag any one of the selection handles using mouse button 1 to adjust the size of the part.
Before you release the mouse button, an outline of the part is displayed to show you the new size of the part.
3. After you release the mouse button, the part changes to the size you selected.
You can also resize a part one pixel at a time:
1. Select the part you want to resize. The selection handles display at each corner and in the middle of each edge.
2. Hold down the Shift key and use the arrow keys to resize the part one pixel at a time in that direction.
To resize a part vertically, use the selection handle in the middle of the top or bottom edge of the part or use Shift + the up arrow or down arrow keys.
To resize a part horizontally, use the selection handle in the middle of the left or right edge of the part or use Shift + the left or right arrow keys.
To resize a part both vertically and horizontally proportionally at the same time, use the selection handles at the corners of the part.
If you want a part to size to the coordinates of the grid, from the Options menu, select Snap on size.
You can also use the framingSpec property in the part's Properties window to size and align the parts automatically when the window size changes. For more information about properties windows, see Changing part properties.
If you start to resize a part and then decide you want to leave it as it was, press Esc before releasing the mouse button.
Aligning parts
To align parts with other parts, follow these steps:
1. Select the parts you want to align, ensuring the last part selected is the part with which you want to align the others.
2. Select one of the following alignment tools from the tool bar:
Align Left
Align Top
Align Center
Align Middle
Align Right
Align Bottom icon Align Bottom
 
Matching the width of another part
You can size parts to the same width or height of another part.
1. Select the parts you want to match the width of, ensuring the last part selected is the part you want the others to match.
2. Select one of the following sizing tools from the tool bar:
Match Width
Match Height icon Match Height
 
Distributing parts evenly
To distribute parts evenly within another part (typically a Window part), follow these steps:
1. Multiple-select the parts you want to distribute evenly.
2. Select one of the following distribution tools from the tool bar:
Distribute Horizontally
Distribute Vertically icon Distribute Vertically
To evenly distribute parts within an imaginary bounding box that surrounds the multiple-selected parts, follow these steps:
1. Multiple-select the parts you want to evenly distribute. A minimum of three parts must be selected.
2. From the pop-up menu of one of the selected parts, select Layout > Distribute, and then select one of the following:
Horizontally In Bounding Box
Evenly distribute the selected parts within the area bounded by the left-most edge and right-most edge of the two outermost selected parts.
Vertically In Bounding Box
Evenly distribute the selected parts within the area bounded by the top-most edge and bottom-most edge of the two outermost selected parts.
Positioning parts within a grid
A part that can contain other parts, such as a Window part, has a grid associated with it. You can use this grid to align and space the child parts evenly within the parent part.
To toggle between showing and hiding the grid, select the part, and then select the Toggle Grid tool Grid icon from the toolbar or select Toggle Grid from the parts pop-up menu.
To specify the grid spacing of a part, select Set Grid Spacing from the part's pop-up menu. In the Set Grid Spacing window, specify the horizontal and vertical distance between the lines of the grid.
You can automatically position a part to the nearest grid coordinate when it is added to the free-form surface or moved by selecting Snap On Drop from the Options menu.
To position the top-left corner of child parts to the nearest grid coordinate of the parent part:
1. Select the Toggle Grid tool Grid icon from the toolbar to display the grid, if it is not already displayed.
2. Select the parts you want to position.
3. Select the Snap To Grid tool Snap To Grid icon from the toolbar.
 
Last modified date: 03/27/2020