Flow Layout Control
- 2 minutes to read
FlowLayoutControl - Arranging items
The FlowLayoutControl is a container of items, that arranges items into either rows or columns, according to the FlowLayoutControl.Orientation property. By default, the flow of items is wrapped at the control’s edge, so when one column/row ends, another one automatically starts:
However, you can disable automatic item wrapping via the FlowLayoutControl.BreakFlowToFit property. In this instance, the items will be arranged in a single column or row.
It’s possible to forcibly wrap the flow of the control’s items at a specific item using the FlowLayoutControl.IsFlowBreak attached property. In the following image, this property is enabled for Item 3 and Item 6:
Stretching items
Items can be stretched to the width/height of the FlowLayoutControl via the FlowLayoutControl.StretchContent property. In this mode, the items are arranged in a single column or row, according to the FlowLayoutControl.Orientation property:
Drag-and-drop
An end-user is able to move items to new position via drag-and-drop. This feature is enabled via the FlowLayoutControl.AllowItemMoving property.
At the end of the drag-and-drop operation, FlowLayoutControl raises the ItemPositionChanged event.
Resizing
Resizing columns/rows of items using built-in layer separators is supported. To enable item resizing, set the FlowLayoutControl.ShowLayerSeparators and FlowLayoutControl.AllowLayerSizing properties to true:
Maximizing items
This feature allows one of the control’s items to be maximized, so that it occupies the major part of the control, while other items are arranged in a column or row along the control’s edge. The following image shows a GroupBox maximized within the FlowLayoutControl:
To maximize a specific item in code, you can assign it to the FlowLayoutControl.MaximizedElement property.
The position of the maximized item relative to the other items can be customized via the FlowLayoutControl.MaximizedElementPosition property. You can position the maximized element above, below, to the left or top of the remaining items. If the FlowLayoutControl.AllowMaximizedElementMoving option is enabled, an end-user can change this position via drag-and-drop.
A GroupBox control automatically supports the maximization feature, when it’s displayed within a FlowLayoutControl. Enable the Maximize Element button for a GroupBox via the GroupBox.MaximizeElementVisibility property. This will allow an end-user to maximize and then restore the GroupBox:
