LayoutGroup.LayoutMode Property
Gets or sets the layout mode for a LayoutGroup.
Namespace: DevExpress.XtraLayout
Assembly: DevExpress.XtraLayout.v24.2.dll
Declaration
[DefaultValue(LayoutMode.Regular)]
[DXCategory("Behavior")]
[XtraSerializableProperty]
public virtual LayoutMode LayoutMode { get; set; }Property Value
| Type | Default | Description |
|---|---|---|
| LayoutMode | Regular | A LayoutMode enumerator value that specifies the layout mode for the LayoutGroup. |
Available values:
| Name | Description |
|---|---|
| Regular | Regular layout mode. Layout items can stretch within the parent layout group and can have any size |
| Flow | Flow layout mode. Layout items are automatically arranged in rows according to their order in the LayoutGroup.Items collection, and are automatically wrapped at the group’s right edge |
| Table | Table layout mode. Layout items are arranged in a two-dimensional table according to their row and column indexes and span values. |
Remarks
A layout group supports regular, flow and table layout modes, which define how layout child items are arranged and sized within a group. In regular layout mode, layout items tend to stretch within the parent layout group and can have any size. In flow layout mode, layout items are not stretched; they are automatically arranged in rows according to their order in the LayoutGroup.Items collection, and are automatically wrapped at the group’s right edge. In table layout mode, layout items are arranged in a two-dimensional table based on their row and column indexes and span values.
The LayoutMode property allows you to enable the appropriate layout mode for the LayoutGroup. You can also change the mode at design time by right-clicking the layout group and selecting the Convert To and then Regular/Flow/Table Layout in the invoked context menu.
Flow Layout
The following video demonstrates the differences in item behavior between flow and regular layout modes when a LayoutControl is resized .
The table below shows the main differences between flow and regular layout modes.
| Characteristic | Flow Layout Mode | Regular Layout Mode |
|---|---|---|
| Item Arrangement | Layout items are automatically arranged in rows, and snapped to the sizing grid. The item flow automatically wraps at the group’s right edge. | Layout items are stretched within the parent layout group. Empty Space Items can be helpful in preventing item stretching. |
| Item Resizing in Customization Mode | Resizing of layout items is constrained to the cell size increment. | Items can have any size, limited only by their size constraints. |
| Automatic Item Resizing when LayoutControl is Resized | Layout items are not resized, but the flow of items automatically wraps at a group’s right edge. | Layout items are automatically resized according to their size constraints. |
| Item Text Alignment | The text of an item is right-aligned if the text appears at the top or bottom of the item. | The text of an item is left-aligned if the text appears at the top or bottom of the item. |
| Nested Groups | Not supported. | Supported. |
To learn more about the flow layout, refer to the Flow Layout document.
Table Layout
A table layout is a two-dimensional grid that consists of cells formed by a set of rows and columns. The size of rows and columns can be specified in absolute or relative values. If the auto-size feature is enabled, the size of rows and columns is automatically calculated to fit their contents. Each layout item is positioned within a table cell according to its column and row indexes. Layout items can also occupy two or more cells simultaneously.
The following image demonstrates the table layout that consists of five items arranged in three columns and three rows.
For more information on the table layout, see the Table Layout topic.