1. Computing

Using TableLayoutPanel and FlowLayoutPanel in VB.NET Windows Programming

Placing components on forms so they look good is easier than ever!

By

Updated July 14, 2011

An About Visual Basic reader recently wrote to ask about how to program a form where the components would 'autosize' - that is, change their relative position so the form still looked good when the form itself was resized. In the past (VB 6 and even the first version of VB.NET), you would have had to buy a third party component to do this trick. (Or do some fairly heavy duty component programming on your own to accomplish essentially the same thing.) But starting with VB.NET 2005, two new components - TableLayoutPanel and FlowLayoutPanel - have been added to the Toolkit that make the job easy.

This isn't covered in most of the VB.NET books. I checked Murach's "VB 2008" and even Evangelos Petroutsos' massive "Mastering Visual Basic 2008". There wasn't a word in either of them about it. So online articles ... like this one ... are your best bet for understanding how to write the code. These two controls are a new concept for many programmers because they actually interact with child controls and the parent control to do their magic rather than working on their own. You can end up just getting confused without understanding what is supposed to happen.

Both of these controls add capability that is very similar to the way web forms work. So you can start creating Windows forms using at least some of the same design ideas that you would use for web forms. And, like web forms, the most simple way to do it is to simply stack things one after another until the containing form is filled, a process called 'flow layout'. So, to begin with, let's look at the FlowLayoutPanel control.

FlowLayoutPanel

The first thing that the reader wanted to accomplish was to have the controls automatically rearrange themselves on the form when the form is resized. With both controls you can accomplish this by using the Anchor property to anchor the FlowLayoutPanel control to all four sides of the parent control. The exact result depends on the controls that are used as child controls in the panel. With Label controls, you get this result.

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

You might use this control to display graphics of different sizes such as a series of thumbnails.

There aren't nearly as many variations in the way this control can be used. You can choose to clip or wrap the controls; and you can arrange them in different ways. You can even do this dynamically at run time:

FlowLayoutPanel.FlowDirection = FlowDirection.BottomUp

Things get a lot more complicated when controls are placed in the cells of a table instead.

TableLayoutPanel

The initial requirement of the reader was for components to move proportionately within the form when the form itself was resized. To make this happen, we use the same trick of setting Anchor property to anchor the panel to all four sides. The result is shown below:

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

For a different sort of autosizing, change the Anchor property to None. The TableLayoutPanel control then stays the same size but moves to the relative same position within the form.

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

You can use nearly all controls as child controls in a TableLayoutPanel or FlowLayoutPanel (even another layout panel control) but the effect you get depends on the control. In the first example above, the text in a Label changed to a vertical orientation. Not all controls will do that. Here's a WebBrowser control as a child control.

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

The reader who sent me the original question actually wanted a form that would display data like this:

--------
Click Here to display the illustration
Click the Back button on your browser to return
--------

Some critical changes to properties are necessary to make this form look 'right'. In addition to anchoring the TableLayoutPanel control to all four sides, make sure that the AutoSize property of both the TableLayoutPanel control and the form are set to True. The button is anchored to the bottom right side of the containing form. The title can be centered by setting ColumnSpan equal to 2 for just one label in the first column.

I also added a dialog to enter the name and salary information.

The code then looks like this.

Private Sub AddEmployee_Click( ...
   EmpSalaryPanel.RowCount += 1
   EmpSalaryPanel.RowStyles.Add( _
      New RowStyle(SizeType.AutoSize))
   Dim templbl1, templbl2 As New Label
   templbl1.Anchor = AnchorStyles.Left
   templbl1.TextAlign = ContentAlignment.MiddleLeft
   templbl1.AutoSize = True
   templbl2.Anchor = AnchorStyles.Left
   templbl2.TextAlign = ContentAlignment.MiddleLeft
   templbl2.AutoSize = True
   If AddEmp.ShowDialog() = _
      Windows.Forms.DialogResult.OK Then
      templbl1.Text = AddEmp.EmpName.Text
      EmpSalaryPanel.Controls.Add(templbl1)
      templbl2.Text = AddEmp.EmpSal.Text
      EmpSalaryPanel.Controls.Add(templbl2)
   End If
End Sub

There are a lot of obscure interactions between anchoring, docking, setting AutoSize of the parent, the TableLayoutPanel itself, and the child controls, and other properties. I'm not convinced that Microsoft has them all worked out. (But if you reported them as bugs, you would undoubtedly get the reply, "That's not a bug. It's a feature!" For example, when I anchored the button in the example above, it disabled the abilty to autosize the form. There is an old KB article that describes a very similar bug in the .NET Framework when a control is anchored to the bottom right. In any case, the form does everything else it should. And these controls can do things that it would be very difficult to do any other way.

  1. About.com
  2. Computing
  3. Visual Basic
  4. Using VB.NET
  5. TableLayoutPanel and FlowLayoutPanel Controls in Visual Basic .NET

©2014 About.com. All rights reserved.