Aligning Components

Regardless of whether you have the Snap to Grid option turned on, you sometimes need to align components after placing them. Aligning components could mean aligning several components along a common edge, centering components on the form, or spacing components. There are two ways to align components:

  • Use the Alignment palette and Alignment dialog box.
  • Modify a component's Align property. The following sections explain these two methods.

NOTE: You might have noticed the Alignment property for some components. This property pertains only to the way the component's text is aligned (centered, right-justified, or left-justified) and has nothing to do with aligning components on a form.

The Alignment Palette and the Alignment Dialog Box

It is often necessary to move or size components relative to the form or relative to one another. The Alignment palette contains several buttons that aid in that task. The Alignment dialog box performs the same operations as the Alignment palette, but in a different format. To display the Alignment palette, choose View | Alignment Palette from the main menu. Figure 6.10 shows the Alignment palette and describes each button. If you pause the mouse cursor over a button on the Alignment palette, a tooltip describing the button will appear.

FIGURE 6.10. The Alignment palette.

TIP: The Alignment palette can save you a lot of work. Don't spend too much time trying to get controls to line up exactly. Place the components on the form and then use the Alignment palette to position them.

The Align Left Edges button is used to line up components on their left edges. Start with a blank form and then do the following:

  1. Place five button components vertically on the form without regard to their left edges.
  2. Select the buttons by dragging a bounding rectangle around them. The selection indicators show that all the buttons are selected. The form will look something like the one in Figure 6.11.

FIGURE 6.11. The form with the buttons randomly placed.

  1. Choose View | Alignment Palette from the main menu. The Alignment palette is displayed. Move the Alignment palette, if necessary, so that it doesn't obscure the form.
  2. Click the Align Left Edges button on the Alignment palette. The buttons are all lined up.

See how easy that is? As long as you have the buttons selected, let's look at another alignment option. The Space Equally Vertically alignment option can now be used to space the buttons evenly. The buttons should still be selected, so all you have to do is click the Space Equally Vertically button on the Alignment palette, and voilĂ ! The buttons are perfectly spaced. The form will now look like Figure 6.12.

FIGURE 6.12. The form with the buttons aligned and equally spaced.

NOTE: The Space Equally Vertically alignment option spaces the components equally between the first component in the column (the top component) and the last component in the column (the bottom component). Be sure to set the first and last components where you want them before choosing the Space Equally Vertically alignment option. This is true of the Space Equally Horizontally alignment option as well.

The Center Horizontally in Window and Center Vertically in Window alignment options do exactly as their names indicate. These options are convenient for centering a single control on the form or for centering a group of controls. As long as you still have the group of buttons selected, click both the Center Horizontally in Window and Center Vertically in Window buttons on the Alignment palette. The buttons will be centered on the form both horizontally and vertically.

NOTE: When you select a group of controls and click one of the centering buttons, the controls will be treated as a group. If you choose each control individually and center it both horizontally and vertically on the form, all the controls will be stacked on top of one another in the middle of the form. By selecting the group and then centering, you get the entire group centered as you intended.

The form will now look like the one shown in Figure 6.13. FIGURE 6.13. The form with the buttons centered.

NOTE: The Center Horizontally in Window and Center Vertically in Window alignment options can be used to align components contained within other components, such as buttons on a panel. The components will be centered horizontally or vertically on their parent component regardless of whether the parent is a panel, a form, or some other container component.

The Align Tops, Align Bottoms, and Align Right Edges options work just like the Align Left Edges option you used earlier. There's not much point in going over all the possibilities that exist for their use.

TIP: The first component selected will be the anchor point when using any edge-alignment option. Refer to Figure 6.4. Let's say you selected Button3 first and then used Shift+click to select the remaining buttons. When you choose Align Left Edges, Button3 will remain where it is and all the other buttons will line up with Button3's left edge because Button3 is the anchor component.

