The Windows Forms Designer allows you to design forms for typical Windows applications. It lets you add, size, and move controls on a form. Together with the Properties window, it also lets you change a control's properties to determine its appearance and behavior.
This chapter provides an introduction to the Windows Forms Designer. It explains how to add controls to a form, move and size controls, set control properties, and add code to respond to control events. It also describes tips and tricks that make working with controls easier.
When you first install Visual Studio, the Windows Forms Designer is configured to be quite usable. You can immediately open a form and use the Toolbox to place controls on it. You can use the mouse to move and resize controls. You can use the Format menu to arrange and size controls. Overall the Windows Forms Designer provides a first-class intuitive WYSIWYG ("what you see is what you get") experience.
Behind the scenes, however, there are a few configuration options that control the Designer's behavior and that you should know about to get the most out of the Designer.
To view the Designer's options, open the Tools menu, select Options, open the Windows Forms Designer branch, and select the General page to display the dialog shown in Figure 4-1.
The following list describes the most important of these settings.
Optimized Code Generation — Determines whether Visual Studio generates optimized code. This setting is here instead of some more code-oriented part of the Options dialog because some controls may be incompatible with code optimization.
Grid Size — Determines the horizontal and vertical dimensions of the sizing grid for use when LayoutMode is SnapToGrid.
LayoutMode — Determines whether Visual Studio uses snap-to-grid or snap lines. If this is SnapToGrid, objects automatically snap to the nearest grid point when you drag or resize them. When this is SnapLines, resized controls automatically snap to lines that align with the edges or centers of other controls, or with the form's margins. Both of these options make it easy to build controls that are consistently sized and that align along their edges. The two options have a very different feel, however, so you might want to experiment with both to see which one you like best.
Automatically Open Smart Tags — Determines whether Visual Studio displays smart tags by default.
EnableRefactoringOnRename — Determines whether Visual Studio performs refactoring when you rename a control. (Refactoring is the process of restructuring the code, hopefully to make it better.) If this setting is True and you change a control's name, Visual Studio updates any code that uses that control so it uses the new name. If this setting is False and you rename a control, any code that refers to the control still uses its old name, so the code will no longer work.
AutoToolboxPopulate — Determines whether Visual Studio adds components built by the solution to the Toolbox window.
The Windows Forms Designer allows you to add controls to a form in several ways.
First, if you double-click a control on the Toolbox, Visual Studio places an instance of the control on the form in a default location and at a default size. You can then use the mouse to move and resize the control.
Note
When you use this method, the new control is placed inside the currently selected container on the form. If the currently selected control is a GroupBox, the new control is placed inside the GroupBox. If the currently selected control is a TextBox that is inside a Panel, the new control is placed inside the Panel.
Second, if you click a control in the Toolbox, the mouse cursor changes while the mouse is over the form. The new cursor looks like a plus sign with a small image of the control's Toolbox icon next to it. If you click the form, Visual Studio adds a control at that location with a default size. Instead of just clicking, you can click and drag to specify the new control's location and size. After you place the new control, the mouse returns to a pointer cursor so you can click existing controls to select them.
Note
If you hold down the Control key when you click or drag on the form, the Designer adds the new control to the form and keeps the control's Toolbox tool selected so you can add another instance of the control. For example, suppose you need to create a series of TextBoxes to hold a user's name, street, city, state, and ZIP code. Select the TextBox tool in the Toolbox. Then you can quickly use Ctrl+Click five times to create the TextBoxes. Press the Escape key to stop adding TextBoxes and then drag them into their correct positions.
When you first create a control, the Designer selects it. The Designer indicates that the control is selected by surrounding it with white boxes. In Figure 4-2, the Button2 control is selected.
To select a control on the Designer later, simply click it.
You can click and drag to select a group of controls. As you drag the mouse, the Designer displays a rectangle so you can tell which controls will be selected. When you release the mouse button, all of the controls that overlap the rectangle at least partly are selected.
When you select a group of controls, the Designer surrounds most of them with black boxes. It surrounds a special "master" control with white boxes. In Figure 4-3, four buttons are selected. Button1 is the "master" control so it is surrounded by white boxes.
The Designer uses the "master" control to adjust the others if you use the Format menu's commands. For example, if you use the Format
To change the "master" control, simply click the control that you want to use as the "master."
After you have selected some controls, you can Shift+Click or Ctrl+Click to add and remove single controls from the selection. You can Shift+Click-and-drag or Ctrl+Click-and-drag to add and remove groups of controls from the selection.
A particularly useful technique for building a series of similar controls is to build one and then use copy and paste to make others.
For example, to build the name, street, city, state, and ZIP code TextBoxes described in the previous section, you could start by adding the Name TextBox to the form. Next, set all of the properties for the control that will be shared by the other controls. For example, you may want to adjust the TextBox's width, set its MaxLength property to 20, and set its Anchor property to "Top, Left, Right" so it resizes horizontally when its container resizes. Now select the control on the Designer and press Ctrl+C to copy it. Then press Ctrl+V repeatedly to make copies for the other controls. Drag the controls into position and you have quickly built all of the controls with their shared properties already set.
You can also use copy and paste to copy a group of controls. For example, suppose you want to make name, street, city, state, and ZIP code TextBoxes but you also want Label controls to the left of the TextBoxes. First create the name Label and TextBox, set their properties, and position them so they are lined up vertically and the Label is to the left of the TextBox as desired. Click and drag to select both controls and then press Ctrl+C to copy them both. Now when you press Ctrl+V, the Designer makes a copy of the Label and the TextBox. The copies are lined up vertically and the Label is to the left of the TextBox as in the originals. The new controls are even both selected so you can use the mouse to grab them both and drag them into position.
Moving a control in the Windows Forms Designer is easy. Simply click and drag the control to its new position.
To move a group of controls, select the controls that you want. Then click one of the controls and drag to move the whole group.
Note that you can drag controls in and out of container controls such as the FlowLayoutPanel, GroupBox, Panel, and PictureBox. When you drag a control into a new container, the mouse cursor acquires a little fuzzy rectangle on the lower right. If you are dragging a control and you see this appear, you know that dropping the control at the current position will move it into a new container. The new container indicator appears if you are dragging a control from the form into a container, from a container onto the form, or from one container to another.
Resizing a control is almost as easy as moving one. Click a control to select it. Then click and drag one of the white boxes surrounding the control to change its size.
To resize a group of controls, select the group. Then click and drag one of the boxes surrounding one of the controls. When you drag the mouse, the control beside the box you picked is resized as if it were the only control selected. The other selected controls resize in the same manner. For example, if you widen the clicked control by eight pixels, all of the other controls widen by eight pixels, too.
The Format menu contains several submenus that hold tools that make arranging controls easier. For example, the Format menu's Align submenu contains commands that let you align controls vertically and horizontally along their edges or centers.
For a description of this menu's commands, see the section "Format" in Chapter 2, "Menus, Toolbars, and Windows." (Or just experiment with these commands — they aren't too complicated.)
For more information about how the selection's "white box master" control determines how other controls are adjusted, see the section "Selecting Controls" earlier in this chapter.
When you select a control, the Properties window allows you to view and edit the control's properties. For most properties, you can simply click the property and type a new value for the control. Some properties are more complex than others and provide drop-down lists or special dialogs to set the property's value. Most of the editors provided for setting property values are fairly self-explanatory, so they are not described in detail here.
In addition to using the Properties window to set a single control's properties one at a time, you can quickly set property values for groups of controls in a couple of ways. The following sections describe some of the most useful of these techniques.
If you select a group of controls, you can sometimes use the Properties window to give all of the controls the same property value all at once. For example, suppose you select a group of TextBoxes. Then you can use the Properties window to give them the same values for their Anchor, Text, MultiLine, Font, and other properties simultaneously.
Sometimes, this even works when you select different kinds of controls at the same time. For example, if you select some TextBoxes and some Labels, you can set all of the controls' Text properties at the same time. You cannot set the TextBoxes' MultiLine properties because the Labels do not have a MultiLine property.
When you select a control on the Windows Forms Designer, the Properties window initially selects a property for the control. The property selected depends on the kind of control you select and on the property currently selected in the Properties window.
If the newly selected and previously selected controls both have the currently selected property, the Properties window keeps that property selected. Otherwise the Properties window selects the default property for the newly selected control.
For example, suppose you select a Label control on the Designer and then click the TabIndex property in the Properties window. Now suppose you select a TextBox in the Designer. Because the TextBox also has a TabIndex property, that property remains selected in the Properties window.
In contrast, suppose you select a Button and click the Text property. Now suppose you click on a ListBox. The ListBox control doesn't have a Text property so the Properties window selects its default property (which is Items).
Because the Properties window tries to keep the same property selected, you can easily give a series of controls different values for the same property. For example, suppose you copy and paste to make a series of TextBoxes, and you want to give them good names. Select one TextBox, click its Name property in the Properties window, and type the new name (for example, txtName). Now click a different TextBox on the Windows Forms Designer. The Name property is still selected in the Properties window. If you immediately type this control's name (for example, txtStreet), the Properties window assigns the control the new name. You can repeat this process of selecting a new TextBox and typing its name very quickly.
Many controls display a smart tag when you select them on the Designer. The smart tag looks like a little box containing a right-pointing triangle. When you click the smart tag, a small dialog appears to let you perform common tasks for the control quickly and easily.
Figure 4-4 shows a PictureBox with the smart tag expanded. Because the smart tag's dialog is visible, the smart tag indicator shows a left-pointing triangle. If you click this, the dialog disappears.
Figure 4.4. The PictureBox control's smart tag lets you choose an image, set the control's SizeMode, or dock the control in its container.
The PictureBox control's smart tag dialog lets you choose an image for the control, set the control's SizeMode, or dock the control in its container. These actions set the control's Image, SizeMode, and Dock properties.
Many controls, particularly the more complicated kinds, provide smart tags to let you perform common actions without using the Properties window.
After you have added the appropriate controls to a form and set their properties, the next step is to add code to the form that responds to control events and that manipulates the controls.
You use the code editor to write code that responds to control events. The code editor is described in Chapter 6, "Visual Basic Code Editor," but you can open the code editor from the Windows Forms Designer.
An event handler is a code routine that catches an event raised by a control and takes some action. Almost all program action is started from an event handler. Even actions started automatically by a timer begin when an event handler catches a timer's events.
If you double-click a control on the Windows Forms Designer, Visual Studio creates an empty event handler to handle the control's default event and it opens the event handler in the code editor. For example, the following code shows the event handler the IDE built for a Button control named Button1. The default event for a Button is Click so this code is a Click event handler. (Note that I added the line continuation in the first line so it would fit in the book. Visual Studio makes that all one long line.)
Private Sub Button1_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles Button1.Click End Sub
Another way to build an event handler and open the code editor is to select the control on the Windows Forms Designer. Then click the Events icon (the lightning bolt) near the top of the Properties window to make the window show a list of events for the control as shown in Figure 4-5. Double-click an event in the window to create an event handler for it and to open it in the code editor.
If you select more than one control in the Windows Forms Designer and then double-click an event, Visual Studio makes an event handler that catches the event for all of the selected controls. To create the following event handler, I selected three Buttons and double-clicked their Click event:
Private Sub Button2_Click(ByVal sender As System. Object, _ ByVal e As System.EventArgs) _ Handles Button3.Click, Button2.Click, Button1.Click End Sub
The event handler's name is Button2_Click instead of Button1_Click or some other name because Button2 was the "white box master" control for the selected controls. See the section "Selecting Controls" earlier in this chapter for more information about a selection's "master" control.
The Windows Forms Designer allows you to build forms for use in Windows applications. It lets you add controls to a form, and resize and move the controls. Together with the Properties window, it lets you view and modify control properties, and create event handlers to interact with the controls.
This chapter introduces the Windows Forms Designer and explains how you can take advantage of its features. Future chapters provide much more of the detail necessary for building forms. Chapter 8, "Selecting Windows Forms Controls," and Chapter 9, "Using Windows Forms Controls," provide more information about the kinds of controls you can use with the Windows Forms Designer. Chapter 10, "Windows Forms," says a lot more about how Windows Forms work and what you can do with them.
Chapter 5, "WPF Designer," describes the designer that you use to build Windows Presentation Foundation forms. In some ways it is similar to the Windows Forms Designer. For example, you use the Toolbox to place controls on the form, and you use the Properties window to view and edit control properties much as you do when using the Windows Forms Designer.