Click here to Skip to main content
15,867,568 members
Articles / Desktop Programming / Windows Forms
Tip/Trick

Designing the Layout of Windows Forms using a TableLayoutPanel, with auto-expand panels

Rate me:
Please Sign up or sign in to vote.
4.93/5 (33 votes)
16 Nov 2014CPOL8 min read 191.1K   4.9K   52   21
This is a just a small tip to show a simple way of designing the user interface of Windows Forms for Desktops applications.

Introduction

Over the years, I have seen many developers designing Windows Forms by just dragging and dropping controls, and then repositioning them to match their requirements. When they need to change anything in the design, or when they add a new control, it becomes a little bit messy.

Here is a small demonstration of the technique I use to design Windows Forms, by using a control called TableLayoutPanel. I know that there are so many other techniques, others might use docking properties and anchors for example, but I also intended for this tip to be a discussion forum, where I can also learn about other techniques.

Background

TableLayoutPanel is a control that "Represents a panel that dynamically lays out its contents in a grid composed of rows and columns" (From MSDN: TableLayoutPanel Class).

Basic Requirement

In this sample, we are required to build a simple manual entry form like the below, with some conditions:

Whatever the size of the form (down to a certain extent), even when the form is maximized, the following should always remain true:

  • The size of the text boxes must remain equal for all text boxes, and they must fill the largest space available
  • The labels must all be left aligned
  • The Grid View must fill all of the remaining space
  • A small refresh button must exist below the Grid, it must always be aligned to the right of the form.

Image 1

Implementation

First let us create a new Windows Forms Applications Project. Expand the main form, and add a new TableLayoutPanel control by dragging it from the Toolbox menu under the "Containers" section.

Image 2

Expand the new control till it fills the form, and Modify the Anchor property to attach to the 4 sides: "Top, Right, Bottom, Left". name the control "tblPnlMain".

Image 3

Add a new Row to the table panel by clicking the small arrow at the right side of the panel, and then choosing "Add Row".

Image 4

Now remove the last column by clicking the button "Remove Last Column". After that, in the first row, add another TableLayoutPanel and name it "tblPnlDataEntry". In this panel, we will be placing our labels, text boxes, save and cancel buttons.

Add two additional columns and two additional rows to this new panel.

Image 5

Set the Anchor of this panel to take all of the four sides, then expand the panel to fill all of its parent container. Please note that in one cell of the table panel, we can only put one control. That's why we are putting a table panel to be able to add controls as much as we want.

Add 6 labels to the first and third column of the data entry manual form. Set the Anchor of all of them to be just "Left". Set their text properties as: "First Name, Last Name", "Mobile Phone", "Home Phone", "Billing Addresses" and "Country". Don't worry about the design now, we will fix that shortly.

Image 6

Now, in the 2nd and 4th column of the data entry panel, add 6 text boxes. Set the Anchor to all of them to be "Left and Right". This will allow the text boxes to fill the whole width of their parent containers. You will end up with an ugly form like the below:

Image 7

Now, click on the small arrow on the right side of the Data Entry table panel, and choose "Edit Rows and Columns". For Column 1 and Column 3, set the size type to "Autosize", this will force the columns to take the width of the largest child control. For Column 2 and Column 4, set the size type to "Percent", and set the value to 50% for each column. This will tell the columns to take 50 % of the remaining space each.

Image 8

This will fix our form:

Image 9

Now, in the 4th row, last column, add another table panel, name it "tblPnlButtons". For this panel, remove the last row, so that it has only two columns. In the first column, add a button and caption it as "Save". In the second column, add another button and caption it as "Cancel". Set the Anchor property for this panel to Right only. Also set the Anchor for both Buttons to "Right". The form will now look like this:

Image 10

Now back to the Data Entry Table Panel, Click Edit Rows and Columns, choose the "Rows" item in the drop down list, set the first 3 rows to "AutoSize", and set the 4th row to "Percent", giving it 100%, this means that the last row will take all of the remaining space.

Image 11

Now the form should look like this (if the buttons are still small and not appearing in full, try to expand your form a little bit).

Image 12

Still something is not right, the Save and Cancel Button are too far from each other. Open the "Table Layout Panel Tasks" for the Buttons table panel, and set the size type of the first column to "Percent", and the value to 100%, for the second column, set the size type to "AutoSize".

Image 13

Now the form will look like this:

Image 14

Add a Grid View to the second row of the main table panel, and add a button to the last row. Set the Anchor of the grid view to all four sides (Top, Right, Bottom, Left), and set the Anchor of the button to Right. Caption the Button as "Refresh".

Image 15

Open the Table Layout Panel Tasks for the Main table panel, and set the size type of the first row and last row to "AutoSize", and the size type of the second row to"Percent", and the value to 100%. Setting the Size percent of the second row to 100% will ensure that the Grid View will take all of the remaining space.

Image 16

The completed form will look like this:

Image 17

Now run the form, resize it, and then maximize it. You will see that the controls are always in order. Set the minimum size of the form to a value of your choice, to ensure that the controls have the minimum space they require to remain in order.

Now for example if you set the Form's "Right to left" property to true, you will notice that all the controls will still be in place, in order, and with the same proportions. This is one example of the benefits of a TableLayoutPanel, it takes a little bit of effort at the beginning, but it will save you a lot of work later on.

