Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Collapse]Form Layout Managers
    Side Panel
   [Collapse]Layout Manager
    [Expand]Product Information
    [Expand]Getting Started
    [Expand]Layout Control
    [Expand]Data Layout Control
    [Expand]Layout Item
    [Expand]Layout Groups
    [Expand]Tabbed Group
    [Expand]Other Layout Elements
    [Expand]Customization Capabilities
    [Expand]Size and Alignment
     Flow Layout
     Table Layout
     Focus Management
    [Expand]Appearance and Look and Feel
    [Expand]Miscellaneous
    [Expand]Examples
    [Expand]Member Tables
   [Expand]Tabbed MDI Manager
    Tab Control
   [Expand]Wizard Control
    Workspace Manager
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report 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

For groups nested within the root group, you can enable flow layout mode, in which layout items are arranged back-to-back, automatically wrapping at the group's right edge.

Expanded Flow Layout Features

In flow layout mode, layout items are arranged back-to-back in rows, and are automatically wrapped at the group's right edge. So, when the group width is changed, item positions within the flow layout are updated, as shown in the following animation.

You can force any item to start a new row by setting its BaseLayoutItem.StartNewLine property to true.

To change the default left-to-right item layout, modify the LayoutGroup.FlowDirection setting.

Expanded Enabling Flow Layout Mode

Flow layout mode can be enabled for groups nested within the root group (LayoutControl.Root) using the LayoutGroup.LayoutMode property. This mode cannot be enabled for the root group itself.

At design time, you can enable flow layout mode from the Customization Menu. Right-click a layout group and select the Convert To -> Flow Layout action.

Note

Flow layout cannot be enabled for a layout group if it contains nested groups.

Expanded Flow Layout Customization

A flow layout is fully customizable at design time and runtime using drag and drop functionality, resizing operations and additional customization commands available from the context menu. Item size constraints may restrict sizing operations. To learn more, see Default Size Constraints and Custom Size Constraints.

The drag and drop functionality allows you to add new items to the layout group and rearrange existing items.

Expanded Flow and Regular Mode Comparison

Characteristic Flow Layout Mode Regular Layout Mode
Item Arrangement Layout items are arranged in rows. 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 when LayoutControl is Resized Layout items are not resized, but the flow of items automatically wraps at the parent group's right edge. Layout items are automatically resized according to their size constraints.
Nested Groups Not supported. Supported.

Expanded See Also

How would you rate this topic?​​​​​​​