Building Windows Applications

Using Panels

Panels enhance all of the other layout features discussed so far because they can act as a container for other controls, much like a form does. Because they are containers, panels have their own DockPadding property and all of the auto-scroll features described for forms. A control can be placed into a panel and anchored to the bottom-right corner of that panel, while the panel itself was docked or anchored to a specific location on a form. By combining panels with forms, you can design more complicated layouts that still support resizing. Panels are used in several of the examples in the next section.

Some Common Resizing Scenarios

Now that you have been told what docking, anchoring, and auto-scrolling are, here are a few forms that demonstrate using the new layout features.

A Standard One-Large-Control Dialog Box

A large control, such as TextBox , ListBox , or DataGrid , needs to resize properly on a Form with two buttons (OK and Cancel), as shown in Figure 3.13 .

Figure 3.13
Allowing the users to resize your form makes your application work better on a range of screen sizes.

If it were not for those two buttons, docking would be a possible answer, but anchoring saves the day here. Assuming a desired border around the form's contents of 10 pixels:

  • Position the large control with its top, left, and right edges 10 pixels in from the corresponding form edges. Note that you don't have to be exact about these positions, anchoring will lock the control in whatever place you put it. A precise border is just for aesthetics.
  • Add your two buttons to the bottom of the form, placing their bottom edge 10 pixels up from the bottom of the form. The right edge of one button should be 10 pixels in from the right edge of the form. Place the other button so that its right edge is five pixels away from the left edge of the first button.
  • Adjust the height of the large control so that its bottom edge is 10 pixels from the top of the two buttons.
  • Now, set the large control's Anchor property to "Top, Bottom, Left, Right" and both buttons' Anchor property to "Bottom, Right" .

A Long List of Questions

You have a long list of questions that must be answered before a user can submit an order, and additional questions keep being added. There also needs to be an OK and Cancel button on the form; OK to move onto submitting the order, and Cancel to close the form and cancel the order.

AutoScroll is the key for this layout, either for the entire form or for a panel, depending on whether you want to keep the OK and Cancel buttons visible at all times or if you want the user to have to scroll down to find them.

  • For the first option ( Figure 3.14 ), where you want the buttons to be visible at all times, set up your form just like in Example 3.1, but use a Panel control as the large control.


    Figure 3.14

    A panel allows you to restrict which parts of the form scroll and which parts are always visible.

  • Set the panel's AutoScroll property to True and then place all of your individual questions into the panel.
  • For the second option ( Figure 3.15 ), set the Form's AutoScroll property to True and place all of your questions onto the form.


    Figure 3.15

    You can use the entire form surface for your scrolling area.

  • Add your OK and Cancel buttons at the very bottom of your form below all of the questions.

A Multi-Column Form

You have a form with multiple columns of text boxes, each with associated labels, a single large text box, and the OK and Cancel buttons at the bottom (see Figure 3.16 ).

Figure 3.16
Multiple columns are trickier to resize.

This gets a little trickier because of the two columns at the top of the form, but panels can make it all work out.

  • Create a panel ( mainPanel ) that is tall enough to contain all of your controls for the top section of the form.
  • Create two more panels ( rightPanel and leftPanel ) and place them in the first panel you created.
  • Select one of new panels ( rightPanel ) and make its Dock property equal to Right ; make the other panel's Dock property equal to Fill .
  • Now, leftPanel will always fill the space not taken by rightPanel , but there is no way (in the designer) to force those two panels to equally share the available space. Instead you have to go to code.
  • View the code for your form, and then select mainPanel from the object drop-down list (left side) and Layout from the event drop-down list (right side). Enter the code from Listing 3.16, assuming your panel names are mainPanel , rightPanel , and leftPanel , into the Layout event handler.

    Listing 3.16 Using Code to Make Two Panels Share the Available Space

    Private Sub mainPanel_Layout( _
        ByVal sender As Object, _
        ByVal e As System.Windows.Forms.LayoutEventArgs) _
          Handles mainPanel.Layout
      rightPanel.Width = mainPanel.Width \ 2
    End Sub

Note that I used the Layout event, which is a new event in Windows forms that was not available in Visual Basic 6.0. In Visual Basic 6.0, I would have used the Resize event, but Layout is actually more precise as it occurs when the position and size of controls within a container might need adjusting, as opposed to occurring upon every resize of the form. If a form were set to AutoScroll , for example, the Resize event would fire whenever the form was resized (as it should), but the controls inside the form would not need to be rearranged.

An Explorer-Style Application

You are attempting to produce an interface in the format of the Windows Explorer, Outlook, and other applications. This interface will have a TreeView along one side of the form and a ListView on the other, and have the capability to move the dividing line between the two controls to resize them (see Figure 3.17 ).

Figure 3.17
The standard Explorer style of form layout.

This style of layout is easy to accomplish with the new features of Windows forms, but the specific order in which you add items to your form is important.

  • Starting with a blank form, add a TreeView control and set its Dock property to Left .
  • Add a Splitter control; it will automatically dock to the left and take its place along the right side of the TreeView .
  • Add a ListView control and set its Dock property to Fill .

That's it. The ListView will fill whatever space isn't being used by the TreeView and the Splitter will allow you to adjust the relative size of the two areas.

That is all of the sample resizing scenarios covered in this chapter, but that certainly is not the extent of layouts that can be created.

You might also like...

Comments

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“There's no test like production” - Anon