Tabbed Layout Group
- 3 minutes to read
A tabbed layout group (tabbed group for short) represents a layout group whose immediate child elements are associated with individual tabs, as in a tab control. Clicking a tab displays a corresponding child element within the tabbed group. To programmatically activate a certain tab, use a tabbed group’s ItemIndex property. If any tab is focused in a tabbed group, end-users can switch tabs by pressing Ctrl-Tab or Ctrl-Shift-Tab.
Any group can be switched to a tabbed group and back, via the group’s LayoutDirection property. End-users can accomplish this in customization mode, by selecting a corresponding option within a group’s context menu.
Refer to the How to Create Layout Items and Groups topic for details on how to create layout groups.
Users can easily add, remove and reposition tabs within tabbed groups using drag and drop:
- To add a tab, drop a layout element within a tab panel. This moves the element to a tabbed group, automatically creates a tab and associates it with the element. The tab is assigned the element’s caption.
- To remove a tab, drag it from the tab panel and drop it within the layout control or customization form. End-users can remove a tab in customization mode if the AllowRemove property of all elements associated with this tab is set to True.
- To reposition a tab, drag and drop it at any desired position within a tab panel.
End-users can manage tabs only if a tabbed group’s Locked option is set to False.
In addition to managing tabs, a tabbed group provides the same customization capabilities as a standard group – users can add, remove or rearrange its elements, reposition, resize and nest it within any other group. To learn more, refer to the Arranging Layout Items and Groups and Resizing Layout Items and Groups topics.
In code, a tabbed group is represented by the same class as a standard group – TdxLayoutGroup.
The table below lists the main properties that relate to tabbed layout groups.
Visibility | A group’s Visible property. |
Position | A group’s Index, VisibleIndex, AlignHorz, AlignVert, AlignmentConstraint, and Offsets properties. A parent group’s LayoutDirection and UseIndent properties. |
Appearance | A group’s LayoutLookAndFeel and TabbedOptions properties. A parent group’s LayoutLookAndFeelException property. The layout control’s LayoutLookAndFeel property. Set the layout control’s Transparent property to True to paint tabbed group sheets on a transparent background if a skin, runtime theme, or the native paint style is applied. |
Contents | A group’s ItemIndex, Expanded, ButtonOptions, CaptionOptions.VisibleElements, and ShowBorder properties. |
Behavior | A group’s CaptionOptions.Hint, SizeOptions.SizableHorz, SizeOptions.SizableVert, AllowRemove, Enabled, Hidden, Locked, and TabbedOptions properties. The layout control’s OptionsItem.SizableHorz and OptionsItem.SizableVert properties. |
Size | A group’s SizeOptions.Height, SizeOptions.Width, SizeOptions.MaxHeight, and SizeOptions.MaxWidth properties. |
Context Menu | Refer to the Runtime Customization Context Menus topic. |
HitTest Information | For tabbed layout groups, the layout control’s GetHitTest function returns a TdxLayoutTabbedGroupHitTest object. |