Layout Groups
- 5 minutes to read
Overview
A Layout Group (a LayoutGroup object) is a container that typically arranges its items (dock items or layout items) either horizontally or vertically. However, when combining layout items, a LayoutGroup also supports displaying items using the tabbed interface.
Note
Do not combine dock and layout items within a single group.
Do not combine groups containing dock items with groups containing layout items. If you need to arrange layout items next to dock items, add the layout items into a dock panel (a LayoutPanel object).
Do not use dock items outside the DockLayoutManager control.
When an end-user drags-and-drops items next to other items at runtime, layout groups are automatically created (if required) to keep this arrangement. If you want to create a layout of items in code or XAML, you need to create layout groups manually. At a minimum, create a root group - the bottommost container for all items.
The following image shows Layout Groups containing dock items (dock panels, tabbed groups and document groups):
The next image shows Layout Groups combining layout items (layout control items and other Layout Groups):
Each layout contains, at a minimum, a root group, represented by a LayoutGroup object. The root group is the bottommost area to which layout or dock items are added. The root group can own other groups, which can contain other layout, or dock items, or layout groups.
The orientation of items within a group is specified by the LayoutGroup.Orientation property. You can choose between horizontal or vertical orientation.
In XAML, you can add items to a layout group by defining the corresponding dock objects between the start and end LayoutGroup tags. In code, you can add items to a LayoutGroup via its LayoutGroup.Items property.
Child Items
Depending on whether you create a docking UI or layout UI, a Layout Group accepts different types of objects.
Docking UI
To create a docking UI, you need to add dock objects to the Dock Layout Manager’s root group. The root group must be created manually. In XAML, you need to define a LayoutGroup element between the start and end DockLayoutManager tags. In code, you can initialize and then access the root group via the DockLayoutManager.LayoutRoot property.
The following dock objects, provided by the DXDocking Suite, can be children of a LayoutGroup object:
- Layout (Dock) Panel - Represents regular dock panels.
- Tabbed Group - Represents dock panels as a tab container.
- Document Groups and Panels - Allows you to create the tabbed or MDI UI.
- other Layout Groups.
Layout UI
There are two scenarios for creating layout UIs. You can, (1) define the layout of your controls directly within the Dock Layout Manager container (without the docking interface) or, (2) build layouts of controls within Layout (Dock) Panels.
Building a layout UI within the Dock Layout Manager is the same as building the docking UI. You define the Dock Layout Manager’s root group (the DockLayoutManager.LayoutRoot property) and then add layout items and/or other groups to the root group.
To build a layout within a Layout (Dock) Panel, you first create a Layout Group that will represent the panel’s content. This group will be the root for the layout UI. Then, you build a layout of controls within this group, by adding layout items and/or other layout groups.
The following layout items are used to create a layout UI:
- Layout Control Item - Represents a wrapper for your control, displaying a label next to it. If you want to add a control to the layout, add this control using the Layout Control Item wrapper.
- other Layout Groups
Visual Appearance
A Layout Group can be displayed with or without borders. When creating a docking UI, Layout Groups are typically used without borders. When creating a layout of controls, Layout Groups are used with or without borders. When borders are enabled, you can also display captions for the groups.
A Layout Group’s LayoutGroup.GroupBorderStyle property specifies how the group’s borders and captions (if enabled) are rendered.
The GroupBorderStyle.Group style:
The GroupBorderStyle.GroupBox style:
The GroupBorderStyle.Tabbed style:
Note that in the GroupBox style, an expand button is visible. This button allows an end-user to collapse and then restore the group.
Dock and Layout Operations
In code, dock and layout operations can be performed via the methods provided by the DockLayoutManager.DockController and DockLayoutManager.LayoutController objects, respectively.
To combine dock panels into a Layout Group in code, use the DockController.Dock method overload with the DockType parameter. This parameter must be set to DockType.Left, DockType.Right, DockType.Top or DockType.Bottom. Dock operations on panels are prohibited if the BaseLayoutItem.AllowDock option is disabled. The DockLayoutManager class provides a set of events (which have the DockItem… prefix) allowing you to dynamically control operations on dock objects.
Layout items can be moved in code via the LayoutController.Move method. When an item is moved next to another item, a Layout Group is automatically created (if required) to keep the desired arrangement. Moving items is prohibited if the BaseLayoutItem.AllowMove option is disabled. There are specific events in the DockLayoutManager class, which have the LayoutItem… prefix, that allow you to control the operations of the layout.