Navigator Bar Position and Visibility
- 3 minutes to read
This topic describes the ways in which the position and visibility of the navigator bar and the visibility of its constituent elements can be specified. All the examples listed below are applicable to both the TcxTabControl and TcxPageControl controls.
First, it must be noted, that the navigator bar is displayed within the tab panel. Thus, if the tab panel is invisible the navigator bar is also invisible. So, if the HideTabs property is set to True, both elements will be hidden.
The second point is that the navigator bar is only visible when tabs are arranged into a single row (i.e. the MultiLine property is set to False).
The tab navigation buttons such as the Go Dialog and arrow buttons are visible only when at least one of its tabs is invisible. That is, the total width of the tabs exceeds the width of the tab panel. If the tab panel is oriented horizontally, its width is equal to the control’s width. Otherwise, it’s the same as the control’s height. The width of tabs is controlled by the TabWidth property. Please refer to the Tabs Position and Arrangement topic for details.
The following sample code changes the width of tabs and assures that tabs are arranged across a single line.
with cxPageControl1 do
begin
TabWidth := Width div 2;
MultiLine := False;
end;
Execution of the code listed above will appear as follows:
As you can see, the Go Dialog and Close Button are not displayed within the navigator bar by default. You should enable the pcoGoDialog and pcoCloseButton options in order to make these buttons visible. The visibility of arrow buttons is controlled via the pcoNoArrows option. Options are set by means of the Options property.
The following code hides arrow buttons and makes the Go Dialog visible.
cxPageControl1.Options := Options + [pcoGoDialog, pcoNoArrows];
The image below displays changes in the navigator bar’s look & feel after code execution:
Let’s now describe how you can control navigator bar position within the tab panel. This is controlled via the NavigatorPosition property. Values available for this property setting specify positions in two dimensions. If the property is set to npLeftBottom (means left or bottom), the navigator bar will be displayed in the left portion of a horizontally oriented tab panel and in the bottom portion of a vertically oriented tab panel. The position and orientation of the tab panel is controlled by the TabPosition property.
with cxPageControl1 do
begin
TabPosition := tpRight;
NavigatorPosition := npLeftBottom;
end;
Execution of the code listed above will appear as follows:
