[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Collapse]Layout Management
   [Expand]Dock Windows
   [Collapse]Tile and Layout
    [Expand]Layout and Data Layout Controls
     Tile Layout Control
     Dock Layout Control
     Flow Layout Control
    [Expand]Common Features
    [Expand]Examples
   [Expand]Tab Control
   [Expand]Carousel
    Book Control
    Workspace Manager
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Flow Layout Control

Expanded 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:

Expanded 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:

Expanded 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.

Expanded 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:

Expanded 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:

Expanded See Also

Is this topic helpful?​​​​​​​