Organizing Controls on a Form

Organizing Controls on a Form

When you add controls to a form programmatically, it takes a bit of trial and error to position the new objects so that they're aligned properly and look nice. After all, you don't have the Visual Studio Designer to help you—just the (x, y) coordinates of the Location and Size properties, which are clumsy values to work with unless you have a knack for two-dimensional thinking or have the time to run the program repeatedly to verify the placement of your objects.

Fortunately, Visual Basic contains several property settings that you can use to organize objects on the form at run time. These include the Anchor property, which forces an object on the form to remain at a constant distance from the specified edges of the form, and the Dock property, which forces an object to remain attached to one edge of the form. You can use the Anchor and Dock properties at design time, but I find that they're also very helpful for programmatically aligning objects at run time. The following exercise shows how these properties work.

Anchor and dock objects at run time

1. Click the Close Project command on the File menu, and then create a new application project named My Anchor and Dock.

2. Display the form.

3. Click the PictureBox control, and add a picture box object in the top middle of the form.

4. Use the TextBox control to create a text box object.

5. Set the Multiline property for the text box object to True so that you can resize the object appropriately.

6. Resize the text box object so that it covers most of the bottom half of the form.

7. Click the Button control, and add a button object to the lower-right corner of the form.

8. Set the following properties for the form and the objects on it. (You'll be using one image file from the next chapter.)

   Object	Property	Setting
   PictureBox1	Image SizeMode	“c:\vbnet03sbs\chap15\sun.ico” StretchImage
   Button1	Text	“Align Now”
   TextBox1	Text	“Anchor and Dock Samples”

   Your form looks similar to this:

   

9. Double-click the Align Now button to open the Button1_Click event procedure in the Code Editor.

10. Type the following program code:

    PictureBox1.Dock = DockStyle.Top TextBox1.Anchor = AnchorStyles.Bottom Or _   AnchorStyles.Left Or AnchorStyles.Right Or _   AnchorStyles.Top Button1.Anchor = AnchorStyles.Bottom Or _   AnchorStyles.Right

    When this event procedure is executed, the Dock property of the PictureBox1 object is used to dock the picture box to the top of the form. This forces the top edge of the picture box object to touch and adhere to the top edge of the form—much as the Visual Studio docking feature works in the IDE. The only surprising behavior here is that the picture box object is also resized so that its sides adhere to the left and right edges of the form. You'll see this behavior in the following step.

    Next, the Anchor property for the TextBox1 and Button1 objects is used. The Anchor property maintains the current distance from the specified edges of the form, even if the form is resized. Note that the Anchor property maintains the object's current distance from the specified edges—it doesn't attach the object to the specified edges unless it's already there. In this example, I specify that the TextBox1 object should be anchored to all four edges of the form (bottom, left, right, and top). I use the Or operator to combine my edge selections. I anchor the Button1 object to the bottom and right edges of the form.

11. Save the project, and specify the c:\vb05sbs\chap14 folder as the location.

    TIP
    The complete Anchor and Dock program is located in the c:\vb05sbs\chap14\anchor and dock folder.

12. Click the Start Debugging button to run the program.

    The form appears, just as you designed it.

13. Move the pointer to the lower-right corner of the form until it changes into a Resize pointer, and then enlarge the form.

    Notice that the size and position of the objects on the form do not change.

14. Resize the form to its original size.

15. Click the Align Now button on the form.

    The picture box object is now docked at the top edge of the form. The picture box is also resized so that its sides adhere to the left and right edges of the form, as shown here:

    

    Notice that the Sun icon in the picture box is now distorted, which is a result of the docking process.

16. Enlarge the form again.

    As you resize the form, the picture box and text box objects are also resized. Because the text box is anchored on all four sides, the distance between the edges of the form and the text box remains constant. During the resizing activity, it also becomes apparent that the button object is being repositioned. Although the distance between the button object and the top and left edges of the form changes, the distance to the bottom and right edges remains constant, as shown here:

    

17. Experiment with the Anchor and Dock properties for a while, and try a different bitmap image if you like. When you're finished, click the Close button on the form to end the program.

You now have the skills necessary to add new forms to a project, position them on the Windows desktop, populate them with new controls, and align the controls by using program code. You've gained a number of useful skills for working with Windows forms in a program.