Open topic with navigation

Description

The standard tab control is analogous to a set of dividers in a notebook and allows you to define a set of pages that occupy the same area of a window or dialog box. Each page consists of a set of information or a group of controls that the application displays when the user selects the corresponding tab.

A special type of tab control displays tabs that look like buttons. For example, the Windows taskbar is such a tab control.

The overall appearance of the TabControl is determined by the Style property which may be 'Tabs' (the default), 'Buttons' or 'FlatButtons'.

Individual tabs or buttons are represented by TabButton objects which should be created as children of the TabControl object. Optional captions and pictures are specified by the Caption and ImageIndex properties of the individual TabButton objects themselves. Otherwise, the appearance of the tabs or buttons is determined by properties of the TabControl itself.

To implement a multiple page tabbed dialog (see Example 1), you should create a Form, then a TabControl with Style 'Tabs' as a child of the Form. Next, create one or more pairs of TabButton and SubForm objects as children of the TabControl. You associate each SubForm with a particular tab by setting its TabObj property to the name of, or ref to, the associated TabButton object. Making the SubForms children of the TabControl ensures that, by default, they will automatically be resized correctly. You may alternatively create your SubForms as children of the main Form and establish appropriate resize behaviour using their Attach property.

A TabControl object with Style 'Buttons' (Example 2) or 'FlatButtons' (Example 3) may be used in a similar way (i.e. to display a set of alternative pages), although buttons in this type of TabControl are more normally used to execute commands. For this reason, these styles of TabControl are without borders.

If Style is 'FlatButtons', the FlatSeparators property specifies whether or not separators are drawn between the buttons. The default value of FlatSeparators is 0 (no separators).

Example 3a shows the effect of setting FlatSeparators to 1.

The Align property specifies along which of the 4 edges of the TabControl the tabs or buttons are arranged. Align also controls the relative positioning of the picture and Caption within each TabButton. Align may be Top (the default), Bottom, Left or Right.

If Align is 'Top' or 'Bottom' (Example 4), the tabs or buttons are arranged along the top or bottom edge of the TabControl and picture is drawn to the left of the Caption.

If Align is 'Left' (Example 5), the tabs or buttons are arranged top-to-bottom along the left edge of the TabControl, and the pictures are drawn below the Captions.

In recent versions of Windows, 'Align' 'Right' fails to show the tabs or buttons on the right hand edge of the TabControl; this appears to be a limitation of Windows.

The Attach property specifies how the TabControl responds when its parent is resized. Its default value, which is independent of the Align property, is 'None' 'None' 'None' 'None'. This causes the TabControl to maintain its original proportions when its parent is resized.

The MultiLine property determines whether or not your tabs or buttons will be arranged in multiple flights or multiple rows/columns.

The default value of MultiLine is 0, in which case, if you have more tabs or buttons than will fit in the space provided, the TabControl displays an UpDown control to permit the user to scroll them. See Example 7.

If MultiLine is set to 1, the tabs are displayed in multiple flights (Example 8) or the buttons are displayed in multiple rows (Example 9).

The ScrollOpposite property specifies that unneeded tabs scroll to the opposite side of a TabControl, when a tab is selected. Setting ScrollOpposite to 1 forces MultiLine to 1 also.

Example 10 illustrates a TabControl with ScrollOpposite set to 1, after the user has clicked Third Tab. Notice that, in this example, the SubForms have been created as children of the TabControl. This is necessary to ensure that they are managed correctly in this case.

If MultiLine is 1, the way that multiple flights of tabs or rows/columns of buttons are displayed is further defined by the Justify property which may be 'Right' (the default) or 'None'.

If Justify is 'Right'(which is the default), the TabControl increases the width of each tab, if necessary, so that each row of tabs fills the entire width of the tab control. Otherwise, if Justify is empty or 'None', the rows are ragged.

See Example 11 (for tabs) and Example 12 (for buttons).

By default, the size of the tabs may vary from one to another. Fixed size tabs may be obtained by setting the TabSize property.

To obtain fixed sized tabs with MultiLine set to 1, you must however also set Justify to 'None'.

If fixed size tabs are in effect, the positions at which the picture and Caption are drawn within each TabButton is controlled by the TabJustify property which may be 'Centre', 'Edge', or 'IconEdge'.

Example 13 illustrates these different settings.

The font used to draw the captions in the TabButton objects is determined by the FontObj property of the TabControl.

You cannot specify the foreground or background colours of the tabs/buttons, nor can you use different fonts in different tabs/buttons. The orientation of the Caption text is always determined by the value of the Align property of the TabControl.

The TabObj property is read-only and reports the name of, or ref to, the TabButton that is currently selected.

The MultiSelect property specifies whether or not the user can select more than one button in a TabControl at the same time, by holding down the Ctrl key when clicking. The default is 0 (only one button may be selected). MultiSelect is ignored if Style is 'Tabs'.

The TabFocus property specifies the focus behaviour for the TabControl object and may be 'Normal' (the default), 'Never' or 'ButtonDown'.

The HotTrack property specifies whether or not the tabs or buttons are automatically highlighted by the mouse pointer. The default is 0 (no highlighting).