Section 3.10. Take Control of Window Layout | Visual Basic 2005: A Developers Notebook

3.10. Take Control of Window Layout

.NET 2.0 includes two new container controls that can lay out all the controls they contain in a set pattern. Both of these controls extend the Panel class with additional layout logic. The FlowLayoutPanel arranges controls evenly over several rows (from left to right), or in multiple columns (from top to bottom). The TableLayoutPanel places its controls into a grid of invisible cells, allowing to you to keep consistent column widths and row heights.

Note: The new . NET layout controls give you a way to lay out controls in set patterns automatically, which can save a good deal of effort with highly dynamic or configurable interfaces.

3.10.1. How do I do that?

The layout controls are used most often in the following two scenarios:

You have a dynamic interface that generates some of its elements programmatically. Using the layout controls, you can arrange a group of controls neatly without calculating a position for each control (and then setting the Location property accordingly).
You have a localized interface that must adapt to different languages that require vastly different amounts of on-screen real estate. As a result, when the display text changes, the controls must also adjust their size. In this case, layout controls can help you make sure the controls remain properly arranged even when their size varies.

Example 3-4 demonstrates an implementation of the first scenario. It starts with a form that includes an empty FlowLayoutPanel. The FlowLayoutPanel has its BorderStyle set to BorderStyle.Fixed3D so the border is visible.

No controls are added to the FlowLayoutPanel at design time. Instead, several new buttons are added programmatically when a cmdGenerate button is clicked.

Example 3-4. Laying out buttons dynamically

Private Sub Button1_Click(ByVal sender As System.Object, _   ByVal e As System.EventArgs) Handles Button1.Click     For i As Integer = 0 To 10         ' Create a new button.         Dim Button As New Button         Button.Text = "Dynamic Button #" & String.Format("{0:00}", i)              ' Size the button the width of the text.         Button.AutoSize = True              ' Add the button to the layout panel.         FlowLayoutPanel1.Controls.Add(Button)     Next End Sub

Note that the code doesn't set the Location property for each button. That's because the FlowLayoutPanel won't use this information. Instead, it will arrange the buttons in the order they are added, spacing each button out from left to right and then top to bottom. (To reverse this order, change the FlowLayoutPanel.FlowDirection property.)

There is one piece of information that the FlowLayoutPanel does use. That's the Margin property of each container control. This sets the minimum border required between this control and the next. The code above doesn't change the Button.Margin property, because the default setting of 3 pixels is perfectly adequate.

Figure 3-10 shows what the buttons look like once they've been added.

Figure 3-10. Laying out buttons dynamically

Note: There are actually four different components of the Margin property: Margin.Left, Margin.Right, Margin.Top, and Margin.Bottom. You can set these individually to specify different margins for the control on each side.

.NET also includes a TableLayoutPanel. This panel works like the FlowLayoutPanel, laying out controls automatically, but it aligns them according to invisible column and row grid lines. For example, if you have a number of controls that were sized differently, you can use the TableLayoutPanel to ensure that each control is spaced out evenly in an imaginary cell.

3.10.2. What about...

...more advanced layout examples? There's a lot more you can do with a creative use of layout controls. Of course, just because you can doesn't mean you should. Microsoft architects recommend you use layout controls only in specialized scenarios where the anchoring and docking features of Windows Forms aren't enough. If you don't have a highly dynamic interface, layout managers may introduce more complexity than you need.

3.10.3. Where can I learn more?

To get started with more advanced uses of layout controls, refer to some of the information in the MSDN help library reference. Look up "TableLayoutPanel control about in the index of the MSDN help reference. This displays general information about the TableLayoutPanel control and provides a link to two walkthroughs that show how the TableLayoutPanel can work in a complex localizable application.