Delphi Form Designer 4

Alignment component

Whether or not the snap to grid option is on, alignment is sometimes required after the component is placed. An alignment component is an alignment component that is placed in the center of the form or separated by a certain distance.

There are two ways to align components:

• Use the alignment panel or alignment dialog box.
• Change the align attribute of a component.

Note

You may notice the alignment attribute of some components, which only belongs to the text alignment (center, left, or right) of the component and is irrelevant to the alignment component on the form.

1. Alignment panel and alignment dialog box

It is often necessary to move the component or set the size relative to the form or other components. The alignment panel contains several buttons to help complete this task. The alignment dialog box and the alignment panel perform the same operation in different ways.

To display the alignment panel, select 【View | alignment palette], As shown in:

Tip

The alignment panel saves a lot of work and does not have to spend too much time arranging them, placing components on the form, and using the alignment panel to determine their positions.

Align left EdgesThe button is used for left-aligned arrangement.

Start an empty form and do the following:

(1) place 5 buttons randomly on the form, regardless of whether the buttons are aligned on the left;

(2) drag the boundary rectangle to select them around the button, and select to show that all buttons are selected, as shown in:

(3) select 【View | alignment paletteTo display the alignment panel. If necessary, move the alignment panel so that it does not mask the form.

(4) On the Alignment Line Selection Board, click"Align left Edges"Button. All buttons are arranged on the left, for example:

Now let's look at another alignment option,Space equally, verticallyThe alignment option is used for the Equi-spacing button. The button is still selected. All you have to do is click"Space equally, vertically"Button, the buttons are completely separated by equal distance. As follows:

Note

Space equally, the vertically alignment option sets an equal distance between the first (top component) and the last (bottom component) in the column. Before selecting the space equally and vertically alignment options, ensure that the first and last components are in the desired position. ForSpace equally, horizontallyThe same is true for alignment options.

Center horizontally in windowAndCenter vertically in windowThe alignment option has the same function as its name indication. These options are convenient for placing a single control or control group in the center of the form. As long as the button group is still selected, click center horizontally in window and center vertically in window on the alignment panel. The selected five buttons are placed horizontally and vertically in the center of the form, for example:

Note

Center horizontally in windowAndCenter verically in windowAlignment options can be used to align components in other components, such as buttons on panel. The component is centered horizontally or vertically, regardless of its parent component as panel, Form, and other container components.

Align tops,Align bottomsAndAlign right edgesAlign the options with the previousAlign left EdgesSame. Try the effect on your own.

 

Tip

When any edge alignment option is used, the first component selected is the reference point. For example, if you select button3 in the five buttons above, then use Shift + Click to select other buttons. When you click align left edges, The button3 button remains unchanged. Other buttons are arranged on the left of button3. because button3 is a reference component.

Align horizontal centersAndAlign verticalcentersThis option is used to center a component relative to another component. For example, start a new form and do the following:

(1) Click the additional label on the component panel and selectShapeComponent. Click to place the shape component somewhere in the upper-right corner of the form;

(2) Change the shape attributeStcircle;

(3) change the width and height attributes150;

(4) double-click the brush attribute to change the color attributeClblack, The form is as follows:

(5) place another shape component on the form;

(6) change the shape attribute of the second shape component to stcircle. On the screen, there are two circles of different sizes-the White Circle and the black circle. The form now looks as follows:

(7) Click the black circle, hold down shift, and click the White Circle. Select two circles;

(8) select 【View | alignment palette];

(9) On the alignment panel, clickAlign vertical centersButton to align the vertical center of the two circles. The effect is as follows:

(10) Click againAlign horizontal centersButton to align the horizontal center of the two circles. The tires are made, for example:

Note that the black circle is selected first, and it is not fixed (it isReference component) To move the White Circle when you click the alignment button. When used on a single control, the two alignment options do not work.

Like the component palette, the alignment option also has a shortcut menu. Place the mouse on the alignment panel and right-click the shortcut menu, for example:

• Stay on topMake the alignment panel always on the top. This is often useful when Switching Form Designer and code editor because alignment small windows are easy to lose.
• Show hintsTooltip for opening or closing the alignment panel button.
• HideHide the alignment Panel (you can also use the close button on the alignment panel ). To display it again, select View | alignment palette again.
• HelpHelp information about the alignment panel.

Alignment dialog boxExecute the same action as the alignment panel. To bring up the alignment dialog box 【Edit | align...Or select 【Position | align...]. The dialog box is as follows:

In most cases, the alignment panel is easier to use. If you want to, you can also use the alignment dialog box.

 

2. Use the align attribute

Another type of alignment is to useAlignAttribute, which controls how to align with the parent component.AlignThe possible values of the attribute are as follows:

• AlbottomThe widget is aligned with the lower end of the parent window. The statusbar status line is an example of a component alignment along the bottom of the main form.
• AlclientThe component expansion is filled with the parent window user area. If other components occupy part of the user area, it is filled with other user areas.
• AlleftThe component is aligned to the left of the parent window.
• AlnoneThe component has no special relationship with the parent window. This is the default value for most components.
• AlrightThe component is aligned along the right of the parent window.
• AltopThe component is aligned along the top of the parent window.

Here is an example to illustrate the align attribute. To start an empty form, perform the following steps:

(1) Click the standard label on the component panel, select the Panel component, and place it on the form at will,

(2) set the align attribute of the PanelAltopThe Panel is aligned at the top of the form and is filled with the entire width of the form,

(3) try to move the panel to the center of the form and it will jump back to the top.

(4) try to shorten the panel width and keep the original width.

(5) the height of the Panel can be changed.

(6) change the align attributeAlbottom, And paste the panel to the bottom of the form.

(7) change the align attribute to alright and set it to alleft. The width of the Panel can be changed, and the height of the Panel cannot be changed.

 

(8) change the align attribute to alclient. The expansion of the Panel is full of this customer zone and the size cannot be changed in any direction.

(9) change the align attribute to alnone, and the Panel can be moved and changed.

If you change align to any value different from alnone, You can paste the panel on the edge of the form. In the case of alclient, the Panel is pasted on four sides.

 

Set the tab order

New Term

Tab order refers to the order in which the component receives the input focus when you press the tab key on the keyboard.

You can use the tab key to automatically support component orientation in the Delphi Form.TabMove from component to component, useShift + TabMove backward.

Note

There are two types of visualization components.

The window wed component is a component that receives keyboard focus, which means it can be clicked with the mouse or press tab. When a widget has a keyboard focus, it may display a special cursor (such as an I-type cursor in the editing Control) or a focus rectangle on the widget. The receivwed components include the edit, memo, ListBox, ComboBox, And button components.

The non-receive wed component is a component that does not receive keyboard focus, such as image, SpeedButton, label, shape, and many others are non-receive wed components.

The tab order is used for the customized wed component, and the non-customized wed component is excluded from the tab order.

The tab order is initially based on the arrangement order of components during form design. You can change the tab order by changing the taborder attribute of each control in the object inspector, but this method is troublesome. You need to perform a single operation on each control. The Edit tab order dialog box provides easier methods. For example:

Select 【Edit | tab order...] In the edit tab order dialog box, all window components on the current form are displayed, but non-window components are not displayed. To change the tab order, click the name of the component to be moved in the order list, change the order using the up and down buttons, and click OK to complete the settings, confirm the new settings by browsing the taborder attribute of each control.

Note

The tab order starts from 0. The first component is 0 in the tab order, and the second component is 1.