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

-

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


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.

Implementation

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

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".

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".

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.

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.

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:

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.

This will fix our form:

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:

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.

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).

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".

Now the form will look like this:

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".

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.

The completed form will look like this:

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 aTableLayoutPanel, it takes a little bit of effort at the beginning, but it will save you a lot of work later on.

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:

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.

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

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

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

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

Add a checkbox control to the cell adjacent to the "Is Married" label. Set its Anchor to "Left" and set its Textproperty 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".

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%.

The form will now look like this:

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

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:
  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:

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


Comments

Post a Comment

Popular posts from this blog

SharePoint 2007 - Simple Task Dashboard

-
Image
example of creating a simple Task Dashboard. This is a pretty basic example of using all OOTB (out of the box) features and combining them to quickly build a solution. Scenario: We want to provide a way for users to easily see a summary of the current project tasks. We want them to be able to see the following information: Open Tasks Assigned to Them Overdue Tasks Tasks Due This Week Task Calendar Tasks Assigned to Others Solution: To build this solution we will be using several different tools available in SharePoint, all included in the list below: Task List Task List Views We will create views for each of the different ways we want to see the data displayed on our dashboard. Web Part Page List View Web Parts Custom Navigation The first thing we will do is create our task lists and then configure all the views that we need. To create the list, go to View All Site Content, Create and then select the Task list. Next, we will need to configure our custom views. To do this, w
Read more

MERGE transformation in SSIS

-
Image
In this post we are gonna discuss about MERGE transformation. MERGE in SSIS is equal to UNION ALL in SQL Server. This transformation unions two datasets/tables.The merge Transformation combines two  sorted  dataset into single dataset. Highlighted the text SORTED in last statement because “It is not possible to use MERGE when the inputs are NOT SORTED”. There is one more transformation which is very similar to this i.e UNION ALL. The Merge Transformation is similar to the union all transformations. Use the union all transformation instead of the merge transformation in the following situations. The transformation inputs are not sorted The combined output does not need to be sorted. The transformation has more than two inputs. MERGE takes ONLY TWO inputs where as UNION ALL can take more than two. Now lets see how to configure MERGE transformation with an example. I created TWO tables with names MergeA and MergeB and inserted few records into each table as shown below.
Read more