Tab Position and Arrangement
- 3 minutes to read
This topic covers the methods used to customize tab position, orientation and arrangement. It provides a number of ways to manipulate properties affecting tab layout to obtain the desired look & feel of the tab control. All the examples below are applicable to both the TcxTabControl and TcxPageControl controls.
Let’s consider the TabPosition and Rotate properties of tab controls first. The first one affects the position (and orientation) of the tab panel, while the second controls the orientation of individual tabs within it. Thus tabs can be oriented vertically in the following two cases:
The tab panel is oriented horizontally (it is located at the top or at the bottom of the control) and the Rotate property is set to True;
The tab panel is oriented vertically (it is located to the left or to the right of the control) and the Rotate property is set to False.
You can also control tab caption text direction when a tab is oriented vertically. Use the pcoTopToBottomText option for this purpose. Note that options are set via the Options property.
In the following example, the tab panel is located at the bottom (thus, is oriented horizontally), the Rotate property is set to True (its tabs are oriented vertically) and the pcoTopToBottomText option is enabled (tab captions are written from top to bottom):
with cxPageControl1 do
begin
TabPosition := tpBottom;
Rotate := True;
Options := Options + [pcoTopToBottomText];
end;
Execution of the code listed above will appear as follows:
By default every tab has the minimum width necessary to fit its caption and image. However you can change the width of tabs via the TabWidth property. (In fact, you can also change their height via the TabHeight property). If there are too many tabs and they are too wide to fit into the tab control area, tab navigation buttons are displayed within the navigator bar. Please refer to the Navigator Bar Position and Visibility topic for details.
Tab controls give you the ability to arrange tabs across several rows, so that each is always visible. To do so, you must set the MultiLine property to True for this purpose. Note, that tabs are stretched by default to occupy the entire width of the control. Set the RaggedRight property to True to disable such behavior.
The following sample code changes the width of tabs, arranges them across several lines and disables their stretching along the control’s width.
with cxPageControl1 do
begin
TabWidth := 130;
MultiLine := True;
RaggedRight := True;
end;
The image below displays the appearance of a tab control after code execution:
If tabs don’t appear as buttons, selecting a tab moves its row closest to the page. The previously closest row becomes the furthermost. However you can change this default behavior via the ScrollOpposite property. If it is set to True, selecting a tab moves all rows located between the current row and the page to the opposite side of the control.
The following sample code arranges tabs across several lines and implements the described feature.
with cxPageControl1 do
begin
MultiLine := True;
ScrollOpposite := True;
end;
Execution of the code listed above will appear as follows:
