Walkthrough: Creating a Resizable Windows Form for Data Entry

  • Статья

A form that resizes correctly can improve the usability of your user interface.

This walkthrough illustrates how to create a layout that proportionally adjusts as the user resizes the form. You will implement a data-entry form for contact information using the TableLayoutPanel control.

Tasks illustrated in this walkthrough include:

  • Creating the Project

  • Creating the Layout Panel

  • Setting Up the Layout Grid

  • Creating the Name Fields

  • Creating the Address Fields

  • Creating the Phone-Number Fields

  • Creating the Notes Field

When you are finished, your form will look something like the following:

Basic Data Entry Form with TableLayoutPanel

To copy the code in this topic as a single listing, see How to: Create a Resizable Windows Form for Data Entry.

Note

The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Working with Settings.

Prerequisites

In order to complete this walkthrough, you will need:

  • Sufficient permissions to be able to create and run Windows Forms application projects on the computer where Visual Studio is installed.

Creating the Project

The first step is to create the application project. Use this project to build the application that shows the data-entry form.

To create the project

Creating the Layout Panel

The next step is to create the layout panel that contains the resizable layout.

To create the layout panel

  1. Select the form in the Forms Designer.

  2. Drag a TableLayoutPanel control from the Toolbox onto your form.

  3. In the Properties window, change the value of the TableLayoutPanel control's Dock property to Fill.

  4. Change the value of the ColumnCount property to 4, and change the value of the RowCount property to 6.

Setting Up the Layout Grid

The next step is to specify the layout grid. Set properties in the ColumnStyles and RowStyles collections to determine how columns and rows will resize as the form's dimensions change.

To set up the layout grid

  1. Click the TableLayoutPanel control's smart tag glyph (Smart Tag Glyph) and select Edit Rows and Columns to open the Column and Row Styles dialog box. For more information, see How to: Edit Columns and Rows in a TableLayoutPanel Control.

  2. Select Columns from the Show drop-down box.

  3. Select the first column and change the value of its SizeType property to Percent. Set the value of the Percent NumericUpDown control to 25. This column will hold Label controls.

  4. Select the second column. Change the value of its SizeType property to Percent. Set the value of the Percent NumericUpDown control to 50. This column will hold TextBox controls for data-entry fields.

  5. Select the third column. Change the value of its SizeType property to Percent. Set the value of the Percent NumericUpDown control to 25. This column will hold Label controls.

  6. Select the fourth column. Change the value of its SizeType property to Percent. Set the value of the Percent NumericUpDown control to 50. This column will hold TextBox controls for data-entry fields.

  7. Select Rows from the Show drop-down box.

  8. For the first five rows, set the value of the SizeType property to Absolute, and set the value of the Absolute NumericUpDown control to 28. For the sixth row, set the value of the SizeType property to Percent, and set the value of the Percent NumericUpDown control to 80.

  9. Click OK to accept the changes.

Populating the Layout with Controls

Now you are ready to populate the layout with controls. This data-entry form is for contact information, so it has fields for first name, last name, address, phone number, and notes. The following list shows the order in which you create these controls:

  1. Name fields

  2. Address fields

  3. Phone number fields

  4. Notes field

Creating the Name Fields

The name entry fields are placed on the first row of the TableLayoutPanel control. They consist of a Label control and a TextBox control for the first name, and a Label control and a TextBox control for the last name.

To create the name fields

  1. Drag a Label control from the Toolbox onto the first cell in the TableLayoutPanel control.

  2. In the Properties window, set the value of the Label control's Anchor property to Right.

  3. Set the value of the AutoSize property to true.

  4. Set the value of the Text property to First Name.

  5. Drag a TextBox control from the Toolbox onto the second cell of the first row, next to the Label control.

  6. Set the value of the TextBox control's Anchor property to Left, Right.

  7. Drag a Label control from the Toolbox onto the third cell of the first row. Set the value of the Label control's Anchor property to Right. Set the value of the AutoSize property to true. Set the value of the Text property to Last Name.

  8. Drag a TextBox control from the Toolbox onto the fourth cell of the first row. Set the value of the TextBox control's Anchor property to Left, Right.

Creating the Address Fields

The address fields occupy the second, third, and fourth rows. Because street addresses can be long, the Address1 and Address2 fields span three columns.

