Containers are used to create extremely powerful and visually appealing user interfaces. A container, as its name implies, is a container for other controls. Each container has a unique purpose and it handles its child controls in a very different way. This section provides you with an overview of the containers available in Visual Studio 2005, what they do, and how you can use them in your applications.
The FlowLayoutPanel Control
The FlowLayoutPanel and the TableLayoutPanel are quite possibly two of the most powerful controls to be added to Windows Forms in version 2.0. When working with HTML and ASP.NET, you create markup elements that contain yet more markup elements. These elements are then rendered to the user according to the options specified by the markup. This compositional style of rendering allows HTML designers to create extremely fluid user interfaces that can display a variety of data to the user in ways that you could never really accomplish using Windows... until now.
When you add ASP.NET controls to a form, those controls (assuming the page is in Flow Layout mode) "flow" one after the other to the user. If there are more controls than there is room horizontally in the container, those controls can then automatically wrap.
Using the FlowLayoutPanel in Windows Forms, you can simply add controls to the panel and it will deal with adjusting the relative positions of all child controls. You can specify the flow direction using the FlowDirection property and can control the automatic wrapping feature using the WrapContents property. The control can even be configured to expand itself dynamically as more controls are added to it. Another extremely handy feature is that you can specify a BackgroundImage for the control and the layout of that image. If you have ever needed to dynamically add controls to a form and found the task of manually computing the X and Y coordinates of each new control to be tedious and time-consuming, the FlowLayoutPanel will probably be your favorite new control. You can experiment with this control at design time by randomly dragging controls into it and modifying the flow direction, wrap, and autosize settings to see how they affect the relative positions of the child controls.
The GroupBox Control
The GroupBox provides a container for child controls. It has a caption or title. This box can have varying types of borders, background colors, background images, and more to create a very appealing UI element. It is often used to group related controls on a single form, such as a list of radio buttons, related check boxes, and so on.
The Panel Control
The Panel is the basic container. Although containers provide things like background colors and borders, one of their most important uses is to play host to docking controls. When you dock a control, it "sticks" to the border of its parent container. If the parent container is a fixed-size panel, you have a lot of control over the appearance and functionality of the docked control.
The SplitContainer Control
The SplitContainer replaces the splitter found in previous versions of Windows Forms. This container control contains two separate panels. The user can drag the middle bar (referred to as the split) to size each of the panels. You can even change the Orientation property so that the SplitContainer will split a region vertically or horizontally. Probably the most recognizable use of splitters in an application is in Microsoft Outlook. In Outlook, the tree containing things like your Inbox, Outbox, Sent Items, and so on is separated from the panel in which your messages are displayed, using a splitter control.
The TabControl Control
The TabControl is a control that makes it easy to segment large or complex user interfaces into something more manageable. If you place controls in "tabs," the user can switch between tabs and enter information. Tabs are often used for spitting a user interface into multiple categories. You can access individual tab pages programmatically using the TabPages property. The designer allows you to change the active tab and then you can simply drag controls from the Toolbox into each page.
The TableLayoutPanel Control
The TableLayoutPanel works in a way very similar to the FlowLayoutPanel. The difference is in how child controls are handled. Instead of flowing controls either vertically or horizontally, controls in a TableLayoutPanel reside in specific table cells. You can define the rows and columns and even use HTML-like column span and row spans to create complex table structures. When you add controls to the TableLayoutPanel, you can drag them into specific cells. At runtime, you can set the cell in which a control resides by using the following syntax:
tableLayoutPanel1.SetCellPosition(label1, new TableLayoutPanelCellPosition(col, row));
Using code like this, you can dynamically size a TableLayoutPanel at runtime as well as dynamically add and maneuver controls within the layout panel.