Download
1 / 31
310 likes | 337 Views
Learn how to create a login dialog that adjusts size based on content using Whidbey Layout. Follow step-by-step instructions for precise control over sizing behavior.
E N D
Using Whidbey Layout Building a non-resizable dialog
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 Label vertically centered relative to their matching TextBox { { Grow and shrink depending on text/font Fill up the remaining space
Sizing Requirements } Label vertically centered relative to their matching TextBox Dialog should size to fit contents { { Grow and shrink depending on text/font Fill up the remaining space
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.
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.
Set both rows to be AutoSize so that they are as large as the largest control in the row 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.
The results of the changes to RowStyles.We’re closer, but the last row is way too big!
Set AutoSize = true and AutoSizeMode to GrowAndShrink We need to shrink up the table itself in order to collapse the last row.
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.
This window can be found at: View->Other Windows -> Document Outline 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.
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).
Top Bottom Left Right Control the spacing from the frame of the form by changing Form.Padding At this point, you can add space from the edge of the form by adjusting the Form’s Padding property.
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.
Notice how the first column grew? Previous column width Previous column width Testing automatic resize behaviorWe can change the label’s text to “Network Password:” and watch the first column grow and second column shrink.
Notice how the first column shrinks back when the original text is restored. Resetting the text to “Password:” shrinks back up the first column.
Set the Form’s title to Login by changing the Text property and….
