Introduction

Once you have a control on your form, you can add another control as we saw in the previous lesson. To position the other control, you can use the previous one as a reference. To assist you with this, when moving the new control to position it, a guiding vertical line would show you the alignment to follow with regards to an existing control. Here is an example:

Using this approach, once the control is aligned fine, you can release the mouse. As another technique, after positioning one or a few controls, to align a control with reference to another, press and hold Ctrl. Then press the left, the up, the right, or the down arrow key. When you press one of these keys, the control would move to align itself with the next control in that direction. Once the alignment is to your liking, release Ctrl.

There are various other techniques you can use to align the controls. We will review them.

If you have a certain control on the form and want to position it exactly at equal distance between the left and the right borders of the form, select the control, then click the Center Horizontally button on the Layout toolbar :

=>

Horizontal alignment affects controls whose distance from the left border of the parent must be the same. To perform this type of alignment, the Layout toolbar provides the necessary buttons. The same actions can be performed using menu items of the Format group on the main menu. The options are as follows:

Button	Name	Format Menu	Description
	Align Lefts	Align -> Lefts	All selected controls will have their left border coincide with the left border of the base control
	Align Centers	Align -> Centers	The middle handles of the selected controls will coincide with the middle handles of the base control
	Align Rights	Align -> Rights	All selected controls will have their right border coincide with the right border of the base control

As seen above, the horizontal-oriented buttons allow moving controls left or right. Another option you have consists of moving controls up or down for better alignment. Once again you must first select the controls. Then on the Layout toolbar or the Format group of the main menu, use the following options:

Button	Name	Format Menu	Description
	Align Tops	Align -> Tops	All selected controls will have their top border coincide with the top border of the base control but their left border would have the same distance with the left border of the parent
	Align Middles	Align -> Middles	The top handles of the selected controls will align vertically with the top handle of the base control
	Align Bottoms	Align -> Bottoms	All selected controls will have their bottom border coincide with the bottom border of the base control but their left border would have the same distance with the left border of the parent

Another valuable option you have consists of controlling the alignment of objects with regards to the extreme borders of controls of the selected group.

You can also position one or more controls in the middle of the form. To do that, select the control, then click the Center Vertically button on the Layout toolbar :

=>

Suppose you have a group of horizontally aligned controls as follows:

Obviously the buttons on this form are not enjoying the most professional alignment. For one thing, the distance between the Continue and the Submit buttons is longer than the distance between the Submit and the Deny buttons. The Layout toolbar and the Format group of the main menu allow you to specify a better horizontal alignment of controls with regards to each other. The options available are:

Button	Name	Format
	Make Horizontal Spacing Equal	Horizontal Spacing -> Make Equal

Result: The Forms Designer will calculate the horizontal distances that separate each combination of two controls and find their average. This average is applied to the horizontal distance of each combination of two controls:

The left control is used as reference
	=>

Button	Name	Format
	Increase Horizontal Spacing	Horizontal Spacing -> Increase

Result: The Forms Designer will move each control horizontally, except the base control (the control that has white squares) by one unit away from the base control. This will be done every time you click the Increase Horizontal Spacing button or the Format -> Horizontal Spacing -> Increase menu item:

The left control is used as reference
	=>
The middle control is used as reference
	=>
The right control is used as reference
	=>

Button	Name	Format
	Decrease Horizontal Spacing	Horizontal Spacing -> Decrease

Result: The Forms Designer will move each control horizontally, except the base control (the control that has darker handles) by one unit towards the base control. This will be done every time you click the Decrease Horizontal Spacing button or the Format -> Horizontal Spacing -> Decrease menu item:

The left control is used as reference
	=>
The middle control is used as reference
	=>
The right control is used as reference

Button	Name	Format
	Remove Horizontal Spacing	Horizontal Spacing -> Remove

Result: The Forms Designer will move all controls (horizontally), except for the left control, to the left so that the left border of a control touches the right border of the next control:

The left control is used as reference
	=>

Suppose you have a group of horizontally positioned controls as follows:

The buttons on this form are not professionally aligned with regards to each other. Once again, the Layout toolbar and the Format group of the main menu allow you to specify a better vertical alignment of controls relative to each other. The options available are:

Button	Name	Format
	Make Vertical Spacing Equal	Vertical Spacing -> Make Equal

Result: The Forms Designer will calculate the total vertical distances that separate each combination of two controls and find their average. This average is applied to the vertical distance of each combination of two controls:

The top control is used as reference
	=>

Button	Name	Format
	Increase Vertical Spacing	Vertical Spacing -> Increase

Result: The Forms Designer will move each control vertically, except the base control (the control that has darker handles) by one unit away from the base control. This will be done every time you click the Increase Horizontal Spacing button or the Format -> Horizontal Spacing -> Increase menu item:

The top control is used as reference
	=>
The middle control is used as reference
	=>
The bottom control is used as reference
	=>

Button	Name	Format
	Decrease Vertical Spacing	Vertical Spacing -> Decrease

Result: The Forms Designer will move each control, except the base control (the control that has darker handles) by one unit towards the base control. This will be done every time you click the Decrease Horizontal Spacing button or the Format -> Horizontal Spacing -> Decrease menu item:

The top control is used as reference
	=>
The middle control is used as reference
	=>
The bottom control is used as reference
	=>

Button	Name	Format
	Remove Vertical Spacing	Vertical Spacing -> Remove

Result: The Forms Designer will move all controls vertically, except for the top control, to the top so that the top border of a control touches the bottom border of the next control towards the top:

The top control is used as reference
	=>