Aligning Objects

The toolbar provides buttons to assist you in aligning the components in your UI Designs.

Aligning Multiple Components in a UI Design

  1. Open a UI design in the UI Design Editor or select an open UI Design.
  2. Select the objects which you wish to align in the layout area of the UI Design Editor or in the Outline view.
  3. Press the shift or control key when selecting objects to make multiple selections. The selected objects will be displayed with a bounding box that has drag rectangles at each corner and in the middle of each side as shown in Figure 1.

    before cleanup

    Figure 1 - Multiple objects ready for alignment

    The alignment operation will use the most recently selected component as the standard for aligning the other selected objects.

    NOTE You can recognize the most recently selected component by looking for the one with solid drag rectangles. In Figure 1, the Range Editor component illustrates the appearance of the most recently selected component.

  4. Click the button in the toolbar which corresponds to the desired alignment operation.
  5. The toolbar's buttons are logically grouped into sets which perform similar operations, as shown in Figure 2. The three buttons in the Horizontal Alignment section allow you to align the left edges, centers, or right edges of the selected objects respectively. Similarly, the three buttons in the Vertical Alignment section allow you to align the top edges, centers, or bottom edges of the selected objects.

    toolbar labeled

    Figure 2 - The Toolbar Pane for the UI Design Editor

    The selected components will be moved as necessary to align themselves to the placement of the most recently selected component, as shown in Figure 3.

    after align left

    Figure 3 - Multiple objects after alignment

    NOTE If you perform an alignment that does not give the desired results, you may use the standard Undo item in the Edit menu to restore your design to its pre-aligned state.