Uploaded to WindowsClient.net by  admin on 05-09-2007

Flowlayout panel is a panel which lays out its child controls in a flowing manner. It is a simple control. It arranges items as a linear collection, supporting wrapping. It works well for menuing and list like scenarios and also supports textwrapping and some interesting alignment options.

FlowLayoutPanel has a much smaller range of uses than TableLayoutPanel. Some scenarios in which it's interesting to consider FlowLayoutPanel include:

Placing controls one after another without overlapping – lists of links, such as explorer bars.

Multi Column UI Portal – an application such as money with lots of little panels of information that reflow/wrap when the window is resized.

ToolStrip layout – ToolStrips support flow layout by a property called LayoutStyle.  By switching the LayoutStyle to Flow and casting the LayoutSettings property to FlowLayoutSettings, a ToolStrip can behave much like a FlowLayoutPanel.

Toolbar-esque windows that can float and take on different orientations: if the contents of the FLP are properly laid out (e.g. integral heights/widths of one another), you can get a fair amount of rearrangement for free if the window switches between a set of fixed sizes.


Adding Controls

You simply add to the controls collection, but unlike the TLP, you can’t specify row and column – the controls are laid out in natural order from the collection. To move the controls, alter the position within the collection for that control.

Positioning Controls

Currently, the implementation of Anchoring and Docking with FLP, as illustrated in the picture below, is that a control is "box stretched" only as far as the extent of the longest/tallest control in the FLP.

Dock and Anchor – control how an individual control lines up with the other controls in the row.  Diagram below.



How can I get the items in a flow layout panel to flow TopDown and stretch from edge to edge?

The sample essentially sizes an item to hold the width to a certain size.


private void fLP1_Layout(object sender, LayoutEventArgs e) { 
   fLP1.Controls[0].Dock = DockStyle.None; 
   for (int i = 1; i < fLP1.Controls.Count; i++) { 
    fLP1.Controls[i].Dock = DockStyle.Top; 
   fLP1.Controls[0].Width =  
fLP1.DisplayRectangle.Width fLP1.Controls[0].Margin.Horizontal; 
  // Where the flow layout is set up as 
   this.fLP1.FlowDirection = System.Windows.Forms.FlowDirection.TopDown; 
   this.fLP1.Size = new System.Drawing.Size(175180); 
   this.fLP1.Layout += new System.Windows.Forms.LayoutEventHandler(this.fLP1_Layout); 



You can set FlowBreak on the control which is the last of that row/column. The following control should appear in the next column/row.


The following is a brief discussion of properties pertinent to the FLP.