# Flow Layout Control | WPF Controls | DevExpress Documentation

## Arrange Items

The [FlowLayoutControl](/WPF/DevExpress.Xpf.LayoutControl.FlowLayoutControl) is a container of items that arranges items into either rows or columns according to the [FlowLayoutControl.Orientation](/WPF/DevExpress.Xpf.LayoutControl.FlowLayoutControl.Orientation) property. The flow of items is wrapped at the control’s edge by default: when one column/row ends, another one automatically starts:

![FlowLayoutControl_FlowBreak_Disabled](/WPF/images/flowlayoutcontrol_flowbreak_disabled11646.png)

However, you can disable automatic item wrapping via the [FlowLayoutControl.BreakFlowToFit](/WPF/DevExpress.Xpf.LayoutControl.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](/WPF/DevExpress.Xpf.LayoutControl.FlowLayoutControl.IsFlowBreak) attached property. In the following image, this property is enabled for Item 3 and Item 6:

![FlowLayoutControl_FlowBreak_Enabled](/WPF/images/flowlayoutcontrol_flowbreak_enabled11647.png)

## Stretch Items

Items can be stretched to the width/height of the FlowLayoutControl via the [FlowLayoutControl.StretchContent](/WPF/DevExpress.Xpf.LayoutControl.FlowLayoutControl.StretchContent) property. In this mode, the items are arranged in a single column or row according to the [FlowLayoutControl.Orientation](/WPF/DevExpress.Xpf.LayoutControl.FlowLayoutControl.Orientation) property:

![FlowLayoutControl_Stretch](/WPF/images/flowlayoutcontrol_stretch11648.png)

## 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](/WPF/DevExpress.Xpf.LayoutControl.FlowLayoutControl.AllowItemMoving) property.

At the end of the drag-and-drop operation, **FlowLayoutControl** raises the [ItemPositionChanged](/WPF/DevExpress.Xpf.LayoutControl.FlowLayoutControl.ItemPositionChanged) event.

## Resizing

Resizing columns/rows of items using built-in layer separators is supported. To enable item resizing, set the [FlowLayoutControl.ShowLayerSeparators](/WPF/DevExpress.Xpf.LayoutControl.FlowLayoutControl.ShowLayerSeparators) and [FlowLayoutControl.AllowLayerSizing](/WPF/DevExpress.Xpf.LayoutControl.FlowLayoutControl.AllowLayerSizing) properties to **true**:

![Separators](/WPF/images/separators11649.png)

## Maximize Items

This feature allows one of the control’s items to be maximized so that it occupies most of the control, while other items are arranged in a column or row along the control’s edge. The following image shows a [GroupBox](/WPF/DevExpress.Xpf.LayoutControl.GroupBox) maximized within the FlowLayoutControl:

![GroupBox_Maximized](/WPF/images/groupbox_maximized11650.png)

To maximize a specific item in code, you can assign it to the [FlowLayoutControl.MaximizedElement](/WPF/DevExpress.Xpf.LayoutControl.FlowLayoutControl.MaximizedElement) property.

The position of the maximized item relative to the other items can be customized via the [FlowLayoutControl.MaximizedElementPosition](/WPF/DevExpress.Xpf.LayoutControl.FlowLayoutControl.MaximizedElementPosition) property. You can position the maximized element above, below, to the left or top of the remaining items. If the [FlowLayoutControl.AllowMaximizedElementMoving](/WPF/DevExpress.Xpf.LayoutControl.FlowLayoutControl.AllowMaximizedElementMoving) option is enabled, an end-user can change this position via drag-and-drop.

A [GroupBox](/WPF/DevExpress.Xpf.LayoutControl.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](/WPF/DevExpress.Xpf.LayoutControl.GroupBox.MaximizeElementVisibility) property. This will allow a user to maximize and then restore the GroupBox:

![GroupBox_MaximizeElement](/WPF/images/groupbox_maximizeelement11651.png)

The [FlowLayoutControl](/WPF/DevExpress.Xpf.LayoutControl.FlowLayoutControl) raises the [MaximizedElementChanged](/WPF/DevExpress.Xpf.LayoutControl.FlowLayoutControl.MaximizedElementChanged) event when a user maximizes/minimizes an item.

See Also

[How to: Display items in FlowLayoutControl and enable maximization feature](/WPF/8365/controls-and-libraries/layout-management/tile-and-layout/examples/how-to-display-items-in-flowlayoutcontrol-and-enable-maximization-feature)