Image 18

Bonus Tip

This is an update to the original post. Suppose your manual entry form needs more data, you need to add a checkbox which will indicate if the person is married or not. If the person is married, 4 entry fields should appear in the control: Spouse name, spouse last name, spouse age and number of children. If the person is not married, these entry fields should disappear, and the controls should resize to fill the empty space. The final design should look like this:

Image 19

If the user unchecks the checkbox, the form will change to this, notice how the "Save" and "Cancel" buttons will move up to below the "Is Married" checkbox, and the Grid View will expand to fill up the empty space.

Image 20

To begin, go the data entry table panel and add three more rows:

Image 21

Expand the table panel to have more space to add the new controls.

Image 22

Move the buttons table panel to the last row, the form will now look like below:

Image 23

Now add 5 labels, set their anchors to left only, and caption them as shown below:

Image 24

Add a checkbox control to the cell adjacent to the "Is Married" label. Set its Anchor to "Left" and set its Text property to empty string. Now add four text boxes next to the four new labels. Set their Anchor property to "Right" and "Left". 

Now this is important: Set the buttons table panel Anchor to "Top" and "Right", and for the Data Entry Panel, there is a property named "AutoSize". This will specify if the panel will automatically resize to fits its content, set this property to "True". 

Image 25

Now still in the Data Entry Panel, Open the "Edit Rows and Columns" box from the "TableLayoutPanel Tasks", and set the Size type for the first 6 rows to "Auto Size", and set the Size type for the last row to "Percent", set its value to 100%.

Image 26

The form will now look like this:

Image 27

Expand it a little bit, so that the "Save" and "Cancel" buttons are completely visible:

Image 28

Now double click on the checkbox next to the "Is Married" label and add the below code, this will hide or show all the new labels and text boxes based on whether this checkbox is checked or not. Set the Checked property of the checkbox to true so that it is checked by default when the form runs:

C#
label8.Visible=label9.Visible=label10.Visible=label11.Visible=checkBox1.Checked;
          textBox7.Visible = textBox8.Visible = textBox9.Visible =
          textBox10.Visible = checkBox1.Checked;

Now run the form, When expanded, it will look like this:

Image 29

When you uncheck the "Is Married" checkbox, the form will automatically reposition and resize its controls accordingly:

Image 30

You can download the updated sample code from the top of the tip, thanks for following up :).

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionTable Layout Explanation Pin
Member 1531584322-Feb-24 6:18
Member 1531584322-Feb-24 6:18 
QuestionTable Layout Panel Pin
Member 1396551728-Aug-18 20:50
Member 1396551728-Aug-18 20:50 
QuestionBackColor Property for individual cells Pin
Member 1172713422-Aug-17 15:29
Member 1172713422-Aug-17 15:29 
Suggestionconsider using column span Pin
mostafa heidary30-Mar-16 5:55
mostafa heidary30-Mar-16 5:55 
GeneralMy vote of 5 Pin
George Tourtsinakis26-Jun-15 4:32
George Tourtsinakis26-Jun-15 4:32 
QuestionGreat explanation. Pin
George Tourtsinakis26-Jun-15 4:31
George Tourtsinakis26-Jun-15 4:31 
AnswerRe: Great explanation. Pin
Hassan Mokdad29-Jun-15 21:14
Hassan Mokdad29-Jun-15 21:14 
GeneralMy vote of 5 Pin
wkiess0125-Nov-14 16:37
wkiess0125-Nov-14 16:37 
GeneralRe: My vote of 5 Pin
Hassan Mokdad25-Nov-14 20:22
Hassan Mokdad25-Nov-14 20:22 
GeneralMy vote of 5 Pin
PSU Steve25-Nov-14 4:27
professionalPSU Steve25-Nov-14 4:27 
GeneralRe: My vote of 5 Pin
Hassan Mokdad25-Nov-14 6:47
Hassan Mokdad25-Nov-14 6:47 
GeneralMy vote of 5 Pin
wkiess0120-Nov-14 13:10
wkiess0120-Nov-14 13:10 
GeneralRe: My vote of 5 Pin
Hassan Mokdad20-Nov-14 21:44
Hassan Mokdad20-Nov-14 21:44 
GeneralRe: My vote of 5 Pin
Hassan Mokdad22-Nov-14 5:28
Hassan Mokdad22-Nov-14 5:28 
GeneralRe: My vote of 5 Pin
wkiess0125-Nov-14 16:36
wkiess0125-Nov-14 16:36 
QuestionPerformance Pin
johannesnestler17-Nov-14 2:21
johannesnestler17-Nov-14 2:21 
AnswerRe: Performance Pin
Hassan Mokdad17-Nov-14 2:29
Hassan Mokdad17-Nov-14 2:29 
QuestionA new control for me Pin
MrBillC16-Nov-14 8:15
MrBillC16-Nov-14 8:15 
AnswerRe: A new control for me Pin
Hassan Mokdad16-Nov-14 9:11
Hassan Mokdad16-Nov-14 9:11 
Question! Pin
Member 1121707616-Nov-14 6:16
Member 1121707616-Nov-14 6:16 
AnswerRe: ! Pin
Hassan Mokdad16-Nov-14 7:25
Hassan Mokdad16-Nov-14 7:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.