1 / 31

Using Whidbey Layout

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.

sricherson
Download Presentation

Using Whidbey Layout

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Using Whidbey Layout Building a non-resizable dialog

  2. Building a login dialogPart 1

  3. Sizing Requirements { Grow and shrink depending on text/font

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

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

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

  7. Start off with a blank form.

  8. Drag and Drop a new TableLayoutPanel onto the form.

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

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

  11. Choose Edit Rows and Columns off the context menu.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

More Related