Section 3.6. Create Data-Driven Forms

3.6. Create Data-Driven Forms

One of the features that designers request most frequently of data-driven Windows Forms is the ability to add new controls to a form quickly, easily, and with a consistent layout. Visual Studio 2005 provides two new controls to help you do that: FlowLayoutPanel and TableLayoutPanel.

Each control derives from Panel, and each gives you a means to automate how controls are added to the panel. This is especially powerful when building your page based on data received dynamically (for example, from a database or an XML document).

3.6.1. How do I do that?

To see these panels at work, create a new Windows application and name it DynamicLayout. Widen the form to a width of about 650, and drag a FlowLayoutPanel control onto the form, resizing it to fit.

You'll write code in the form's On_Load method to populate the panel dynamically. You can determine how controls will be added to the panel by setting the FlowDirection property of the panel, either in the properties box or dynamically (at runtime), to one of the four enumerated values (BottomUp, LeftToRight, RightToLeft, or TopDown). The default is LeftToRight.

In a truly data-driven application, you'd read a data source and decide what type of control to add, as well as what properties to set on that control. To keep the example simple, just add a fixed number of label controls:

private void Form1_Load(object sender, EventArgs e) {    for (int i = 0; i < 15; i++)    {       Label myLabel = new Label( );       myLabel.Text = "Dynamically generated label " + i;       myLabel.Width = 200;       flowLayoutPanel1.FlowDirection = FlowDirection.LeftToRight;       flowLayoutPanel1.Controls.Add(myLabel);    } }

The FlowLayoutPanel control will add your controls based on the FlowDirection property you've set, as shown in Figure 3-21.

Figure 3-21. The flow layout panel

Notice that each label has been added to the form in the order specified by the FlowDirection property (left to right) and that all the controls are nicely aligned automatically.

TableLayoutPanel works similarly, except that this control gives you precise control over the size of its rows and columns, much as you'd expect from a table. To see this at work, remove the FlowLayoutPanel control from your form and replace it with a TableLayoutPanel control. The default setting is a panel with two rows and two columns, but you can set the ColumnCount property to any number you wantfor this example, set it to 4. Set CellBorderStyle to Single so that we can see the cells, and set BackColor to a light blue so that the panel stands out.

You can adjust the size of each column or row by clicking the Edit Rows and Columns link, This opens the Column and Row Styles dialog box, as shown in Figure 3-22.

Figure 3-22. Editing columns and rows

Now you are ready to add controls to the table, on the fly:

for (int i = 0; i < 15; i++) {    Label myLabel = new Label( );    myLabel.Text = "Dynamically generated label " + i;    myLabel.Width = 200;    tableLayoutPanel1.Controls.Add(myLabel); }

Notice that other than a change in the name of the panel, this code is identical to the code you used to add controls to the FlowLayoutPanel control.

3.6.2. What about...

...setting a property on an individual control within the panel?

You can access the controls on a form using the Find method. To do so, first make sure you add code to set the name of each control:

myLabel.Name = "Label" + i;

Now you can access an individual label (or a set of labels) using code similar to this:

Control[  ] foundControls = flowLayoutPanel1.Controls.Find("Label3", false); Label theControl = (Label)foundControls[0]; theControl.Text = "Who is John Galt?";

The result is shown in Figure 3-23. (I circled the affected label.)

Figure 3-23. Editing a control within a panel

3.6.3. Where can I learn more?

Check the MSDN Help for information on the FlowLayoutPanel class and the TableLayoutPanel class.