70-526 MCTS

FlowLayoutPanel control

The FlowLayoutPanel control is a container control where child controls are added, then dynamically repositioned to flow in a particular direction. The FlowLayoutPanel automatically positions all child controls in the direction indicated by the value of the FlowDirection property.

You can leave the WrapContents property set to the default value of True to force the controls to stay within the boundaries of the SplitContainer class by starting a new row or column, depending on the value of the FlowDirection property.

Inheritance hierarchy

 System.Object 
   System.MarshalByRefObject 
     System.ComponentModel.Component 
       System.Windows.Forms.Control 
         System.Windows.Forms.ScrollableControl 
           System.Windows.Forms.Panel
             System.Windows.Forms.FlowLayoutPanel

Useful properties

AutoScroll - This property when set to true, allows scroll bars to be displayed.

BackColor - The background colour of the panel is defaulted to System.Drawing.SystemColors.Control, but this can be set to any colour you like.

BackgroundImage - Instead of a single colour, an image can be displayed as the background.

BorderStyle - This property determines if the panel is outlined with no visible border (None), a plain line (FixedSingle), or a shadowed line (Fixed3D).

Controls - Gets the collection of controls contained within the control.

Enabled - if this property is set to false, the controls contained within the Panel will also be disabled.

FlowDirection - Gets or sets a value indicating the flow direction of the FlowLayoutPanel control. This property takes a value from the FlowDirection enumeration, the default value is LeftToRight:

BottomUp - Elements flow from the bottom of the design surface to the top.
LeftToRight - Elements flow from the left edge of the design surface to the right.
RightToLeft - Elements flow from the right edge of the design surface to the left.
TopDown - Elements flow from the top of the design surface to the bottom.

TabIndex - Gets or sets the tab order of the control within its container. (inherited from Control)

TabStop - Gets or sets a value indicating whether the user can give the focus to this control using the TAB key.

WrapContents - Gets or sets a value indicating whether the FlowLayoutPanel control should wrap its contents or let the contents be clipped.

Useful methods

GetFlowBreak - Returns a value that represents the flow-break setting of the FlowLayoutPanel control.

SetFlowBreak - Sets the value that represents the flow-break setting of the FlowLayoutPanel control.

Docking a `FlowLayoutPanel` in a `Form`

A FlowLayoutPanel can be docked into the parent container, by selecting the FlowLayoutPanel and clicking on the Smart Tag icon . This causes a small menu to appear, simply click on Dock in parent container.

To undock the FlowLayoutPanel, click on the Smart Tag icon and select Undock in parent container.

Wraping the contents using `WrapContents`

If this property is set to true, the layout control wraps the controls once they extend beyond the boundary specified by the FlowDirection property to the next row or column. For example, if controls are being layed out from left to right (FlowDirection = LeftToRight) without WrapContents being set to true, then the controls will be added to the first row. Items that extend beyond the boundary of the FlowLayoutPanel will be clipped.

When WrapContents is set to true, clipped controls are moved to the next row.

Wraping the contents manually

The above example changes the WrapContents property at runtime. To do this simply set the value of the property to the desired value.

this.flowLayoutPanel1.WrapContents = this.checkBox1.Checked;

Breaking the flow

When WrapContents is set to true you can force a control onto a new row or column, even if there is sufficient space remaining. This is done through the FlowBreak property which is added to each of the contained controls within a FlowLayoutPanel.

If a control has its FlowBreak property set to true, then the next control will start on a new row or column. This can be done via the IDE or manually through code.

flowLayoutPanel1.SetFlowBreak(button2, true);

In the previous code, the next control after button2 will wrap.

Margins and Padding

The Padding property allows you to control the placement of controls within a FlowLayoutPanel. It specifies the spacing between the child controls and the border of the FlowLayoutPanel.

The Margin property of the controls contained within the FlowLayoutPanel specifies how much space is between each control.

Note

Margin settings are cumulative. The sum of the space between two buttons is button1.Margin.Right plus button2.Margin.Left.

Adding a control to a `FlowLayoutPanel` manually

Adding a control to a FlowLayoutPanel is done in following manner:

public void CreateMyFlowLayoutPanel()
{
  FlowLayoutPanel flpPanel = new FlowLayoutPanel();
  TextBox textBox1 = new TextBox();
  Label label1 = new Label();

  // Initialize the FlowLayoutPanel control.
  flpPanel.Location = new Point(20,50);
  flpPanel.Size = new Size(264, 150);
  // Set the Borderstyle for the FlowLayoutPanel to three-dimensional.
  flpPanel.BorderStyle = System.Windows.Forms.BorderStyle.Fixed3D;

  // Initialize the Label and TextBox controls.
  label1.Text = "label1";
  label1.Size = new Size(50, 20);
  textBox1.Text = "";
  textBox1.Size = new Size(150, 20);

  // Add the Panel control to the form.
  this.Controls.Add(flpPanel);
  // Add the Label and TextBox controls to the Panel.
  flpPanel.Controls.Add(label1);
  flpPanel.Controls.Add(textBox1);
}