The Align Horizontal Centers and Align Vertical Centers options can be used to center components relative to one another. This is best illustrated with shapes. Start with a new form (or delete the buttons from the form you have been working on). Now do the following:

  1. Click on the Additional tab on the Component palette and choose the Shape component. Click somewhere on the upper left of the form to add the shape.
  2. Change the Shape property to stCircle.
  3. Change the Width and Height properties to 150.
  4. Double-click the Brush property and change its Color property to clBlack.
  5. Place another Shape component on the form.
  6. Change the second shape's Shape property to stCircle as well. Now you have two circles of different sizes on the screen-- a white circle and a black circle.
  7. Click on the black circle. Hold the Shift key and click on the white circle. Both shapes are selected.
  8. Choose View | Alignment Palette from the main menu, if necessary (it might already be displayed). Arrange the Alignment palette so you can see the two shapes on the form. Observe the shapes as you perform the last two steps.
  9. Click the Align Vertical Centers button on the Alignment palette. The vertical centers are aligned.
  10. Click the Align Horizontal Centers button on the Alignment palette. The horizontal centers are aligned. Congratulations--you made a tire!

Did you see the effect as you performed the last two steps? Notice that because you selected the black circle first, it did not move (it is the anchor component), but the white circle moved as you clicked the alignment buttons. You can use these alignment options to center any number of controls on one another. These two alignment options have no effect when used on a single control.

Like the Component palette, the Alignment palette has a context menu associated with it. Place the mouse cursor over the Alignment palette and click the secondary mouse button. The context menu is displayed. Table 6.2 lists the items on the Alignment palette's context menu and explains their uses.


Menu Item


Stay on Top

Forces the Alignment palette to always be on top. This is useful if you are frequently switching back and forth between the Form Designer and the Code Editor. Because the Alignment palette is a small window, it's easy to lose it.

Show Hints

Turns the hints (tooltips) for the Alignment palette buttons on and off.


Hides the Alignment palette. (You can also use the close box on the

Alignment palette to hide it.) To show the Alignment palette again, you

have to choose View | Alignment Palette from the main menu.


Brings up Delphi Help with the Alignment palette page displayed.

The Alignment dialog box performs the same actions as the Alignment palette. To bring up the Alignment dialog box, choose Edit | Align from the main menu or Align from the Form Designer's context menu. Figure 6.14 shows the Alignment dialog box.

FIGURE 6.14. The Alignment dialog box.

In most cases, the Alignment palette is easier to use, but you can certainly use the Alignment dialog box if you prefer. Using the Align Property

Another type of alignment can be set using the Align property. This property controls how a component is aligned with its parent. The possible values for the Align property and a description of each are listed in Table 6.3.





The component is aligned at the bottom of the parent window. A status bar is an example of a component aligned along the bottom of a main form.


The component expands to fill the parent window's client area. If other components occupy part of the client area, the component fills what client area remains. Examples include Memo components, Image components, and RichEdit components.


The component is aligned along the parent window's left edge. A vertical toolbar is an example of a left-aligned component.


The component is placed as designed with no special relationship to the parent. This is the default for most components.


The component is aligned along the parent's right edge.

alTop The component is aligned along the top of the parent's window. A toolbar is an example of this type of alignment.

An example helps explain the Align property. Start with a blank form and then perform these steps:

  1. Click on the Standard tab on the Component palette and choose a Panel component. Place the panel anywhere on the form.
  2. Locate the Align property in the Object Inspector (it's at the top of the list). Notice that it is set on alNone. Change the Align property to alTop. The panel is aligned at the top of the form and it expands to fill the form's width.
  3. Try to move the panel back to the middle of the form. The panel will snap back to the top.
  4. Try to make the panel narrower. Notice that the panel retains its width.
  5. Change the panel's height. Note that the panel's height can be changed (the width cannot).
  6. Change the Align to alBottom. Now the panel is glued to the bottom of the form.
  7. Change the Align to alRight and then alLeft. The width is now the same as the height was before. In effect, the panel is rotated. Again, attempts to move the panel or size it vertically fail.
  8. Change the Align property to alClient. The panel expands to fill the form's entire client area. The panel cannot be resized in any dimension.
  9. Change the Align property to alNone. The panel can again be sized and moved.

As you see, changing Align to anything other than alNone effectively glues the panel to one edge of the form. In the case of alClient, the panel is glued to all four edges.

Was this article helpful?

+1 0
Project Management Made Easy

Project Management Made Easy

What you need to know about… Project Management Made Easy! Project management consists of more than just a large building project and can encompass small projects as well. No matter what the size of your project, you need to have some sort of project management. How you manage your project has everything to do with its outcome.

Get My Free Ebook

Post a comment