FlowLayoutPanel

Microsoft .NET Framework, ASP.NET, Visual C# (CSharp, C Sharp, C-Sharp) Developer Training, Visual Studio

Exam Prep. Guides

70-505 Study Guide 70-526 Study Guide

1. Forms Controls Add/configure a Form Manage control layout Group/Arrange Controls Panel GroupBox TabControl FlowLayoutPanel TableLayoutPanel SplitContainer Add/configure a control Create/configure menus Create event handlers 2. Integrating Data 3. Printing/Reporting 4. Enhancing Usability 5. Asynchronous Prog. 6. Forms Controls 7. Configure/Deploy

edit

Exam 70-526 Preparation Guide: Group and arrange controls by using the FlowLayoutPanel control.

Contents 1 Inheritance hierarchy 2 Useful properties 3 Useful methods 4 Docking a FlowLayoutPanel in a Form 5 Wrapping the contents using WrapContents 6 Wrapping the contents manually 7 Breaking the flow 8 Margins and Padding 9 Manually adding a control to a FlowLayoutPanel 10 MSDN references

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.

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

Wrapping 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 laid 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.

Wrapping 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 = TRUE;

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.

Manually adding a control to a FlowLayoutPanel

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);
}

MSDN references

• FlowLayoutPanel control

• How to: Anchor and Dock Child Controls in a FlowLayoutPanel Control

• Walkthrough: Arranging Controls on Windows Forms Using a FlowLayoutPanel