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:
.gif "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
- Create a Windows Application project called DemoDataEntryLayout. For more information, see How to: Create a New Windows Forms Application Project.
Creating the Layout Panel
The next step is to create the layout panel that contains the resizable layout.
To create the layout panel
Select the form in the Forms Designer.
Drag a TableLayoutPanel control from the Toolbox onto your form.
In the Properties window, change the value of the TableLayoutPanel control's Dock property to Fill.
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
Click the TableLayoutPanel control's smart tag glyph (
.gif "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.Select Columns from the Show drop-down box.
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.
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.
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.
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.
Select Rows from the Show drop-down box.
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.
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:
Name fields
Address fields
Phone number fields
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
Drag a Label control from the Toolbox onto the first cell in the TableLayoutPanel control.
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 First Name.
Drag a TextBox control from the Toolbox onto the second cell of the first row, next to the Label control.
Set the value of the TextBox control's Anchor property to Left, Right.
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.
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
Drag a Label control from the Toolbox onto the first cell of the second row.
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.
Drag a TextBox control from the Toolbox onto the second cell of the second row, next to the Label control.
Set the value of the TextBox control's Anchor property to Left, Right.
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.
Repeat steps 1 through 5 for the third row. Set the value of the Label control's Text property to Address2.
Drag a Label control from the Toolbox onto the first cell of the fourth 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 City.
Drag a TextBox control from the Toolbox onto the second cell of the fourth row, next to the Label control.
Set the value of the TextBox control's Anchor property to Left, Right.
Drag a Label control from the Toolbox onto the third cell of the fourth 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 State.
Drag a ComboBox control from the Toolbox onto the fourth cell of the fourth row.
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
Drag a Label control from the Toolbox onto the first cell of the fifth row.
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).
Drag a MaskedTextBox control from the Toolbox onto the second cell of the fifth row.
Set the value of the MaskedTextBox control's Anchor property to Left.
Click the smart tag (
) on the MaskedTextBox control to open the Mask editor.Select the Phone Number mask in the Input Mask dialog box. Click OK.
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
Drag a Label control from the Toolbox onto the first cell of the sixth row.
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.
Drag a RichTextBox control from the Toolbox onto the second cell of the sixth row.
Set the value of the ColumnSpan property to 3.
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
Select the TableLayoutPanel control and click its 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.Select Columns from the Show drop-down box.
Select the first and third columns and change the value of the SizeType property to AutoSize.
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