This lesson describes general principles of creating and configuring controls. You will learn common properties of controls, how to change the properties of controls at design time or at run time, and how to control the layout of your controls. You will learn the various mechanisms the IDE exposes to modify controls quickly, and you will learn how to design your user interface in accordance with best practices.
After this lesson, you will be able to:
■ Modify the size of a control at design time.
■ Modify the location of a control at design time.
■ Anchor a control within a Windows Form or other container control.
■ Dock a control within a Windows Form or other container control.
■ Modify control properties by using the Properties window.
■ Modify control properties by using SmartTags.
■ Manage the allocation of controls in a Windows Form by using the Document Outline window.
■ Configure controls in a Windows Form at run time to ensure that the user interface follows best practices.
Estimated lesson time: 45 minutes
Overview of Controls
Controls are components that combine a graphical interface with pre-designed func
tionality. Controls are reusable units of code that are designed to fulfill particular tasks.
For example, the TextBox control is designed to display text and receive textual input from the user, and it contains properties, methods, and events that facilitate these tasks.
All controls inherit from the base class Control and, as such, share a variety of proper
ties relating to size, location, and other general aspects of controls. Table 2-1 describes some of the common properties of controls.
Table 2-1 Common Properties of Controls Property Description
Anchor Determines how the control is anchored in its parent form or container control.
Table 2-1 Common Properties of Controls Property Description
BackColor Gets or sets the BackColor of the control.
BackgroundImage Represents the image that is painted as the background image of the control.
CausesValidation Represents whether a control causes validation; validation enables you to verify that user input meets specific formatting and value requirements.
ContainsFocus Indicates whether this control or one of its child controls has the focus.
Controls Gets the collection of controls contained within this control.
Used only for containers.
Cursor Represents the cursor that is used when the mouse pointer is over this control.
Dock Determines how the control is docked in its parent form or container control.
Enabled Gets or sets whether the control is enabled. If a control is not enabled, it will appear grey and cannot be selected or edited.
Font Gets or sets the font used to display text by this control.
ForeColor Represents the color used in the foreground of this control, primarily for displaying text.
HasChildren Gets a value that indicates if this control has any child controls.
Height Represents the height of the control in pixels.
Location Indicates the location of the upper left-hand corner of this control relative to the upper left-hand corner of its parent form or container control.
MaximumSize Gets or sets the maximum size for the control.
MinimumSize Gets or sets the minimum size for the control.
Table 2-1 Common Properties of Controls Property Description
Name Represents the name used to refer to the control in code. This property can be altered only at design time and cannot be modified at run time.
Parent Gets or sets the parent form or container control for this con
trol. Setting this property adds the control to the new parent’s controls collection.
Region Gets or sets the window region associated with the control.
Size Represents the size of the control in pixels.
TabOrder Indicates in what order the control will be selected when the Tab key is used to navigate from control to control.
Tag Enables the programmer to store a value or object associated with the control.
Text Gets or sets the text associated with the control. The text might or might not be displayed, depending on the type of control and other property settings.
Visible Indicates whether the control is visible.
Width Represents the width of the control in pixels.
Configuring Controls at Design Time
As seen in Chapter 1, you can add a control to a form or container control at design time by dragging it from the Toolbox, selecting it in the Toolbox and clicking the form, or double-clicking the control in the Toolbox. Using any of these methods, you can add the control to the design surface. Once the control is in the Designer, you can modify its properties. Many of the properties of a control can be adjusted graphically in the designer by using the mouse. For other properties, you can modify control properties in the Properties window.
Control Size and Location
The method of modifying a control with the mouse is intuitive and allows you to adjust the control to exactly the desired size. You adjust the size of a control with the
mouse by first selecting the control, usually by clicking it in the Designer. This causes the control to be outlined by white squares and a dotted line as shown in Figure 2-1.
Figure 2-1 A selected control in the designer
Once the control has been selected, you can resize it in the Designer by grabbing an edge or a corner and dragging it with the mouse.
You can also resize a control in the Properties window by modifying the Size property.
The Size property has two components, Width and Height, which represent the width and height of the control in pixels. You can modify these individual components by expanding the Size property and typing a new value for one of the components in the Property Grid, or you can modify the Size property directly. The control is resized accordingly.
You can choose one of two ways to resize a control.
� To resize a control at design time
1. Select the control, and then drag a corner or an edge to the appropriate size.
2. Modify the Size property in the Property Grid by either changing the Size prop
erty directly or expanding the Size property and changing the Height or Width.
The designer also provides an easy way to set the location of a control on a form or container control. The location of a control can be changed graphically by grabbing the middle of the control with the mouse and dragging it to the new location.
You can also set the location of the control by modifying the Location property in the Property Grid. The Location property represents the coordinates of the upper left-hand corner of the control relative to the upper left-hand corner of the parent form or con
tainer control. The Location property has two components, X and Y. You can modify the Location property directly in the Property Grid, or you can expand the Location property and individually set the X or Y values. The property will relocate to the new location.
You can choose one of two ways to change the location of a control.
� To change the location of a control at design time
1. Grab the middle of the control with the mouse and drag it to the appropriate location.
2. Set the Location property of the control in the Property Grid, either by setting the Location property directly or by expanding the Location property and modifying the values of X or Y as appropriate.
You can also reposition a group of controls graphically with the mouse. You must first select all of the controls that you want to move, either by outlining the appropriate controls with the mouse or by holding down the Ctrl key and clicking each control in turn. A group of selected controls is shown in Figure 2-2.
Figure 2-2 A group of selected controls in the Designer
Once the group of controls is selected, you can move the group by grabbing the mid
dle of one of the controls and moving it with the mouse.
The Layout Toolbar
The Layout toolbar provides a quick and easy way to accomplish many of the control layout tasks required at design time. The Layout toolbar is not one of the default tool- bars, so you might need to add it to the IDE. You can add the Layout toolbar by select
ing the View menu, choosing Toolbars, and then selecting Layout. The Layout toolbar is shown in Figure 2-3.
Figure 2-3 The Layout toolbar
The Layout toolbar allows you to adjust the vertical and horizontal spacing of a group of controls. The toolbar buttons associated with these tasks are shown in Figure 2-4.
Figure 2-4 Horizontal and vertical spacing buttons
You can apply any of these layout buttons to a group of controls by selecting the group of controls and then clicking the appropriate button.
� To adjust control spacing with the Layout toolbar
1. If necessary, add the Layout toolbar to the IDE by selecting the View menu, choosing Toolbars, and then selecting Layout.
2. Select the group of controls that you want to adjust.
3. Adjust the control spacing by clicking the appropriate button.
The Layout toolbar also contains buttons that allow you to align the controls in the designer. The buttons involved in alignment are shown in Figure 2-5.
Figure 2-5 Control alignment buttons
You can apply any of these alignment buttons to a group of controls by selecting the group of controls and then clicking the appropriate button.
� To adjust control alignment with the Layout toolbar
1. If necessary, add the Layout toolbar to the IDE by selecting the View menu, choosing Toolbars, and then selecting Layout.
2. Select the group of controls that you want to adjust.
3. Adjust the control spacing by clicking the appropriate button.
Snaplines
Snaplines are new features that give you visual aid and feedback when locating con
trols on a form or within a container control. When a control is dragged onto a form or container control, snaplines appear, providing cues relating to control alignment.
When a control is dragged near the edge of a form, container control, or other control, a snapline appears, indicating the distance represented by the Margin property. Addi
tionally, snaplines indicating vertical and horizontal alignment of control edges appear when a control that is being dragged comes into alignment with an adjacent control. When a snapline appears, you can drop the control to create an aligned user interface. Horizontal, vertical, and margin snaplines are shown in Figure 2-6.
Figure 2-6 Snaplines
If snaplines are disabled, you can enable them in the Options dialog box as described in the following steps.
� To enable snaplines
1. From the Tools menu, select Options to open the Options dialog box.
2. In the left-hand pane, expand Windows Forms Designer and select General.
3. In the Property Grid, set LayoutMode to SnapLines.
4. Click OK.
Quick Check
1. What is the purpose of Snaplines?
2. What can you use the Layout Toolbar for?
Quick Check Answers
1. Snaplines appear at design time and help you align controls to the form or to each other.
2. The Layout toolbar allows you to align controls on a form and adjust their spacing.
Modifying Control Properties at Design Time
Although you can modify properties of controls such as location and size by manipu
lating the control in the designer, there are other mechanisms that allow you to set control properties in the designer, including the Properties window, SmartTags, and the Document Outline window.
The Properties Window
The primary interface for setting control properties is the Properties window, which exposes the properties of a form, component, or control that can be set at design time.
You can set property values for most properties by selecting the property and typing a new value for the property into the Properties window. For some properties, such as the Dock and Anchor properties, the Properties window provides specialized graphical interfaces that assist in setting the property value. The Properties window is shown in Figure 2-7.
Figure 2-7 The Properties window
If the Properties window is not visible, you can open it with the following procedure.
� To open the Properties window
From the View menu, choose Properties window or press F4.
� To set a property in the Properties window
1. With the mouse, click the property you want to set.
2. Type the new value for the property, or use the specialized interface if this prop
erty provides one.
Dock and Anchor Properties
The Dock and Anchor properties allow you to define how a control behaves within the confines of its parent form or container control. The Anchor property defines a con
stant distance between one or more edges of a control and the corresponding edges of the control’s parent form or container control. The Dock property allows you to attach a control to an edge of the parent form or container control or to fill the form completely.
The Anchor Property
The Anchor determines which edges of the control, if any, maintain a constant dis
tance from the edge of its parent form or container control when the parent is resized.
The default value for this property is Top, Left, which means that the top and left edges of the control will maintain a constant distance from the corresponding edges of its parent. This has the effect of the control maintaining both its position and size when the parent is resized. If opposite edges (for example, right and left) are both set in the Anchor property, the control will stretch when the parent is resized. If neither of oppo
site edges is set in the Anchor property, the control will float when the parent is resized.
You set the Anchor property in the Property Grid. The Anchor property has a special interface (shown in Figure 2-8) that allows you to choose the edges to anchor.
Figure 2-8 Setting the Anchor property
� To set the Anchor property
1. In the Properties window, choose Anchor and click the drop-down box. The Anchor property visual interface appears.
2. Click the bars indicating the edges you want to anchor. When finished, click out
side of the Anchor property interface.
The Dock Property
The Dock property allows you to attach a control to the edge of its parent. For exam
ple, a control docked to the top edge of a form or container control will always be connected to the top edge of the parent control and will automatically resize in the left and right directions when its parent is resized. The Dock property can also be set to Fill, in which case, the control will grow to occupy all of the available space in the parent control. This setting is usually used with a container control, such as Split- Container or FlowLayoutPanel.
Like the Anchor property, the Dock property provides a graphical interface for setting the value, as shown in Figure 2-9.
Figure 2-9 Setting the Dock Property
� To set the Dock property
1. In the Properties window, choose the Dock property and click the drop-down box. The Dock property visual interface appears.
2. Click the box indicating the value you want to set the Dock property to.
Smart Tags
Some controls expose their most common tasks through smart tags. When present, smart tags appear as small boxes in the upper right-hand corner of the control, as shown in Figure 2-10.
Figure 2-10 A Combo box with a smart tag
When the smart tag is clicked, a box that facilitates the most common tasks appears, as shown in Figure 2-11.
Figure 2-11 Combo box smart tag tasks
� To modify control properties by using smart tags
1. For controls that expose smart tags, click the smart tag in the designer. A con
trol-specific Tasks box opens.
2. Use the Tasks box to perform common tasks associated with the control.
Document Outline Window
When creating forms that contain several container controls, the Document Outline window can be useful for allocating controls between the various containers. The Document Outline window graphically displays all of the controls and container con
trols that reside in a form. With the mouse, you can grab controls in the Document Outline window and move them from one container to another. You can also delete controls from the form by deleting them in the Document Outline window and add
them by copying them from the Toolbox and pasting them into the Document Out
line window. Figure 2-12 shows the Document Outline window.
Figure 2-12 The Document Outline window
� To open the Document Outline window
From the View menu, select Other Windows, and then select Document Outline; or press Ctrl+Alt+T.
� To move controls from one container to another in the Document Outline window 1. In the Document Outline window, grab the control you want to move with the
mouse.
2. Drag the control onto the name of the container control you want to add it to.
� To remove a control from a project with the Document Outline window
Select the control in the Document Outline window and press Delete. Note that, if you delete a container control in this fashion, you will also delete any contained controls.
� To add a control to a project with the Document Outline window 1. Right-click a control in the Toolbox and choose Copy.
2. In the Document Outline window, right-click the form or container control you want to add a new control to and choose Paste.
Best Practices for User Interface Design
How your user interface is composed influences how easily your application can be learned and used. Primary considerations for user interface design include:
■ Simplicity
■ Position of controls
■ Consistency
■ Aesthetics Simplicity
Simplicity is an important aspect of a user interface. An overly complex user interface makes an application more difficult to learn, resulting in lost productivity. A user interface should allow a user to quickly complete all tasks required by the program but should expose only the functionality needed at each stage of the application.
When designing your user interface, keep program flow and execution in mind. Con
trols that display related data should be grouped together on the form. Container con
trols can be used to organize related controls into distinct subsections of a form.
Controls such as list boxes, combo boxes, and check boxes can be used to display data and allow users to choose between preset options. Enable default values whenever possible. For example, if most of the intended users of an application will choose United States in a Country field, set United States as the default value for that field.
Note that you should always make it easy to override a default value when necessary.
Position of Controls
The location of controls on your user interface should reflect their relative importance and frequency of use. For example, if your form collects both required and optional information, the controls that collect required information are more important and, thus, should receive greater prominence in the user interface.
Because relatedness of information is an important consideration, controls that dis
play related information should be grouped together. For example, if you have a form that displays information about a customer, a purchase, or an employee, you can group each set of controls on a TabControl that allows the user to easily move back and forth between displays.