Choosing Controls

Keeping all of the intricacies of each of these controls in mind at once is a daunting task. With so many powerful tools to choose from, it’s not always easy to pick the one that’s best for a particular situation.

To simplify error-handling code, you should generally pick the most restrictive control that can accomplish a given task, because more restrictive controls give the user fewer options for entering invalid data.

For example, suppose that the user must pick from the choices Small, Medium, and Large. The application could let the user type a value in a TextBox control, but then the user could type Weasel. The program would need to verify that the user typed one of the valid choices and display an error message if the text was invalid. The program might also need to use precious screen real estate to list the choices so that the user can remember what to type.

A better idea would be to use a group of three RadioButton controls or a ComboBox with DropDownStyle set to DropDownList. Then the user can easily see the choices available and can only select a valid choice. If the program initializes the controls with a default value rather than leaving them initially undefined, it knows that there is always a valid choice selected.

The following sections summarize different categories of controls and provide some tips about when to use each.

Containing and Arranging Controls

These controls contain, group, and help arrange other controls. These controls include FlowLayoutPanel, TableLayoutPanel, GroupBox, Panel, TabControl, and SplitContainer.

The FlowLayoutPanel arranges the controls it contains in rows or columns. For example, when its FlowDirection property is LeftToRight, the control arranges its contents in rows from left to right. It positions its contents in a row until it runs out of room and then it starts a new row. FlowLayoutPanel is particularly useful for toolboxes and other situations where the goal is to display as many of the contained controls as possible at one time, and the exact arrangement of the controls isn’t too important.

The TableLayoutPanel control displays its contents in a grid. All the cells in a particular row have the same height, and all the cells in a particular column have the same width. In contrast, the FlowLayoutPanel, control simply places controls next to each other until it fills a row and then starts a new one. Figure 9-2 shows these two controls side by side.

Figure 9-2: FlowLayoutPanel places controls close together. TableLayoutPanel arranges controls in a grid.

A GroupBox control is good for grouping related controls or the RadioButton controls in a RadioButton group. (The RadioButton control is discussed later in this chapter in the section “Making Selections.”) It provides a visible border and caption so that it can help the user make sense out of a very complicated form.

The rule of thumb in user interface design is that a user can evaluate seven items plus or minus two at any given time. A list of five or six choices is manageable, but a list containing dozens of options can be confusing. By placing choices into categories visibly separated in GroupBox controls, you can make the interface much easier for the user to understand. Rather than trying to keep dozens of options straight all at once, the user can mentally break the problem into smaller pieces and consider each group of options separately.

The Panel control can also contain the RadioButton controls in a RadioButton group. It doesn’t display a visible border, however, so you must use some other method to ensure that the user can tell that the buttons form a group. For example, you could use several Panels in a row, each containing a column of RadioButton controls. Then the user would select one option from each column.

One of the Panel control’s more powerful features is its ability to automatically display scroll bars. If you set a Panel control’s AutoScroll property to True and the Panel resizes so that all of its contents cannot fit, it automatically displays the scroll bars so the user can still see all of the content. Scrolling back and forth can be cumbersome for the user, however, so this is not the best way to display data if the user must view it all frequently. If the user must jump back and forth between different controls inside a scrolling Panel, it may be better to use a TabControl.

TabControl displays data grouped by pages. The tabs enable the user to quickly jump from page to page. The control can display scroll bars if necessary, although that makes using the control much more awkward. TabControl works well if the data falls into natural groupings that you can use for the tab pages. It doesn’t work as well if the user must frequently compare values on one page with those on another, forcing the user to jump back and forth.

The SplitContainer control allows the user to divide an area between two adjacent regions. SplitContainer contains two Panel controls in which you can place your own controls. When the user drags the splitter between the two panels, the control resizes the panels accordingly. You can set the Panels’ AutoScroll properties to True to make them automatically provide scroll bars when necessary.

SplitContainer is helpful when the form isn’t big enough to hold all the data the program must display, and the user can trade area in one part of the form for area in another. It is particularly useful when the user must compare values in the two areas by viewing them at the same time.

While you can nest SplitContainers inside other SplitContainers, they are easiest to use when they separate only two areas. Large groups of SplitContainers separating many areas are usually clumsy and confusing.

These container controls help arrange the controls they contain. The Anchor and Dock properties of any controls inside the containers work relative to the containers. For example, suppose that you place a series of buttons with Anchor = Top, Left, Right inside a SplitContainer so that they are as wide as the Panel containing them. When you drag the splitter, the buttons automatically resize to fit the width of their Panel.

Making Selections

Selection controls enable the user to choose values. If you use them carefully, you can reduce the chances of the user making an invalid selection, so you can reduce the amount of error-handling code you need to write.

These controls include CheckBox, CheckedListBox, ComboBox, ListBox, RadioButton, DateTimePicker, MonthCalendar, DomainUpDown, NumericUpDown, TrackBar, HScrollBar, and VScrollBar.

CheckBox enables the user to select an option or not, independently of all other selections. If you want the user to select only one of a series of options, use a RadioButton instead. If a form requires more than, say, five to seven CheckBox controls that have related purposes, consider using a CheckedListBox instead.

The CheckedListBox control enables the user to select among several independent options. It is basically a series of CheckBox controls arranged in a list that provides scroll bars if necessary.

The ComboBox control enables the user to make one brief selection. This control is particularly useful when its DropDownStyle property is set to DropDownList because then the user must pick a value from a list. If you want to allow the user to select a value or enter one that is not on the list, set the control’s DropDownStyle to Simple or DropDown. This control does roughly the same things as a simple ListBox but takes less space.

The ListBox control displays a list of items that the user can select. You can configure the control to let the user select one or more items. A ListBox takes more room than a ComboBox but can be easier to use if the list is very long. If you have a long list and want to allow the user to select many items, it is relatively easy for the user to accidentally deselect all of the previous selections by clicking on a new item. To make things easier for the user, you should consider using a CheckedListBox, which doesn’t have that problem.

The RadioButton control lets the user pick one of a set of options. For example, three RadioButton controls might represent the choices Small, Medium, and Large. If the user selects one, Visual Basic automatically deselects the others. This control is useful when the list of choices is relatively small, and there is a benefit to allowing the user to see all the choices at the same time. If the list of choices is long, consider using a ListBox or ComboBox.

The DateTimePicker and MonthCalendar controls enable the user to select dates and times. They validate the user’s selections, so they are generally better than other controls for selecting dates and times. For example, if you use a TextBox to let the user enter month, date, and year, you must write extra validation code to ensure that the user doesn’t enter February 29, 2007.

The DomainUpDown and NumericUpDown controls let the user scroll through a list of values. If the list is relatively short, a ListBox or ComboBox may be easier for the user. The DomainUpDown and NumericUpDown controls take very little space, however, so they may be helpful on very crowded forms. By holding down one of the controls’ arrow buttons, the user can scroll very quickly through the values, so these controls can also be useful when they represent a long list of choices.

The TrackBar control lets the user drag a pointer to select an integer value. This is usually a more intuitive way to select a value than a NumericUpDown control, although it takes a lot more space on the form. It also requires some dexterity if the range of values allowed is large.

The HScrollBar and VScrollBar controls let the user drag a “thumb” across a bar to select an integral value much as the TrackBar does. HScrollBar, VScrollBar, and TrackBar even have similar properties. The main difference is in the controls’ appearances. On one hand, the two scroll bar controls allow more flexible sizing (the TrackBar has definite ideas about how tall it should be for a given width), and they may seem more elegant to some users. On the other hand, users are familiar with their normal purpose of scrolling an area on the form, so using them as numeric selection bars may sometimes be confusing.

Entering Data

Sometimes it is impractical to use the selection controls described in the previous section. For example, the user cannot reasonably enter biographical data or comments using a ComboBox or RadioButton.

The RichTextBox, TextBox, and MaskedTextBox controls let the user enter text with few restrictions. These controls are most useful when the user must enter a large amount of textual data that doesn’t require any validation.

The TextBox control is less complex and easier to use than the RichTextBox control, so you may want to use it unless you need the RichTextBox control’s extra features. If you need those features (such as multiple fonts, indentation, paragraph alignment, superscripting and subscripting, multiple colors, more than one level of undo/redo, and so forth), you need to use a RichTextBox.

The MaskedTextBox control is a TextBox control that requires the user to enter data in a particular format. For example, it can help the user enter a phone number of the form 234-567-8901. This is useful only for short fields where the format is tightly constrained. In those cases, however, it reduces the chances of the user making mistakes.

Displaying Data

These controls display data to the user. They include Label, DataGridView, ListView, TreeView, and PropertyGrid.

The Label control displays a simple piece of text that the user can view but not select or modify. Because you cannot select the text, you cannot copy it to the clipboard. If the text contains a value that you think the user might want to copy to the clipboard and paste into another application (for example, serial numbers, phone numbers, e-mail addresses, Web URLs, and so forth), you can use a TextBox control with its ReadOnly property set to True to allow the user to select and copy the text.

The DataGridView control can display tablelike data. The control can also display several tables linked with master/detail relationships and the user can quickly navigate through the data. You can also configure this control to allow the user to update the data.

The ListView control displays data that is naturally viewed as a series of icons or as a list of values with columns providing extra detail. With a little extra work, you can sort the data by item or by detail columns.

The TreeView control displays hierarchical data in a treelike format similar to the directory display provided by Windows Explorer. You can determine whether the control allows the user to edit the nodes’ labels.

The PropertyGrid control displays information about an object in a format similar to the one used by the Properties window at design time. The control enables the user to organize the properties alphabetically or by category and lets the user edit the property values. Figure 9-3 shows a PropertyGrid control displaying information about an Employee object.

Figure 9-3: The PropertyGrid control displays an object’s properties.

Providing Feedback

These controls provide feedback to the user. These controls include ToolTip, HelpProvider, ErrorProvider, NotifyIcon, StatusStrip, and ProgressBar. Their general goal is to tell the user what is going on without becoming so obtrusive that the user cannot continue doing other things. For example, the ErrorProvider flags a field as incorrect but doesn’t prevent the user from continuing to enter data in other fields.

The ToolTip control provides the user with a brief hint about a control’s purpose when the user hovers the mouse over it. The HelpProvider provides the user with more detailed help about a control’s purpose when the user sets focus to the control and presses F1. A high-quality application provides both tooltips and F1 help for every control that could confuse the user. These features are unobtrusive and only appear if the user needs them, so it is better to err on the side of providing too much help rather than not enough.

The ErrorProvider control flags a control as containing invalid data. It is better to use selection controls that do not allow the user to enter invalid data, but this control is useful when that is not possible.

The NotifyIcon control can display a small icon in the taskbar notification area to let the user easily learn the application’s status. This is particularly useful for applications that run in the background without the user’s constant attention. If the application needs immediate action from the user, it should display a dialog or message box rather than relying on a NotifyIcon.

Tip 

The taskbar notification area, also called the Windows system tray, is the small area in the task bar usually on the right that displays the current time and icons indicating the status of various running applications.

The StatusStrip control displays an area (usually at the bottom of the form) where the program can give the user some information about its state. This information can be in the form of small images or short text messages. It can contain a lot more information than a NotifyIcon, although it is visible only when the form is displayed.

The ProgressBar indicates how much of a long task has been completed. Usually, the task is performed synchronously, so the user is left staring at the form while it completes. The ProgressBar lets the user know that the operation is not stuck.

Initiating Action

These controls make the program perform some action. These controls include Button, MenuStrip, ContextMenuStrip, ToolStrip, LinkLabel, TrackBar, HScrollBar, VScrollBar and Timer. All except the Timer control let the user initiate the action.

All of these controls interact with the program through event handlers. For example, the Button control’s Click event handler normally makes the program perform some action when the user clicks the button.

Other controls also provide events that can initiate action. For example, the CheckBox control provides CheckChanged and Click events that you could use to perform some action. By catching the proper events, you can use almost any control to initiate an action. Because the main intent of those controls is not to execute code, they are not listed in this section.

The Button control allows the user to tell the program to execute a particular function. A button is normally always visible on its form, so it is most useful when the user must perform the action frequently or the action is part of the program’s central purpose. For actions less frequently performed, use a MenuStrip or ContextMenuStrip control.

Items in a MenuStrip control also enable the user to make the program perform an action. You must perform more steps to open the menu, find the item, and select it than you must to click a button, so a Button control is faster and easier. On the other hand, menus take up less form real estate than buttons. You can also assign keyboard shortcuts (such as F5 or Ctrl+S) to frequently used menu items, making them even easier to invoke than buttons.

A ContextMenuStrip control provides the same advantages and disadvantages as a MenuStrip control. ContextMenuStrip is available only from certain controls on the form, however, so it is useful for commands that are appropriate only within specific contexts. For example, a Save command applies to all the data loaded by a program, so it makes sense to put it in a MenuStrip. A command that deletes a particular object in a drawing only applies to that object. By placing the command in a ContextMenuStrip control attached to the object, the program keeps the command hidden when the user is working on other things. It also makes the relationship between the action (delete) and the object clear to both the user and the program.

The ToolStrip control combines some of the best features of menus and buttons. It displays a series of buttons so they are easy to use without navigating through a menu. The buttons are small and grouped at the top of the form, so they don’t take up as much space as a series of larger buttons.

It is common to place buttons or ToolStrip buttons on a form to duplicate frequently used menu commands. The menu commands provide keyboard shortcuts for more advanced users, and the buttons make it easy to invoke the commands for less-experienced users.

The LinkLabel control displays text much as a Label control does. It also displays some text in blue with an underline, displays a special cursor when the user moves over that text, and raises an event if the user clicks the text. That makes the control appropriate when clicking a piece of text should perform some action. For example, on a web page, clicking on a link typically navigates to the link’s web page.

The TrackBar, HScrollBar, and VScrollBar controls let the user drag a “thumb” across a bar to select an integral value. As mentioned in the section “Making Selections” earlier in this chapter, you can use these controls to let the user select a numeric value. However, they can also be used to perform some action interactively. For example, the scroll bars are often used to scroll an area on the form. More generally, they are used to make the program take action based on some new value. For example, you could use a scroll bar to let the user select new red, green, and blue color components for an image. As the user changed a scroll bar’s value, the program would update the image’s colors.

The Timer control triggers some action at a regular interval. When the Timer control raises its Timer event, the program takes action.

Displaying Graphics

These controls display graphics, either on the screen or on a printout. These controls include Form, PictureBox, PrintPreviewControl, PrintDocument, and PrintPreviewDialog.

A Form (which can also display graphics) provides methods for drawing, but it’s often better to draw in a PictureBox control instead of the form itself. That makes it easier to move the drawing if you later need to redesign the form. For example, if you decide that the picture might be too big, it is easy to move a PictureBox control into a scrolling Panel control. It would be much harder to rewrite the code to move the drawing from the Form into a PictureBox control later.

PrintPreviewControl displays a print preview for a PrintDocument object. The program responds to events raised by the PrintDocument object. PrintPreviewControl displays the results within a control on one of the program’s forms.

The PrintPreviewDialog control displays graphics from a PrintDocument object much as a PrintPreviewControl does, but it provides its own dialog box. Unless you need to arrange the print preview in some special way, it is easier to use a PrintPreviewDialog rather than build your own preview dialog box with a PrintPreviewControl. The PrintPreviewDialog control provides many features that enable the user to zoom, scroll, and move through the pages of the preview document. Implementing those features yourself would be a lot of work.

Displaying Dialog Boxes

Visual Basic provides a rich assortment of dialog boxes that enable the user to make standard selections. Figuring out which of these dialog boxes to use is usually easy because each has a very specific purpose. The following table lists the dialog boxes and their purposes.

Open table as spreadsheet

Dialog	Purpose
ColorDialog	Select a color.
FolderBrowserDialog	Select a folder (directory).
FontDialog	Select a font.
OpenFileDialog	Select a file to open.
PageSetupDialog	Specify page set up for printing.
PrintDialog	Print a document.
PrintPreviewDialog	Display a print preview.
SaveFileDialog	Select a file for saving.

Supporting Other Controls

Many of the Visual Basic controls require the support of other controls. The two controls used most by other controls are ImageList and PrintDocument. These controls also include DataConnector and DataNavigator.

The ImageList control holds images for other controls to display. Your code can also take images from an ImageList control to use in whatever way it needs.

The PrintDocument control provides support for printing and print previewing. It generates the graphics sent to the printer, PrintPreviewDialog, or PrintPreviewControl.

The DataConnector control provides a link between a data source and controls bound to the connector. The program can use the DataConnector’s methods to navigate, sort, filter, and update the data, and the control updates its bound controls appropriately.

The DataNavigator control provides methods for navigating through a data source such as DataConnector.