Using Whidbey Layout Building a nonresizable dialog Building
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 { { Label vertically centered relative to their matching Text. Box Grow and shrink depending on text/font Fill up the remaining space
Sizing Requirements } { { Label vertically centered relative to their matching Text. Box Grow and shrink depending on text/font Fill up the remaining space Dialog should size to fit contents
Start off with a blank form.
Drag and Drop a new Table. Layout. Panel onto the form.
Add two labels and two text boxes from the toolbox to the newly added Table. Layout. Panel.
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 Auto. Size 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 Auto. Size so that the width of the column is the size of the largest label. Set the Text. Box column to be 100% so as to fill up the remaining space in the table with Text. Boxes. 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 Row. Styles by switching the Combo. Box to Rows.
Set both rows to be Auto. Size 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 Auto. Size for both rows.
The results of the changes to Row. Styles. We’re closer, but the last row is way too big!
Set Auto. Size = true and Auto. Size. Mode to Grow. And. Shrink 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 Table. Layout. Panel can be difficult when it is Auto. Sized. 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 Auto. Size on the Form and Auto. Size. Mode to Grow. And. Shrink. (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 Use. System. Password. Char=true on the password text box.
Notice how the first column grew? Previous column width 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 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….
We’re done! …. ish. Now its time add an OK and Cancel button…
- Slides: 31