[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [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
  [Collapse]Application UI Manager
    [Collapse]Widget View
      Stack Layout Mode
      Table Layout Mode
      Flow Layout Mode
      Free Layout Mode
    [Expand]WindowsUI View
     Tabbed View
     Native MDI View
     Document Selector
     Non-Document Mode
   [Expand]Deferred Load
   [Expand]Interaction with Dock Panels
   [Expand]Bar and Ribbon Merging
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst 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]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Flow Layout Mode

In Flow Layout Mode, widgets are not held in any kind of containers like stack groups in Stack Layout Mode or columns and rows in Table Layout Mode. Instead, each successive widget follows the previous widget, forming a column or row according to the selected direction. The figure below illustrates a WidgetView with the Flow Layout Mode applied.

To apply this mode, set the WidgetView.LayoutMode to FlowLayout. All settings for this layout mode are stored in the WidgetView.FlowLayoutProperties section that provides access to the following properties.

  • FlowLayoutProperties.FlowDirection - allows you to choose one of four possible directions (RightToLeft, LeftToRight, BottomUp, TopDown), based on which the View will arrange its widgets.
  • FlowLayoutProperties.FlowLayoutItems - stores all widgets displayed within this mode. This collection differs from the BaseView.Documents collection that keeps all documents owned by this View. The FlowLayoutItems collection stores only those documents that are currently displayed within this flow layout mode View. Secondly, all documents within this collection are stored in the same order as they appear at runtime. Re-arranging widgets will modify their order within the FlowLayoutItems collection.
  • FlowLayoutProperties.ItemDragMode - allows you to choose between Move and Swap drag modes. In Move mode, the document being dragged can be placed before or after any widget, causing the previous widgets to slide one step forward or back respectively. In Swap mode, the dragged widget can be dropped upon another widget to make these widgets swap their positions.
  • FlowLayoutProperties.WrapContent - gets or sets whether the View content should be wrapped. Widgets follow each other in a specific direction until they reach the View's border. If content wrapping is enabled, the next widget will start a new column or row. Otherwise, if the WrapContent property equals false, widgets will continue following each other even if this means some of them are placed outside the View's borders (and as a result, outside of the end-user's sight).

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