Using the Windows Forms Designer

The Windows Forms Designer is the interactive tool used to graphically lay out and configure the elements of your user interface. You use this designer to create and manipulate forms as well as to design and lay out the controls on those forms.

To get started using the Windows Forms Designer, drag a control (any simple control should do) onto a form. As you are dragging you'll see a small outline that indicates the point at which the control will be inserted. When you let go of the control, it will appear completely at the designated insertion point.

When a control is on the surface of a form, you can configure all of the control's properties using the Properties window. By default, this window shows up in the bottom right of the Visual Studio screen below the Solution Explorer window. If the window is not visible, you can make it visible by selecting View, Properties Window. You can also use the hotkey Ctrl+W, P. This will open the Properties window if it has been closed and will then set the focus to that window. Inside the Properties window you can configure virtually every aspect of a control. If you click the lightning-bolt icon from within the Properties window, you can also see a list of all the events exposed by a given control (such as an event for when the control is clicked, double-clicked, and so on). If you double-click an empty space next to an event, you can create an event handler for that event on that control.

The list of properties that belong to a given control is specific to that control, and many control properties will be covered in Chapter 35, "The Windows Forms Control Library." The most important things that you will use the forms designer for are navigating control structures, which can be made significantly easier by the Document Outline window; aligning and justifying controls using the new SnapLines feature; and finally, you will be using the designer to make sure that as the host form grows and shrinks, the size and layout of the controls on the form adjust accordingly. You can perform all of these tasks using the designer and without having to write a single line of code.

Using the Document Outline Window

The Document Outline window is an extremely powerful tool that allows a developer to rapidly locate an individual control that might be nested deep within other controls on a form. Despite its power, this window is often overlooked or even forgotten by many developers.

Tip

Even if you don't use it all the time, you should get in the habit of making sure that the Document Outline window has been opened at the beginning of a project. That way it will appear as a tab next to Solution Explorer. With it sitting in a visible location in your workstation, you are more likely to notice it and make use of it. With simple interfaces it may be completely unnecessary, but when you start creating complex interfaces with many levels of nested controls, you may wonder how you managed to survive without it.

This window, shown in Figure 34.3, displays controls in a tree so that you can get a quick list of all controls on the form as well as a reference of where those controls all are in relation to each other. When you have many levels of nesting, it can become extremely difficult or even impossible to properly click on and select child controls using just the visual designer. If you run into that situation, you can use the Document Outline window to quickly find and select the control you need.

Figure 34.3. The Document Outline window.

Lining Up Controls with SnapLines

One of the most helpful and powerful new features of the Visual Studio 2005 Forms Designer is the use of SnapLines. SnapLines are a new feature that allow you to visually align controls while maneuvering them around the design surface.

With previous versions of Visual Studio, one of the most annoying and tedious tasks involved in Windows Forms development was lining up controls. Previous versions of Visual Studio supported control alignment by littering a containing surface with little grid points. You could move a set of controls so that it looked as if they would all start at the same point, but more often than not there would be discrepancies. Sometimes it would be so difficult to line up the controls that developers would have to go into the control properties and manually modify a control's X and Y coordinates within a container.

This kind of tedium is no longer required when working with Windows Forms 2.0. To see a quick example of SnapLines in action, drag a Label control from the Toolbox onto a blank form. Now click the label and hold to drag and move the label around the outside edge of the form. As you approach an edge of the form, a blue SnapLine appears that visually shows you the recommended distance between the current control and the form's edge. If you move the Label control to the top left corner of the form, you will see that both a vertical and horizontal SnapLine appear to guide the control's placement, as shown in Figure 34.4.

Figure 34.4. SnapLines used to recommend margins.

You can also use SnapLines to align controls relative to each other. One of the most common tasks in creating Windows Forms user interfaces is aligning a text label with an input control such as a TextBox. This alignment task used to be time-consuming and frustrating. To see how easy it is with SnapLines, drag a TextBox control onto the form and move it near the right edge of the label. As you do so, a set of SnapLines appears. When the TextBox control is in a position near the right of the label, a pair of SnapLines appears and the TextBox control snaps into a position that puts it at the exact same level as the label. You can experiment with this by dragging more controls onto the form and seeing where the SnapLines appear. When you align a TextBox near a Label, you can see a pink SnapLine that indicates that even though the outside edges of the controls might not be aligned, the text contained within them will appear at the same level.

As you learn more about Windows Forms and you start experimenting more with the designer and creating sample applications in the upcoming chapters, you will grow to love the SnapLines feature; it will quickly become a feature that you can't live without.

Creating Resizable Forms

As you will see in the next section, creating forms that respond properly to different environments and being shrunk or expanded can go a long way toward creating a compelling user interface.

Thankfully, you can accomplish a great deal toward making your form and its contained controls resizable using a few control properties and some features of the designer.

Dock

All controls have a Dock property. This property indicates the docking mode of the control. It essentially indicates which borders of the control are bound to the container. A little graphical tool pops up when you select the Dock property of a control, which helps you determine what docking mode you want for the control. That pop-up is shown in Figure 34.5.

Figure 34.5. Dock selection pop-up.

As you can see from the image, you have the following docking mode options:

• Left Docks the control so that its left border is "stuck" to the left border of the container.

• Right Docks the control so that its right border is "stuck" to the right border of the container.

• Fill Docks the control so that it fills the entire container.

• Top Docks the control so that its top border is "stuck" to the top border of the container.

• Bottom Docks the control so that its bottom border is "stuck" to the bottom border of the container.

Experiment with the various docking modes by picking a random control and putting it on a form and then setting the Dock property. With a single control and just a form, it might not look like a very powerful property. However, when you start working with nested controls and nested docks, things can get interesting quickly.

Anchor

As you saw when experimenting with the Dock property, the control moves from wherever it was before so that it can attach itself to the designated container border, or it expands to fill the entire container. Sometimes that is the desired behavior, but other times you may want more finely grained control over your interface. This is where the Anchor property comes in.

Rather than defining the border to which the control is attached, the Anchor property defines the border with which the control will resize. For example, you can have a control that will automatically grow and shrink horizontally as the form grows and shrinks but remains in its original vertical position. You can also accomplish the opposite and have a control that sizes vertically as the form is sized, but it remains in its original horizontal location. You can even have a control that expands horizontally and vertically but still doesn't consume the entire container as a Dock property would if it was set to Fill.

When you define an anchor, the anchor selection pop-up shown in Figure 34.6 appears. This pop-up is a handy visual indicator as to which control borders will stretch or shrink when the container stretches or shrinks.

Figure 34.6. The anchor selection pop-up.

Using the Dock and Anchor properties combined with control nesting (controls that contain other controls), the developer can easily create extremely powerful user interfaces that respond appropriately when a form is resized. Before these properties existed, developers had to manually write code to resize and adjust every control on a form in response to a window resize event. Such tedious coding is no longer required.