To create the address fields

  1. Drag a Label control from the Toolbox onto the first cell of the second row.

  2. In the Properties window, set the value of the Label control's Anchor property to Right. Set the value of the AutoSize property to true. Set the value of the Text property to Address1.

  3. Drag a TextBox control from the Toolbox onto the second cell of the second row, next to the Label control.

  4. Set the value of the TextBox control's Anchor property to Left, Right.

  5. Set the value of the ColumnSpan property to 3. This property is provided by the TableLayoutPanel control. For more information on provided properties, see Extender Provider Overview.

  6. Repeat steps 1 through 5 for the third row. Set the value of the Label control's Text property to Address2.

  7. Drag a Label control from the Toolbox onto the first cell of the fourth row.

  8. Set the value of the Label control's Anchor property to Right. Set the value of the AutoSize property to true. Set the value of the Text property to City.

  9. Drag a TextBox control from the Toolbox onto the second cell of the fourth row, next to the Label control.

  10. Set the value of the TextBox control's Anchor property to Left, Right.

  11. Drag a Label control from the Toolbox onto the third cell of the fourth row.

  12. Set the value of the Label control's Anchor property to Right. Set the value of the AutoSize property to true. Set the value of the Text property to State.

  13. Drag a ComboBox control from the Toolbox onto the fourth cell of the fourth row.

  14. Set the value of the ComboBox control's Anchor property to Left. Set the value of the FormattingEnabled property to true.

Creating the Phone-Number Fields

The phone-number fields occupy the fifth row. To ensure that the user enters only valid phone numbers, implement them with the MaskedTextBox control.

To create the phone-number fields

  1. Drag a Label control from the Toolbox onto the first cell of the fifth row.

  2. In the Properties window, set the value of the Label control's Anchor property to Right. Set the value of the AutoSize property to true. Set the value of the Text property to Phone (W).

  3. Drag a MaskedTextBox control from the Toolbox onto the second cell of the fifth row.

  4. Set the value of the MaskedTextBox control's Anchor property to Left.

  5. Click the smart tag (Smart Tag Glyph) on the MaskedTextBox control to open the Mask editor.

  6. Select the Phone Number mask in the Input Mask dialog box. Click OK.

  7. Repeat steps 1 through 5 for the home phone-number field. Set the value of the Text property to Phone (H).

Creating the Notes Field

The last field occupies the sixth row. It is for entering notes, and it allows free-form text entry.

To create the notes field

  1. Drag a Label control from the Toolbox onto the first cell of the sixth row.

  2. In the Properties window, set the value of the Label control's Anchor property to Top, Right. Set the value of the AutoSize property to true. Set the value of the Text property to Notes.

  3. Drag a RichTextBox control from the Toolbox onto the second cell of the sixth row.

  4. Set the value of the ColumnSpan property to 3.

  5. Set the value of the RichTextBox control's Dock property to Fill.

Finishing the Layout Grid Setup

The last step is to finish the layout grid setup. The first and third columns should be set to AutoSize. Because you have placed controls in these columns, the columns are visible at design time.

To set up the layout grid

  1. Select the TableLayoutPanel control and click its smart tag glyph (Smart Tag Glyph). Select Edit Rows and Columns to open the Column and Row Styles dialog box. For more information, see How to: Edit Columns and Rows in a TableLayoutPanel Control.

  2. Select Columns from the Show drop-down box.

  3. Select the first and third columns and change the value of the SizeType property to AutoSize.

  4. Click OK to accept the changes.

Checkpoint

At this point, you can run your application to check the form's dynamic layout.

To check your form's layout

  • Build and run the project. When the form appears, resize it to be larger and smaller.

Note

The controls are proportionally resized to fill the available space.

Next Steps

Now that you can create forms that implement dynamic layout, consider making your form ready for localization. For more information, see Walkthrough: Creating a Layout That Adjusts Proportion for Localization.

See Also

Tasks

How to: Create a Resizable Windows Form for Data Entry

Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel

Walkthrough: Arranging Controls on Windows Forms Using a FlowLayoutPanel

How to: Edit Columns and Rows in a TableLayoutPanel Control

Walkthrough: Laying Out Windows Forms Controls with Padding, Margins, and the AutoSize Property

How to: Support Localization on Windows Forms Using AutoSize and the TableLayoutPanel Control

Walkthrough: Performing Common Tasks Using Smart Tags on Windows Forms Controls

Walkthrough: Creating a Layout That Adjusts Proportion for Localization

Reference

TableLayoutPanel

FlowLayoutPanel