September 18, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Changing Layout Dynamically in Windows Forms

  • April 16, 2007
  • By Bipin Joshi
  • Send Email »
  • More Articles »

Flow layout panel control

In some applications, you need to add controls dynamically to the form depending on some condition. In such cases, you need to place the newly added control at an appropriate location via code. However, this means that you need to carefully calculate their left and top coordinates depending on surrounding controls. This can get tricky and tedious at times. To make the problem clear, develop a form that adds a few buttons dynamically to a GroupBox control. Add a new form to the project and drag and drop a GroupBox control to it. The GroupBox control is a container control and can house other controls inside it. Now, add the following code in the Load event of the form.

private void FlowLayoutDemo_Load(object sender, EventArgs e)
{
   for (int i = 0; i < 5; i++)
   {
      Button b = new Button();
      b.Text = "Button " + i.ToString();
      groupBox1.Controls.Add(b);
   }
}

The code above runs a for loop. With each iteration, a new Button is created and added to the Controls collection of the GroupBox. If you run this form, you will see something like this:

As you can see, all the dynamically added buttons assume the same left and top coordinates and as a result overlap each other. To arrange all of them, you need to write code. The FlowLayoutPanel control makes your job easy. See how.

Drag and drop a FlowLayoutPanel control on the same form and add the following code to the Load event of the form.

private void FlowLayoutDemo_Load(object sender, EventArgs e)
{
   for (int i = 0; i < 5; i++)
   {
      Button b = new Button();
      b.Text = "Button " + i.ToString();
      groupBox1.Controls.Add(b);
   }

   for (int i = 0; i < 5; i++)
   {
      Button b = new Button();
      b.Text = "Button " + i.ToString();
      flowLayoutPanel1.Controls.Add(b);
   }

}

The code adds another for loop. This time, the new for loop adds buttons to FlowLayoutPanel control. If you run the form, you will observe that buttons added to FlowLayoutPanel automatically get arranged one after the other (see below).

The FlowLayoutPanel control has a property called FlowDirection that governs the direction in which the child controls are arranged. The FlowDirection property has four possible values: LeftToRight, TopDown, RightToLeft, and BottomUp. The WrapContents boolean property governs whether the contents of FlowLayoutPanel will be wrapped or clipped depending on the FlowLayoutPanel width.

TableLayoutPanel control

The FlowLayoutPanel control arranges child controls in a flow; in other words, one beside other. At times, however, you need the ability to place controls in a tabular fashion. That is where the TableLayoutPanel control comes into the picture. The TableLayoutPanel control consists of rows and columns. You can place a control in a specific row and column. To see how TableLayoutPanel works, add a new form to the project. Drag and drop two TableLayoutPanel controls on the form. Set the AutoSize property of the form and both the TableLayoutPanel controls to true. Set the GrowStyle property of the first TableLayoutPanel control to AddRows and that of the second TableLayoutPanel control to AddColumns. The GrowStyle property should happen when new controls are added to the TableLayoutPanel and no cells are available to accommodate them. The value of AddRows indicates that the TableLayoutPanel control will add a new row to accommodate additional controls whereas the value of AddColumns indicates that the TableLayoutPanel control will add extra columns to accommodate new controls. Now, add the following code in the Load event of the form.

private void TableLayoutPanelDemo_Load(object sender, EventArgs e)
{
   for (int i = 0; i < 5; i++)
   {
      Button b = new Button();
      b.Text = "Button " + i.ToString();
      TableLayoutPanelCellPosition pos =
         new TableLayoutPanelCellPosition(0, i);
      tableLayoutPanel1.SetCellPosition(b, pos);
      tableLayoutPanel1.Controls.Add(b);
   }
   for (int i = 0; i < 5; i++)
   {
      Button b = new Button();
      b.Text = "Button " + i.ToString();
      tableLayoutPanel2.Controls.Add(b);
   }
}

The code consists of two for loops. The first for loop creates some Button controls on the fly and adds them to the first TableLayoutPanel. The buttons are added to a specific row and column. This is done using TableLayoutPanelCellPosition class and SetCellPosition() method. The TableLayoutPanelCellPosition class represents the position inside a TableLayoutPanel in terms of row and column. The code sets column as 0 and row as i. The SetCellPosition() method of TableLayoutPanel control sets the cell position for buttons. Finally, dynamically created buttons are added to the Controls collection of TableLayoutPanel control.

The second for loop does a similar job as the first one except that it doesn't set any cell positions as such. The following figure shows a sample run of the form.

You also can set the row span and column span of individual child controls by using the SetRowSpan() and SetColumnSpan() methods of the TableLayoutPanel control.

Summary

Changing your form layout at runtime is required in several cases. The .NET Framework 2.0 provides several approaches to tackling the problem of dynamic form layout. In this article, you were introduced to approaches such as Auto sizing, anchoring, and docking. You also learned about two handy controls—namely FlowLayoutPanel and TableLayoutPanel—that allow you to easily add controls to your form on the fly. The FlowLayoutPanel arranges the controls in a flow; in other words, one beside other whereas the TableLayoutPanel control arranges them in a tabular fashion. Together, these approaches allow you to develop forms that are resolution independent and dynamic.

Download the Code

You can download the code that accompanies this article here.

About the Author

Bipin Joshi is the founder and owner of BinaryIntellect Consulting, www.binaryintellect.com, where he conducts professional training programs on .NET technologies. He is the author of the Developer's Guide to ASP.NET 2.0 and co-author of three WROX press books on .NET 1.x. He writes regularly for www.dotnetbips.com and www.binaryintellect.net, the community Web sites he founded. He also writes about life and Yoga at www.bipinjoshi.com and www.binaryintellect.info. He is a Microsoft MVP, member of ASPInsiders, MCAD, and MCT. When away from computers, he spends time in practicing, studying, and teaching Yoga.





Page 3 of 3



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel