Using Whidbey Layout Building a non-resizable dialog

Building a login dialog Part 1

Sizing Requirements Grow and shrink depending on text/font {

Sizing Requirements Grow and shrink depending on text/font { Fill up the remaining space

Sizing Requirements Grow and shrink depending on text/font { Fill up the remaining space { Label vertically centered relative to their matching TextBox

Sizing Requirements Grow and shrink depending on text/font { Fill up the remaining space { Label vertically centered relative to their matching TextBox } Dialog should size to fit contents

Start off with a blank form.

Drag and Drop a new TableLayoutPanel onto the form.

Add two labels and two text boxes from the toolbox to the newly added TableLayoutPanel.

Are we there yet? Nope! We have the controls, but no sizing behavior yet. Lets start out by fixing up the columns, then we’ll address the rows.

Choose Edit Rows and Columns off the context menu.

By editing the rows and columns we can control the sizing behavior of our table.

In this case, we want the first column to be autosized, and the second column to fill up the remaining space in the table.

Set the Label column to be AutoSize so that the width of the column is the size of the largest label. In this case, we want the first column to be autosized, and the second column to fill up the remaining space in the table.

Set the Label column to be AutoSize so that the width of the column is the size of the largest label. Set the TextBox column to be 100% so as to fill up the remaining space in the table with TextBoxes. In this case, we want the first column to be autosized, and the second column to fill up the remaining space in the table.

Back on the form, we see the results of our edits. Now that we’ve fixed up the columns, lets address the rows.

Going back into the same editor, we can access the RowStyles by switching the ComboBox to Rows.

Since we want both rows to be as tall as the largest control (most likely the height of the text box) – use AutoSize for both rows. Set both rows to be AutoSize so that they are as large as the largest control in the row

The results of the changes to RowStyles. We’re closer, but the last row is way too big!

We need to shrink up the table itself in order to collapse the last row. Set AutoSize = true and AutoSizeMode to GrowAndShrink

Rows are fixed. …but the table isn’t stretching the width of the dialog. There are several ways to fix this, we’ll use the Dock property.

Selecting the TableLayoutPanel can be difficult when it is AutoSized. At this point we should bring up Document Outline to help us select what we need. This window can be found at: View->Other Windows -> Document Outline

Select the table and Dock fill it. It may look like we’re back to square one, but stay with it….

Set AutoSize on the Form and AutoSizeMode to GrowAndShrink. (When you run the application, the form will shrink down, you can also manually shrink it in the designer).

At this point, you can add space from the edge of the form by adjusting the Form’s Padding property. RightLeft Top Bottom Control the spacing from the frame of the form by changing Form.Padding

We want the Labels to be glued to the left edge, but vertically centered within their cells. In order to do this, we can set the anchor to be Left.

We can stretch the textboxes by setting their Anchors to Right | Left. Set UseSystemPasswordChar=true on the password text box.

Testing automatic resize behavior We can change the label’s text to “Network Password:” and watch the first column grow and second column shrink. Notice how the first column grew? Previous column width

Resetting the text to “Password:” shrinks back up the first column. Notice how the first column shrinks back when the original text is restored.

Set the Form’s title to Login by changing the Text property and….

We’re done! ….ish. Now its time add an OK and Cancel button…