Anda di halaman 1dari 41

Color profile: Generic CMYK printer profile

All-In-One
Composite Default screen All-In-One
/ MCAD/MCSD
/ MCSD Visual
Visual
C#C#
.NET
.NET
Certification
Certification
All-in-One
All-in-One
Exam
Exam
Guide
Guide
/ Rempel
/ Rempel
& Lind
& Lind
/ 222443-6
/ 222443-6
/ Chapter
/ Chapter
19
19

User-Interface
Components
CHAPTER

19
In this chapter, you will
• Learn how to work with controls
• Explore the Toolbox controls
• Become familiar with common dialog boxes
• Learn how to create menus
• Be introduced to validation of user input

In this chapter, we will explore the properties and behaviors of the various controls in
the Toolbox. If you have been working with previous versions of the Visual C++ or
Visual Basic languages, you may want to travel quickly through this chapter. If you’re
less familiar with the Toolbox controls, you’ll probably want to spend a bit more time
exploring the material here.

The .NET Framework includes several basic controls that enhance the look of your
Windows applications. Knowing how to work with these controls is an important part
of creating applications that give the most assistance to the user. You may have worked
with several of these controls in previous versions of Microsoft Visual products—they
date back to the early days of Windows programming. However, you need to under-
stand and be able to work with the properties, methods, and events that are exposed to
the developer. For the exam, you will need to know how to work with groups of con-
trols. We will look at setting the properties of multiple controls, working with collec-
tions of controls, and configuring the order through which the controls are tabbed.
Of equal importance is the ability to add functional menus to your application.
Towards that goal, we will explore top-level menus, submenus, and context menus.
A context menu is one that appears when the user right-clicks somewhere within a form.
We will also investigate the events that are triggered by using the menus.
Microsoft will also test your understanding of providing user assistance in your appli-
cations. We will look at adding validation code that will determine the soundness of the
user’s input. Two validation techniques will be covered—using the ErrorProvider
control and the Validation event. User assistance can also mean providing meaning-
ful help to the application. With that goal in mind, we’ll look at the HelpProvider
control and talk about ToolTips.

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:38 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
All-In-One
screen / MCAD/MCSD
/ MCSD Visual
Visual
C#C#
.NET
.NET
Certification
Certification
All-in-One
All-in-One
Exam
Exam
Guide
Guide
/ Rempel
/ Rempel
& Lind
& Lind
/ 222443-6
/ 222443-6
/ Chapter
/ Chapter
19
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


2

Working with Controls


There are some common features of controls that warrant discussing in this chapter. The
problem of programmatically resizing controls when the form resizes has traditionally been
a difficulty that GUI developers face. In this section, we will look at how C# resolves this is-
sue. You will also find times that you want to align controls to the position of the form. You
may also want to designate the control with focus, making it the “active” control that
responds to the ENTER key being pressed, or making it the selected control. Visual C# .NET
also now has the capability of docking controls, much like windows can be docked.

Specifying a Control’s Location on a Form


When a form is capable of being resized by the user, you need to be aware of how your con-
trols will be positioned after the form is resized. When the user resizes the form, the default
behavior is for the controls to maintain their position and size, but this may not be the
desired outcome. Consider the first illustration, the start of our college application. We have
a tabbed control that should expand when the form resizes, and a row of buttons at the bot-
tom of the form that we would like to anchor to the bottom of the form accordingly. How-
ever, when the form is resized, the outcome is as shown in the second illustration.

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:38 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


3
In the resized form, the TabControl (with the two tabs—Student and Courses)
remains at its original size, and the buttons retain their alignment and size beneath the
TabControl. In most cases, we would prefer the TabControl to size according to the
resizing of the form, and we would like the buttons to do the same.

Anchoring a Control
One way to ensure that a control maintains its position when a form is resized is by set-
ting the Anchor property. By anchoring a control, you ask Visual C# to maintain the
distance between the control and the form. By setting the Anchor property to a certain
position, you will ensure a more pleasing outcome when resizing.
The following illustration shows our college project and the TabControl’s Anchor
property has been set to Top, Bottom, Left, Right. Notice the Anchor property drop-down
box—you can set the anchor to position at any combination of Top, Bottom, Left, and
Right. By default, the Anchor property is set to Top and Left. To clear any part of the
anchor, just click on the shaded rectangle.

PART IV

Let’s observe what happens when we resize the form. Try to resize your form when
the TabControl is set to anchor to Top, Bottom, Left, and Right. As you will see, things
are not quite right yet. The buttons are shifting to bizarre locations—as a matter of fact,
we have even lost the Edit button.
Go into the properties of the buttons now (select them as a group) and set the Anchor
property to Bottom and Left. Now when we run our application, the buttons stay down at
the bottom of the form when we resize.

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:39 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


4
Just a word of warning—this won’t solve all of your resizing problems. You may still
have to be creative with complicated forms. You may need the help of the Dock prop-
erty (covered in the next section) and some coding.

EXAM TIP By using a few panels on your form, you can set controls on the
panel and then align the controls using both the Anchor and Dock properties.
(You will see the Dock property in the next section.) You will still have to add
code for complicated forms, but if you recall resizing in earlier versions of Visual
C++ or Visual Basic, you will be pleased by the small amount of coding necessary.

Docking a Control
Another cool technique offered in Visual C# .NET is the docking of controls to ensure
their positions upon resizing. If you recall our study of the Visual Studio .NET environ-
ment, windows can be docked or undocked. Docking means that the window becomes
“attached” to a certain part of the background form and moves and sizes with the form.
We have taken our previous example and reverted the Anchor property back to its de-
fault of Top and Left, and we have set the Dock property of the TabControl. The Dock
property window gives you a choice of five different positions: Top, Left, Bottom, Right,
and Middle. Select the Left panel, and rerun the form. Notice that the TabControl is
“stuck” to the left side of the form and fills the entire side. There is now no space for our
buttons and, as such, they really become part of the TabControl, which is not our
desired result.
Again, you should note that it is the combination of the Dock and Anchor properties,
along with some tricky coding, that will achieve the final aesthetically pleasing result. If
you are a Java programmer, you may have spent some time with the different layout man-
agers, and you may find the Dock property to be similar to the BorderLayoutManager
whereby “controls” are set in the North, South, East, West, or Center of the form layout.
By experimenting with setting the Dock property and using panels to hold your controls,
you will find that C# has employed a very similar way of setting control positions and
holding them in that position when the form resizes.

Aligning Controls on a Form


If you are coding your form within Visual Studio .NET, you will find that you can use the
Format menu to set options for working with your controls. When you work with the
Format menu, you set the options in terms of a primary control. For example, we will
select the three buttons on our form and make sure that the last button selected is the
“Add” button. This will become the primary control to which the other controls align.
Observe the next illustration—we selected the controls using the CTRL key and choosing
the Add button last, and you can see that the primary control has dark resizing handles
around it.

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:39 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


5

Table 19-1 illustrates the options that are available through the Format menu.

Menu Item Submenu Item Description


Align Lefts Aligns all controls to the primary control.

PART IV
Centers
Rights
Tops
Middles
Bottoms
to Grid
Make Same Size Width Allows multiple controls to be resized on the form.
Size to Grid
Height
Both
Horizontal Spacing Make Equal Adjusts the horizontal spacing between the controls.
Increase
Decrease
Remove
Vertical Spacing Make Equal Adjusts the vertical spacing between the controls.
Increase
Decrease
Remove
Center in Form Horizontally Controls the centering of the controls on the form.
Vertically
Order Bring to Front Determines whether a control will take a foreground
Send to Back spot, no matter what is placed in front of it.
Lock Controls Locks all the controls on the form and eliminates any
chance of moving or resizing the controls.
Table 19-1 The Format Menu

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:39 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


6
Let’s work with the Format menu. Start with a form where the buttons are all different
sizes and are not properly aligned on the form. When you select the buttons (being sure
to select the Add button last), you can then click Format | Make Same Size | Both. Once
this is done, all the buttons will take on the size of the Add button. You can then select
Format | Horizontal Spacing | Make Equal, and the buttons will have the same amount
of space between them.
For interest’s sake, let’s look at the Windows Form Designer and examine the code
that has been created behind the scenes for us.

private void InitializeComponent()


{
this.tabControl1 = new System.Windows.Forms.TabControl();
this.tabStudents = new System.Windows.Forms.TabPage();
this.tabPage2 = new System.Windows.Forms.TabPage();
this.buttonAdd = new System.Windows.Forms.Button();
this.buttonEdit = new System.Windows.Forms.Button();
this.buttonDelete = new System.Windows.Forms.Button();
this.tabControl1.SuspendLayout();
this.SuspendLayout();
// tabControl1
this.tabControl1.Controls.AddRange(new System.Windows.Forms.Control[] {
this.tabStudents, this.tabPage2});
this.tabControl1.Location = new System.Drawing.Point(0, 24);
this.tabControl1.Name = "tabControl1";
this.tabControl1.SelectedIndex = 0;
this.tabControl1.Size = new System.Drawing.Size(544, 416);
this.tabControl1.TabIndex = 0;
// tabStudents
this.tabStudents.Location = new System.Drawing.Point(4, 22);
this.tabStudents.Name = "tabStudents";
this.tabStudents.Size = new System.Drawing.Size(536, 390);
this.tabStudents.TabIndex = 0;
this.tabStudents.Text = "Students";
// tabPage2
this.tabPage2.Location = new System.Drawing.Point(4, 22);
this.tabPage2.Name = "tabPage2";
this.tabPage2.Size = new System.Drawing.Size(568, 414);
this.tabPage2.TabIndex = 1;
this.tabPage2.Text = "Courses";
// buttonAdd
this.buttonAdd.Anchor = (System.Windows.Forms.AnchorStyles.Bottom |
System.Windows.Forms.AnchorStyles.Left);
this.buttonAdd.Location = new System.Drawing.Point(8, 456);
this.buttonAdd.Name = "buttonAdd";
this.buttonAdd.Size = new System.Drawing.Size(48, 56);
this.buttonAdd.TabIndex = 1;
this.buttonAdd.Text = "Add";
// buttonEdit
this.buttonEdit.Anchor = (System.Windows.Forms.AnchorStyles.Bottom |
System.Windows.Forms.AnchorStyles.Left);
this.buttonEdit.Location = new System.Drawing.Point(152, 456);
this.buttonEdit.Name = "buttonEdit";
this.buttonEdit.Size = new System.Drawing.Size(48, 56);
this.buttonEdit.TabIndex = 2;

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:39 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


7
this.buttonEdit.Text = "Edit";
// buttonDelete
this.buttonDelete.Anchor = (System.Windows.Forms.AnchorStyles.Bottom |
System.Windows.Forms.AnchorStyles.Left);
this.buttonDelete.Location = new System.Drawing.Point(296, 456);
this.buttonDelete.Name = "buttonDelete";
this.buttonDelete.Size = new System.Drawing.Size(48, 56);
this.buttonDelete.TabIndex = 3;
this.buttonDelete.Text = "Delete";
// MainForm
this.AutoScaleBaseSize = new System.Drawing.Size(5, 13);
this.ClientSize = new System.Drawing.Size(600, 525);
this.Controls.AddRange(new System.Windows.Forms.Control[] {
this.buttonDelete, this.buttonAdd, this.tabControl1, this.buttonEdit});
this.Name = "MainForm";
this.Text = "Form1";
this.Load += new System.EventHandler(this.MainForm_Load);
this.tabControl1.ResumeLayout(false);
this.ResumeLayout(false);
}

You can tell by looking through the code that the Location and Size properties have
been affected by our changes to the Visual Designer. Notice that this code is in the
InitializeComponent() method, which, as we discussed in the last chapter, is
the method that is called in the form’s constructor.

PART IV
One final option to quickly discuss is the Lock Controls option. When we set
the Locked property to True or select the Lock Controls option from the Format
menu (shown next), the controls are no longer capable of being moved or resized in the
Visual Designer.

EXAM TIP Microsoft will expect you to know how to lock controls for the
Windows exam. By setting the Lock property to True, you will find that the
controls are locked in position.

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:40 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
All-In-One
screen / MCAD/MCSD
/ MCSD Visual
Visual
C#C#
.NET
.NET
Certification
Certification
All-in-One
All-in-One
Exam
Exam
Guide
Guide
/ Rempel
/ Rempel
& Lind
& Lind
/ 222443-6
/ 222443-6
/ Chapter
/ Chapter
19
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


8
Managing Control Focus
One final area we need to investigate in this section is managing the focus of controls on
your form. When a control is in the forefront of the application, it is said to have focus.
This is the control that will respond when you press ENTER (although not all controls
will have functionality for the ENTER key). The control with focus is usually designated
by a darker border or dashes around the control. You can move the focus around the
controls on a form by pressing the TAB key.

EXAM TIP Microsoft considers configuring the order of tabs to be an


objective of the Windows exam. The TabIndex property controls the
order of tabs and is 0-based.

When you run the college application, you will notice that you can tab through the
controls on the form. If you created the form by adding the controls in order of appear-
ance, meaning the TabControl first, the Add button second, and so on, the order in
which you tab is the order in which they were added to the form.
Let’s add a new button. We have aligned the Add, Edit, and Delete buttons and made
them the same size. The new button is added, visually, before the other three buttons.
Yet when you press the TAB key, the first stop is the Add button. It was added to the form
first, so it is the first stop.
We can configure the tab order by using the TabIndex property. The first control
added to the form has a TabIndex value of 0 (zero). The second control has a value of
1 (one), and so on. You can enter new values to change the tab order.
If you prefer, you can use the View menu to set tab order, as well. This is a very handy
technique that will save you a lot of time if your form has many controls that are out of
order. Follow these steps to configure tab order using the View menu:

1. Select View | Tab Order.


2. Each control will have a little number in the top-left corner that specifies
its current tab order.
3. Click the controls in the sequence in which you want the tab order.
4. Select View | Tab Order from the menu system. You will see the tab order
on the form (shown next).

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:40 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


9

If you want, you can tell C# not to stop at a particular control. Set the TabStop
property for that control to False, and you will see that the control is not part of the tab
order. A line of code like this will be added to the InitializeComponent() method
of the control:

PART IV
this.button1.TabStop = false;
As you can see, the .NET Framework has provided us with a number of valuable tools
that save hours of programming. Spend some time experimenting with these now, and
you will find your development time (from the GUI perspective) greatly reduced.

Windows Forms Controls


In Chapter 18, we introduced the various controls that are included as part of the Tool-
box in the Visual Studio .NET IDE. We briefly touched on each control and its use and
then went on to discuss the event model that makes up the .NET Framework. In this sec-
tion, we will work with the controls you might expect to see on the exam and point out
the important aspects of each. This is not meant to be a comprehensive study, by any
stretch of the imagination. However, it can serve as an introduction to each control.
By observing them in our application, you will be able to ascertain each control’s effec-
tiveness for the needs of your applications. You will also familiarize yourself with some
of the properties, methods, and events that are characteristic of that particular control.
Before we look at these controls specifically, we should take a moment to discuss the
events that are common to all controls. In Table 19-2 we present these events and a brief
description of how they would be used. Keep these events in mind as we explore the var-
ious controls in the Toolbox.

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:40 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


10
Event Description
Click Fires when the control is clicked. This can be the result of a mouse click or
the ENTER key being pressed when the control has focus.
DoubleClick Triggers when the mouse is double-clicked over the control.
Enter Occurs when the control is entered.
OnFocus Triggers when the control gets focus either by the user tabbing to the control
or clicking on the control. This can also occur programmatically by setting
focus on the control.
KeyDown Fires when a key is pressed when the control has focus.
KeyPress Fired after KeyDown, which occurs when a control that has focus receives a
keypress. You can retrieve the character that was pressed by examining the
KeyChar property of the KeyEventArgs parameter. By using the
KeyPress event, you can tell whether any of the modifier keys were also
pressed (CTRL, SHIFT, ALT).
KeyUp Occurs when a key is released.
Leave Occurs when the control is exited (or left).
LostFocus Occurs when the control loses focus (when the user tabs or clicks on
another control).
MouseDown A series of events that occurs when mouse actions take place. MouseDown
MouseEnter and MouseUp happen when the mouse button is pressed and released. By
MouseHover using the Button property of the MouseEventArgs parameter, you can
MouseLeave determine which mouse button was pressed (right, left, or middle).
MouseUp
Move Occurs when the control is moved.
Validated Triggers when the control is finished validating. We will look at validation
events later in this chapter.
Table 19-2 Common Events for all Controls

Keep in mind that these are just some of the common events that can occur. Each
control will have its own list of specific events that have been created just for it. For
example, the Timer control has a Tick event that is unique to it.

Buttons, Text Boxes, and Labels, Oh My!


Probably the most common of all controls, buttons, text boxes, and labels are the basic
user-interaction controls. By clicking a button, a user can request a certain action; by
typing in the text box, a user can present data to the program; and by reading the con-
tents of a label, a user is prompted by its value. New to the .NET Framework is
the LinkLabel, which allows you to create a label that contains a hyperlink, and the
RichTextBox, which permits formatted text.

Buttons
Including buttons on your form allows the user to select an activity. There are three dif-
ferent kinds of buttons that you can employ—the regular “Click here” type of button, a
radio button, and a check box. It may seem strange that we include radio buttons and

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:40 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


11
check boxes in the “button” category, but that is because they all derive from the class
ButtonBase (a subclass of Control). We will return to the discussion of radio but-
tons and check boxes in a few minutes, but for now, let’s concentrate on the standard
Button class.
To add a new button to your form, either double-click on the Button icon in the Tool-
box or click it once and draw the button on your form. Once the button is added to your
form, you should immediately change its name property from Buttonx, where x is the
sequentially assigned number of buttons already on the form, to something meaningful
like btnDelete. The following illustration demonstrates our row of buttons on the
main form of our college application. You should then change the Text value from
Buttonx to the visual clue for the user (that is, Delete). Double-click on the new button
and you will be taken to the Click event. You can then code whatever needs to be done
when the user clicks on the button.

PART IV
A .NET button can have an image added to it. Notice the graphic to the left of the “De-
lete” text on the button. This graphic is added by configuring the Image property. We have
added one of the common bitmaps that are included with the Visual Studio .NET installa-
tion. If you are trying this yourself, you will notice that the graphic appears on top of the
text (which we also changed from “Buttonx” to “Delete”). By adjusting the ImageAlign
property, you can place the graphic to the left of the text (or wherever you want it to be).

TIP Notice the underlined “A” on the Add button. This is created by adding
an ampersand (&) in the Text property in front of the character you wish
underlined. The user can then use the ALT key along with the underlined
letter to access the button (instead of clicking on it).

To add the code that should be run when the user clicks on the button, double-click
the newly designed button. You will be taken to the code view of the main form. You
will see that two things have happened:

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:41 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


12
1. The Click event has been registered (or subscribed to) in the
InitializeComponent() method:
this.btn.Delete.Click +=new System.EventHandler(this.btnDelete_Click);
2. The event-handler stub has been created:
private void btnDelete_Click (Object sender, System.EventArgs e){ }

We can add our own code in the Click event that will perform the required Delete
operation. In Chapter 20, we will code this button to remove a record from the database.
A cool way to determine the valid properties, methods, and events for any control is
to type the name of the control in the code view window (for example, btnDelete),
and then press the period (.), which is also known as the dot operator. IntelliSense drops
down a list of all the properties, methods, and events for the control. You will be able to
determine whether a name is for a property, method, or event by observing the icon
beside the name. The hand holding a piece of paper denotes a property, the flying paper
signals a method, and the lightning bolt represents an event. A couple properties war-
rant mentioning:

• Enabled By setting this property to False, the button will display on the form
but will not be capable of receiving any user intervention activities.
• Visible This property determines whether the control will appear on the
form or not. This is a valuable property, because there will be times that a
control should not be visible, and you can control when it is actually displayed
programmatically.

Radio Buttons The look of the radio button is a far cry from the look of the But-
ton class; however, they derive from the same base class, ButtonBase. A radio button
is used when you want to give the user a choice of two or more mutually exclusive
options. In our example in the following illustration, the user can choose either Com-
puter Course or C# Course—of course, we know they’ll choose the C# course!

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:41 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


13
Notice, in this example, that we have placed the buttons in a GroupBox. There are
many reasons for doing this:

• A GroupBox visually keeps all the radio buttons together.


• When you don’t use a GroupBox, only one radio button can be selected per
form. To have multiple areas of selection, you need multiple group boxes.
• When you move the GroupBox, the buttons inside move with it, keeping the
controls together.

Table 19-3 identifies some of the more common properties and events for a
RadioButton.

EXAM TIP A GroupBox is very similar to the Panel control—both act as


containers for other controls. The difference between the two is that a
GroupBox has a caption on it and a Panel can have scroll bars.

Check Boxes A check box allows the user to select an option or answer a question.
The following illustration shows a check box that has been added to our college applica-
tion in the Visual Designer. The difference between a check box and a radio button has

PART IV
to do with the mutually exclusive options of a radio button. With a radio button, you
can select only one of the grouped options. By using check boxes, you allow the user to
select any number of options, and these options could be very different in nature.

In our example (in the preceding illustration), you can see that the check box is in an
indeterminate state (the check mark is grayed out). This is a common practice with Win-
dows applications. The check box can be selected (with a dark check mark), unselected
(no check mark), or unchanged (indeterminate). By default, however, you only allow

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:41 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


14
Name Description
Properties Appearance A RadioButton can be displayed either as seen in
the preceding illustration or as a simple click button.
AutoCheck The RadioButton will automatically change its
state (on or off) when it is clicked.
Checked You can test whether the button has been selected
by determining the True/False value of Checked.
Events AppearanceChanged This event occurs when the Appearance property
value changes.
CheckedChanged This event is fired when the Checked property
value changes. When a radio button is clicked, this
event happens twice—once to the button that was
previously checked and once to the button that is
now checked.
Click When a radio button is selected, the Click event
fires once.
Table 19-3 Properties and Events of a RadioButton

two options—selected or unselected. In order to add in the indeterminate feature, you


must do two things:

• Set the CheckState property to Indeterminate.


• Set the ThreeState property to True.

To display the check mark as a default value, set the Checked property to True.
Let’s look at the code that would toggle the CheckBox Checked property.

private void btnToggle_Click (object sender, System.EventArgs e)


{
if ((cbTest1.CheckState == CheckState.Checked)
|| (cbTest1.CheckState == CheckState.Unchecked))
cbTest1.CheckState = CheckState.Indeterminate;
if (cbTest1.CheckState == CheckState.Indeterminate)
cbTest1.CheckState = CheckState.Checked;
}

As you can see in this example, there are enum files (such as CheckState) that allow
us to use alphanumeric values to compare states (cbTest1.CheckState ==
CheckState.Unchecked). Always check with the Object Browser (View | Other
Windows | Object Browser) for these convenient classes.

Text Boxes
When you need the user to enter a value into your application, you can make use of
a TextBox. The control derives from the TextBoxBase class. You will also find a
RichTextBox control extending from TextBoxBase, which allows you to provide

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:41 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


15
formatted text in a text box. We will also discover later in this chapter that we can use the
text boxes to force the user to enter a certain kind of data. For example, you may want to
ensure that only numeric values are entered into the text box—in the “Validating User
Input” section of this chapter, we will look at this capability in detail.
Let’s look at some of the more interesting properties of the TextBox class:

• CharacterCasing Allows you to set whether the text that is entered is


in lowercase, uppercase, or remains the way it was typed. The default value
is Normal.
• MaxLength Allows you to set the maximum number of characters to be
entered into the TextBox. By default, the only practical limit is the amount of
memory in the host machine.
• Multiline Allows the control to display multiple lines of text.
• ScrollBars Allows you to specify that the control will show the scroll bars
if the control is also set to display multiple lines of text.
• PasswordChar Replaces the typed characters with a special password
character. For example, most password boxes display asterisks (*) over the
typed password for security reasons.

PART IV
• ReadOnly Sets the TextBox to be a read-only text box. The user will be
unable to change the value in the TextBox.
• WordWrap Specifies that words will wrap if the text in the control exceeds the
width of the control. Used for multiple-line text boxes.

One of the nicer features of a TextBox is its ability to provide validation code. We
will examine this later in the chapter—just keep in mind that most of the events that you
will use for a TextBox belong to the validation type.
Rich Text Boxes The RichTextBox class uses a standard for displaying format-
ted text strings called Rich Text Format (RTF). This allows you to utilize formatting, such
as bold, italic, and underlining. Some properties are supported via the base class and
some are new to the RichTextBox:

• Redo and Undo Allows you to specify a True/False value that lets the user
undo or redo their keystrokes.
• DetectUrls Specifies that a URL will be treated as such and display as an
underlined link.
• SelectedRtf Allows the user to cut and paste between your application and
an application such as Microsoft Word and have the Rich Text Formatting
retained between applications.

This is just a sampling of some of the features of a RichTextBox. Figure 19-1 illus-
trates our application with a RichTextBox added. We have added a Button control

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:41 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


16

Figure 19-1 Example of a RichTextBox control

that will set a selected area of text to bold. The code to implement this in the Button
Click event is as follows:

private void btnSetBold_Click(object sender, System.EventArgs e)


{
Font oldFont;
Font myFont;
oldFont = this.rtfTest1.SelectionFont;
myFont = new Font (oldFont, FontStyle.Bold);
this.rtfTest1.SelectionFont = myFont;
this.rtfTest1.Focus();
}

When the button is clicked, whatever text is selected is converted to bold. In our ex-
ample, we selected the word “bolding” and then clicked the button. As you can see, the
text changes to bold font for just the word “bolding”. Obviously, this is a trivial example
of what you can do to effect formatting changes to the text in a RichTextBox. The code
demonstrates the SelectionFont property, which is just one of the selection proper-
ties available for use.

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:41 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


17
Labels
This is probably one of the most used controls in the Windows application environ-
ment. Using a label allows you to provide information to the user. There are two types of
label controls that can be added to a Windows form: Label is the standard label, and
LinkLabel allows you to create a hyperlink label.
We have modified our form and added a label (see the next illustration) encouraging
students to click on the hyperlink to reach Microsoft’s web site.

PART IV
EXAM TIP Notice that the Caption property is not the property to use to
set the text of the label. You use the Text property in Visual Studio .NET.

We will not spend much time discussing the label controls since they are very basic
controls; however, it warrants looking at how you set the properties to support hyperlinks
for the LinkLabel control. In the InitializeComponent() method, the Designer
has added the following code:

this.linkLabel1.LinkArea = new System.Windows.Forms.LinkArea(0,20);


this.linkLabel1.Location = new System.Drawing.Point (240, 344);
this.linkLabel1.Name = "linkLabel1";
this.linkLabel1.Text = "Microsoft\'s Web Site";
this.linkLabel1.LinkClicked += new
System.Windows.Forms.LinkLabelLinkClickedEventHandler
(this.linkLabel1_LinkClicked);

In the linkLabel1_LinkClicked event, we add the following code:

private void linkLabel1_LinkClicked (object sender,


System.Windows.Forms.LinkLabelLinkClickedEventArgs e)
{
// find out which link was clicked
linkLabel1.Links[linkLabel1.Links.IndexOf (e.Link)].Visited = true;
System.Diagnostics.Process.Start ("http://www.microsoft.com");
}

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:42 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


18
Now when you click on the hyperlink in the LinkLabel control, you will be taken to
a new instance of Microsoft Internet Explorer, and the web site for Microsoft will open.

List Boxes, Combo Boxes, Checked List Boxes, and Such


In order to provide users with a list of options from which to choose, we utilize the
ListBox and its various adaptations—ComboBox and CheckedListBox. Look at
Figure 19-2 to see the difference between the three of them.
The ListBox allows a list of data to be presented to the user with a scrollbar on the
right side for scrolling through the list.
The ComboBox presents a drop-down list of data to the user. Notice that in our exam-
ple the data is sorted—this is accomplished by setting the Sorted property to True.
Other properties that can be set on the ComboBox include the following:

• MaxDropDownItems controls the number of items shown in the


drop-down list.
• DropDownStyle can be set to Simple, DropDown, or DropDownList
(see Figure 19-3).

Figure 19-2 Using ListBox, ComboBox, and CheckedListBox controls

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:42 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


19

PART IV
Figure 19-3 Using the DropDownStyle settings for a ComboBox control

You can see from Figure 19-3 that the Simple style presents one item in the box, while
both the DropDownList and DropDown styles allow you to drop down a predefined
number of items. The difference between DropDownList and DropDown has to do with
the data itself. DropDown style allows the user to type in the top line of the drop-down list
and DropDownList only lets the user select items that have been displayed.
Here are some important properties of the ListBox:

• MultiColumn Permits multiple columns of data to be displayed.


• SelectionMode Allows you to set the maximum number of items that can
be selected at a time.
• SelectedIndex Specifies the first selected item by item (or index) number
(if no item is selected, this value is 1).
• Items Contains the data that is displayed in the list. Items is a collection.
The Count property will return the number of items in the list. The Add
property will add items to the list at run time, and the Remove property will

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:42 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


20
delete items at run time. Items.Addrange allows you to add multiple items
to the list box.

TIP The Items collection is also a property of the ComboBox and the
CheckedListBox.

These kinds of controls are great for presenting data retrieved from a back-end data-
base server to the user. In our example, we have simply added to the list by using the
Items collection in the Property Explorer. You can also add items programmatically at
run time using Items.Add. However, there are many times when your data will come
from an outside source, like Microsoft SQL Server 2000. In that case, you will find your-
self using the DataSource property. We will explore this in the next chapter.

Tab Controls
If you’ve been looking closely at the form we’ve been using for all of the demonstrations
so far, you will notice that there is a tab control in the background of the form. It has
served as an organization tool so that we can separate parts of the application. Each tab
across the top of the TabControl is called a TabPage.
You can work with the properties of each TabPage by clicking on the ellipsis (…)
beside the TabPages property. When you select the TabControl, you will see two
links at the bottom of the Properties window—Add Tab and Remove Tab. You can use
these buttons as shortcuts to adding new TabPages to the TabControl. However, to
control the various properties of each individual page, you need to use the TabPage Col-
lection Editor, shown next.

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:42 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


21
For interest’s sake, here are a few tidbits that help when using a TabControl.

• HotTrack This property causes the tab page’s text to change color as the
mouse passes over the tab.
• SuspendLayout() This is really a method of the Control class, and it
temporarily suspends the layout for the control. You would use this method
while you make many adjustments to the layout of a control:
tabControl1.SuspendLayout();
For example, at some point in your application, you may need to change the
Size or Location properties of a control. Suspend the layout first, make your
changes, and when you are finished, you can call this method:
tabControl1.ResumeLayout();

To add a new TabPage dynamically to your TabControl, follow the example of


this code segment:

TabPage tpStudentMarks = new TabPage();


tpStudentMarks.Text = "Student Marks";
tpStudentMarks.Size = new System.Drawing.Size (536, 398);

PART IV
// add code here to insert the controls that will sit on the Tab Page
// For example :
Button b = new Button;
tpStudentMarks.Controls.Add (b);
// Add the new Tab Page to the Tab Control
tcTabControl.Controls.Add (tpStudentMarks);

Status Bars
The StatusBar control is usually used to display information to the user in an unob-
trusive manner. By docking the status bar at the bottom of your application, you can set
panels into the bar that will display different information. By default, the StatusBar
has a single panel (or section for information). By adding panels to the Panels collec-
tion, you can display more information.
You can access the StatusBarPanel Collection Editor to modify the properties of the
panels of the StatusBar. You can get to this editor by clicking the ellipsis (…) beside
the Panels property.
Each panel in a status bar has a zero-based index value, so the first panel has an index
value of 0. If we wanted to programmatically change the information in the third panel ,
we would add the following line of code:

this.sbMyStatusBar.Panels[2].Text = "Here is the changed text for the third panel.";

EXAM TIP If you are adding a status bar to your application, and you are
disappointed when you run the program because the panels of the status bar
do not show, don’t forget to set the ShowPanels property to True—its
default value is False.

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:43 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


22
Toolbars
The ToolBar control is an area on your window where you can set shortcut buttons
for different commands (typically menu options). Figure 19-4 shows a ToolBar con-
trol on our college application. We have not looked at creating menus yet, so you will
see silly buttons on this toolbar. When we work on menus later in this chapter, you
will see the true use of a toolbar.
Once the ToolBar control is added to your form, you can add buttons to it by click-
ing on the Buttons property and selecting the collection. Use the ToolBarButton Col-
lection Editor in the same fashion as the editors for the StatusBar and the TabPage.
In Figure 19-4, you will notice that there are really four buttons on the toolbar, and each
one has a different Style property:

• The Canadian flag button is the PushButton style—a typical toolbar button.
• The American flag button is the ToggleButton style, which is either pressed or
not pressed.
• The Swedish flag button is the DropDownButton style, which gives extra
options when the drop-down arrow is clicked.

Figure 19-4 Using a ToolBar control

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:43 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


23
• The last button (really the third button) is the one between the American flag
and the Swedish flag. It has the style of Separator and acts as a separation point
between toolbar buttons.

Notice, as well, that our toolbar has images on each button. This is accomplished by
adding the ImageList control to your project, and it is simply a holder for images.
When you add the control to your application, a little icon appears below the form win-
dow (unlike in Visual Studio 6, where the control actually sat on your form, but was
invisible at run time). By using the ImageList Collection Editor, you can add any number
of images to your application. When you use the images, you reference the ImageList. By
using a property named ImageIndex, you select from a list of images attached to a par-
ticular ImageList. The ImageList is actually set via the ImageList property of the
ToolBar itself. Once you have set the ImageList property, you will have access to all
the images associated with the ImageList, and you will be able to select them from the
ToolBarButton Collection Editor.
We will examine the ButtonClick event associated with toolbar buttons later in
this chapter when we introduce menus and the handling of menu events.

Dialog Boxes

PART IV
Using a dialog box is a great way to interact with the user. You may want to simply pre-
sent some information to the user and wait for a response, but it might also get more
complicated than that. In some cases, you will want to ask the user to set common win-
dow properties. For example, the user may choose to customize your application by
choosing their desired font or colors. This can be accomplished by using the predefined
dialog boxes that come with the .NET Framework. In the Visual Studio 6 world, these
were called common dialog boxes and were part of an ActiveX control. Of course, we are no
longer in that world, and the predefined dialog boxes are now class files.

Types of Dialog Boxes


There are many types of dialog boxes available for immediate use, and you can also cre-
ate your own. In this section, we will explore the prebuilt dialog boxes. Table 19-4 lists
the different types and describes their purposes.
The MessageBox The MessageBox control allows the developer to display an
informational message and wait for the response. In Figure 19-5, we have adjusted our
Courses tab to include a course-selection list box. When the user clicks on any of the
items in the list, a message box is displayed as shown in the figure.
The hardest part to creating a message box is determining its look. We used the fol-
lowing code line in the SelectedIndexChanged event of the list box, meaning that
the box will be displayed as a result of any click within the list box:

MessageBox.Show (this, "Sorry, this course if full!", "Course Selection",


MessageBoxButtons.OKCancel, MessageBoxIcon.Warning);

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:43 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
All-In-One
screen / MCAD/MCSD
/ MCSD Visual
Visual
C#C#
.NET
.NET
Certification
Certification
All-in-One
All-in-One
Exam
Exam
Guide
Guide
/ Rempel
/ Rempel
& Lind
& Lind
/ 222443-6
/ 222443-6
/ Chapter
/ Chapter
19
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


24
Dialog Box Purpose
MessageBox Creates a simple message for the user. Displays a question or
message to the user and waits for their response.
ColorDialog Allows the user to select colors for the application. They can
choose from a list of colors or create a custom color.
FontDialog Allows the user to select a font, the style of the font, and its size,
from the fonts that are installed on the computer.
OpenFileDialog Allows the user to navigate the file system and choose a particular
file to open. This is the same dialog box you see when you choose
File | Open from a typical Windows menu system.
PageSetupDialog Allows the developer to present the standard printer-related
PrintDialog dialog boxes. PageSetupDialog presents the dialog box used
PrintPreviewDialog to specify printer settings. PrintDialog lets the user select
a printer and choose the pages to print (exactly as if you chose
File | Print from a standard Windows application menu. The
PrintPreviewDialog control presents the document on
screen as it will look printed.
Table 19-4 .NET Dialog Box Controls

Figure 19-5 Using a MessageBox control

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:43 PM
Color profile: Generic CMYK printer profile
All-In-One
Composite Default screen All-In-One
/ MCAD/MCSD
/ MCSD Visual
Visual
C#C#
.NET
.NET
Certification
Certification
All-in-One
All-in-One
Exam
Exam
Guide
Guide
/ Rempel
/ Rempel
& Lind
& Lind
/ 222443-6
/ 222443-6
/ Chapter
/ Chapter
19
19

Chapter 19: User-Interface Components


25
Dialog Box Purpose
SaveFileDialog Allows the user to choose the location for a saved file. This is the
dialog box you will see if you select File | Save from a standard
Windows application menu.
Table 19-5 .NET Dialog Box Controls (continued)

As you can see, there are enumerations that help make the appearance choices for the
message box. These include the following:

• MessageBoxButtons Select OK, OKCancel, AbortRetryIgnore,


RetryCancel, YesNo, or YesNoCancel as the buttons to include on the
MessageBox.
• MessageBoxDefaultButton Select Button1, Button2, or Button3 as the
button to respond to the ENTER key.
• MessageBoxIcon In our example, we used the information icon, but you
can select from a list of icon choices, including Error, Stop, Warning, and so on.

The Show() method of the MessageBox class is overloaded so that you can display

PART IV
the default message box with only a message and the OK button, or you can create an
elaborate box using all of the options.

NOTE Message boxes are modal dialog boxes meaning the user must
respond before they will be returned to the rest of the application. Some
dialog boxes are modeless, and they will allow the application to continue
while the dialog box is running.

You may want to examine the result returned after displaying the message box. The
user clicks one of the buttons and your application can deal with the returned value.
In order to do this, you make use of the DialogResult class.
DialogResult result = MessageBox.Show (this, "Click Yes, No or
Cancel",,MessageBoxButtons.YesNoCancel);
if (result == DialogResult.Cancel)
{
// Write your cancellation code here
}

The DialogResult enumeration contains named constants (Abort, Cancel,


Ignore, OK, Yes, and so on) for comparing against the results of the user clicking one
of the option buttons.
Using Dialog Boxes from the CommonDialog Class Aside from the Mes-
sage Box, all the dialog boxes listed in Table 19-4 are derived from the CommonDialog
class, and they all work in approximately the same manner. You use the inherited
ShowDialog() method to display the dialog box from your application and the
DialogResult class to retrieve the user interaction with the dialog box. As an example,
we will use the File | Save dialog box (SaveFileDialog), as shown in Figure 19-6.

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:44 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


26

Figure 19-6 The SaveFileDialog dialog box

Use the following steps to recreate this section of the application:

1. Add an instance of the SaveFileDialog control to your application. The


instance will show at the bottom of the white area in the Visual Designer.
2. In the Click event of the Save button, add this code:
// use the instance of the SaveFileDialog control to set initial properties
saveFileDialog1.InitialDirectory = "c:\\C Progs\\Ch25";
saveFileDialog1.Filter = "C# source files | *.cs";
if (saveFileDialog1.ShowDialog() == DialogResult.OK)
{
// write your code here
}
3. Notice that you can set the initial directory that the Open File dialog box will
display. Use the double-slash escape sequence (\\) to set the directory path.
You can also set a filter—in our case, we only want to see C# source files.
4. Run the application and click on the button.

When you click the Save button, the Save File As dialog box is presented. The user can
then navigate through the file system and select the file they need saved. The control
ensures that the file is saved properly and all error handling is done correctly. For exam-
ple, if the user tries to save a file in a location where the file already exists, a warning
message will appear informing the user that this action will override the existing file.

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:44 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


27
By making proper use of dialog boxes, you can ensure that your application will retain
some consistency between programs. You also save yourself a lot of valuable time by not
reinventing the wheel (or, in this case, the dialog box).

Working with Controls at Run Time


Although it is very easy to add controls to your application at design time by making use
of the Windows Forms Designer, it is imperative to understand how to add controls
at run time. Very often, you will need to create a control on the fly, in response to
the circumstances during the running of your application. We will look at the
ControlsCollection and talk about the Controls property, which let you do this.

EXAM TIP Microsoft will not likely ask you to add controls at design time
using a visual editor—you will need to know the properties and events that
we have just covered in this chapter. However, it is a good idea to have a firm
grasp on adding controls at run time, since there will be direct questions on
adding controls in this fashion.

The Collection Object

PART IV
All the controls on a Windows Form (or in a container control like the Panel) are
part of a collection object. The object itself is of type ControlCollection. The
ControlCollection object represents a collection of control objects—buttons, list
boxes, and so on. You can access the controls by using the Controls property.
The following list demonstrates some of the capabilities of the collection object:

• You can add or remove controls from the collection.


• You can iterate through the collection by using the GetEnumerator() method.
• By calling the Contains() method, you can check whether a particular
control is part of the collection.
• You can use the Count property to return the number of controls in
the collection.

To test whether a particular control is part of the collection, try the following example
code:

if (form1.Controls.Contains (btnClickMe))
{
MessageBox.Show("We found the button");
}

You can also clear the full collection by using this line:

form1.Controls.Clear();

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:44 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


28
Any control that acts as a container has the Controls collection. If we wanted to clear
the controls from a TabPage, we would code this line:

tabPage1.Controls.Clear();

Adding a Control at Run Time


We are able to create a customized version of our application by allowing users to add
and remove controls at run time. By adding the following code section to our college
application, teachers can access a few more controls than students can. In Figure 19-7,
we have added a button that, when clicked, displays a text box on the tab page asking for
a password. The text box is not part of the form until someone clicks on the If You Are a

Figure 19-7 Adding a control at run time

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:44 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


29
Teacher, Click Here button. Once the password is validated, we can then add more func-
tionality via extra controls for a teacher.
The new code looks like this:

private void btnTeacher_Click (object sender, System.EventArgs e)


{
TextBox t = new TextBox();
t.Text = "Enter your password ";
t.Width = 200;
t.Left = 250;
t.Top = 320;
tabCourses.Controls.Add (t);
}

This code section will add the new control to the Controls collection on the tab
page—the next step is, of course, to add the extra functionality.
This section has introduced the typical controls with which any Windows program-
mer will work. Experiment with each one of them—Microsoft expects you to have a full
understanding of their functionality.

Working with Menus

PART IV
Now that we’ve discussed all the common controls, it’s time to move into another big
arena for visual presentation of your application. Nearly every Windows Forms program
has a menu attached to it—menus give the user a list of options that are available within
the application. There are two types of menus in the .NET world—the regular menu that
you see attached to the top of any application window, and the menu that appears when
you right-click on something. The first type is a MainMenu, while the right-click menu is
a ContextMenu. We will start this section of the chapter by looking at the MainMenu
object and then conclude the section discussing the ContextMenu.

Creating a Main Menu


To our college application, we have added a menu system that contains the standard
menus (File, Edit, and Help) as well as an application-specific menu, Students (see Fig-
ure 19-8). Creating a menu system from the Visual Designer is very simple.
Building a menu is as easy as adding an instance of the MainMenu control to the
application. Like the ImageList control, it is not added directly to the form, but rather
sits at the bottom of the IDE screen.
Once an instance of the control becomes part of your application, you will be pre-
sented with the first menu item and a prompt to “Type here.” We have added items down
to the Exit on the File menu and across to the Help menu, as is shown in Figure 19-8. The
menu control leaves open space for us to add to the menu system at any time.

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:44 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


30
Some special considerations should be taken into account when working with menus:

• To create a menu separator, such as the one between Close and Page Setup in
Figure 19-8, type a hyphen (-) in the “Type here” prompt. This will insert the
separator, which is really a separate menu item.
• If you want to create submenus, simply type in the “Type here” area that is
displayed to the right of the current area. The control will add the appropriate
arrows to indicate a submenu.
• The MainMenu is made up of MenuItem children objects. The hierarchy is
then created between parent and child objects.
• You can create menu item shortcuts by adding an ampersand (&) to the text of
the menu item. Notice in Figure 19-9 that by placing the ampersand in front of a
character, that character becomes the shortcut character. The user can then invoke
that menu item by pressing a combination of ALT and the shortcut character.

Figure 19-8 Our college application with menus

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:45 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


31

PART IV
Figure 19-9 Creating a shortcut character

By selecting the MainMenu from your form, you can examine the properties of each
MenuItem object. You can set options such as these:

• Checked Displays the menu item with a check mark in front of it.
• DefaultItem Specifies the menu item as the default.
• Enabled Grays out the menu item and makes it inaccessible.
• RadioCheck Does the same as Checked only with a radio button.
• Shortcut and ShowShortcut Deals with the shortcut keys, such as
function keys and combinations of function and SHIFT, ALT, CTRL, and so on.
• Text Specifies the actual text of the menu item.

Looking at the Code of a Main Menu


Although the convenience of the Visual Designer abstracts a lot of the coding from us, it
is important that we examine the “behind the scenes” coding. We can’t just ignore the
programming part of this assignment. The following code segments show you just how

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:45 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


32
much work is done for you by the Visual Designer. By acquainting yourself with the cod-
ing of menus, you will be able to dynamically add menus to your application.
Each object is declared in the declaration section of the Form class:

private System.Windows.Forms.MainMenu mainMenu1;


private System.Windows.Forms.MenuItem menuItem1;
// and so on for each menu item
// Please be sure to use more meaningful names in your applications.

The next step is to construct each of these objects. This happens in the method:
InitializeComponent().

this.mainMenu1 = new System.Windows.Forms.MainMenu();


this.menuItem1 = new System.Windows.Forms.MenuItem();
// and so on for each menu item
// did we mention that the names should be changed?

The properties are then set for each object:

// this is the parent object mainMenu1


// the code below identifies the top-level menu items that belong to this parent
this.mainMenu1.MenuItems.AddRange (new System.Windows.Forms.MenuItem[] {
this.menuItem1,
this.menuItem10,
this.menuItem18,
this.menuItem24)};
// menuItem1 becomes the parent for all of the menu items under it
this.menuItem1.Index = 0;
this.menuItem1.MenuItems.AddRange (new System.Windows.Forms.MenuItem[] {
this.menuItem2,
this.menuItem3,
// etc for each menu item that is a child of menuItem1
// and so on until we reach the properties of each individual child menu item
this.menuItem1.Text = "File";
// etc for each one

We have just looked at a very standard Windows Forms menu, but you may have
need of a menu that spans from the right of the document to the left. In that case, add
the following code to the MainMenu object:

MainMenu1.RightToLeft = RightToLeft.Yes;

Handling Menu Events


When you double-click on the menu item that you have added to your form, you will be
taken to the code view window and placed inside the menuItemxx_Click event. The
Visual Designer will add the necessary subscription to the event handler, as follows:

this.menuItemxx.Click += new System.EventHandler (this.menuItemxx_Click);

You could also change this subscription as follows:

this.menuItemxx.Click += new System.EventHandler (<methodname>);

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:45 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


33
In this case, the <methodname> is a method call instead of a reference to a click event.
There are many reasons to do it this way, but perhaps the most compelling reason is that
there may be different ways of calling that menu item, and they can all make the call to
<methodname>. For example, you may have a toolbar on your form that has a button
that will produce the same effect as clicking on a particular menu item. Both the menu
item and the toolbar button will call the same method.

Context Menus
You know the menus that pop up whenever you right-click on a form? These are called
context menus—so called because they respond to the context of the item that is in the
foreground. The control that is used to create a context menu is ContextMenu. At
design time, you can add a context menu to your form from the toolbox. It is a control
that does not reside on the form, similar to a MainMenu. Once the context menu is
added to the application, you can set the property of the control to which you wish to
associate the context menu. Figure 19-10 illustrates the instance of a context menu
added to our project (at the bottom of the screen) and the ContextMenu property of
the TextBox set to that instance.

PART IV

Figure 19-10 A context menu attached to a text box

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:45 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


34

Figure 19-11 Using a context menu

The actual menu items are built much as a MenuItem is added to your form. At the top
of your form will be a ContextMenu instance (invisible at run time) that allows you to
type in the menu items. When we run our revised application, the user can right-click on
the Student Name text box and see our context menu, as shown in Figure 19-11.
You can add a context menu at run time by adding MenuItem objects to the
ContextMenu collection of menu items called MenuItems.

MenuItem menuNewItem = new MenuItem();


menuNewItem.Text = "&Window";
contextMenu1.MenuItems.Add (menuNewItem);

EXAM TIP New to the .NET Framework is the ability to add images to menu
items. You simply override the OnPaint() method of the MenuItem
object and draw your image.

Validating User Input


Although good form design is very important to the development of Windows applica-
tions, it is just as important to pay attention to the data that the user is entering. There

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:45 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


35
are many techniques for validating the information supplied by users of your applica-
tion. We will discuss two of the methods:

• Using the Validating event of a control


• Using the ErrorProvider control

Of course, you should also investigate ways of using .NET controls that are designed to
restrict user input. But that’s another story for another book. We will deal with the two
methods that you are likely to encounter on the Microsoft exam.

Validating Events
Certain controls cause a validating event to fire when they are exited. For example, as a
user moves from text box to text box on a form, the validating event can be used to
ensure that the user has entered correct data.
We have added an extra text box to our Students tab page (see Figure 19-12). A short-
cut, when using the Visual Designer, to register a new event with a handler is to click the
lightning bolt (for events) in the Properties Explorer.

PART IV

Figure 19-12 Setting up the validating event

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:46 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


36
A list of that control’s events is presented (see Figure 19-12) and by double-clicking
on the event, the code is added to your program. We double-clicked on the Vali-
dating event, and the Visual Designer added the following code:

this.textBox1.Validating += new System.ComponentModel.CancelEventHandler (


this.textBox1_Validating);

A Validating event method is also added to the code:

private void textBox1_Validating (object sender,


System.ComponentModel.CancelEventArgs e)
{
// place your validation code here
}

Inside the method, you can add code that will test the value entered by the user and
set the Cancel property of the CancelEventArgs object to True if the data is not
valid. This has the effect of eliminating the tab or click to the next control and gives you
an opportunity to present an error message to the user. The user will then have to correct
the data and try to move off the control again. Validation will continue to happen until
your method is successfully completed.
Here is an example of validation code:

{
if ( // validation test here)
{
e.Cancel = true;
MessageBox.Show ("Invalid data!");
}
}

EXAM TIP You can set the CausesValidation property of a control


to False if you do not want the Validation event to fire when exiting
the control.

ErrorProvider Control
The ErrorProvider control lets you display an error message if the information
entered by the user is in error. By using the ErrorProvider, you can set an icon next
to the control that contains the data in error. This is more desirable than using a message
box, because as soon as the user dismisses the message box, they no longer have a record
of the error. A “message” created with the ErrorProvider stays on the form until the
correction to the data is made.
Figure 19-13 demonstrates our validation of the first text box. Notice the big question
mark beside the text box. The ErrorProvider has placed it there.

TIP Move your mouse over the question mark to see the error message.

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:46 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


37

PART IV
Figure 19-13 Using the ErrorProvider control

Summary
We’ve come a long way in this chapter. By using all the different controls available in the
Toolbox, we have been able to create visually pleasing and very functional Windows
Forms applications. It warrants mentioning again that you should be very comfortable
with all of the concepts in this chapter. Microsoft assumes you are extremely proficient
at using the basic controls, creating menus, and working with error validation. On the
CD that comes with this book, you can review the entire code for our college project.
In the next chapter, we will work with back-end SQL Server data and continue to
build upon our college application. We will access student and course information from
the database and demonstrate how to access the data and how to present it. The next
chapter is a very significant one for the Microsoft exams. You will find that they like to
test you on your data-access knowledge. So once you’ve tried the following test ques-
tions, fasten your seat belts and join us on a data exploration.

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:47 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


38
Test Questions
1. If you want to ask the user to select between two or more mutually exclusive
options, you would employ which of the following controls?
A. TabControl
B. Button
C. RadioButton
D. CheckBox
2. The following piece of code is intended to create a new TabPage in a
TabControl. What will happen when you try to run this code?
TabPage tpMyNewTabPage = new TabPage();
tpMyNewTabPage.Caption = "Add Students";
tpMyNewTabPage.Size = new System.Drawing.Size (536, 398);
Button b = new Button();
tpMyNewTabPage.Controls.Add (b);
A. The program compiles and executes properly.
B. The program compiles and causes a runtime error.
C. The program does not compile because it is unable to add the button.
D. The program does not compile because of a syntax error.
3. The following piece of code is intended to create a new TabPage in a
TabControl. What will happen when you try to run this code?
TabPage tpMyNewTabPage = new TabPage();
tpMyNewTabPage.Text = "Add Students";
tpMyNewTabPage.Size = new System.Drawing.Size (536, 398);
Button b = new Button();
tpMyNewTabPage.Controls.Add (b);
A. The program compiles and executes properly.
B. The program compiles but the tab page does not show.
C. The program compiles and causes a runtime error.
D. The program does not compile because of a syntax error.
4. You want to validate the user input that is retrieved in a text box. Which control
will assist you in displaying the error message without moving off the form?
A. RichTextBox
B. NotifyIcon
C. HelpProvider
D. ErrorProvider

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:47 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


39
5. You want to validate the user input that is retrieved in a text box. Which event
will assist you in the validation of the data?
A. UponValidation
B. Validation
C. Validating
D. OnValidation
6. Which of the following lines of code will produce a message box for the user?
A. MessageDialogBox.Show ("This is your message");
B. MessageDialogBox.Show ("Message", "This is your message");
C. MessageBox.Show ("This is your message);
D. MessageBox.Show ("Message", "This is your message");
7. To dynamically add a context menu to your application, which section of code
should be used?
A. MenuItem m = new MenuItem();
contextMenu1.MenuItems.Add (m);

PART IV
B. MenuItem m = new MenuItem();
contextMenu1.MenuItem.Add (m);
C. MainMenu m = new MainMenu();
contextMenu1.MenuItems.Add (m);
D. MainMenu m = new MainMenu();
contextMenu1.MenuItem.Add (m);
8. To produce a dialog box similar to the Windows Print dialog box, which of the
following controls would you use?
A. PrintPreviewDialog
B. PrintDialog
C. PrintBox
D. SetupPrintDialog
9. Which property of the CheckedListBox allows you to preset the maximum
number of items that can be selected?
A. MaxItems
B. MaximumItems
C. SelectionItems
D. SelectionMode

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:47 PM
Color profile: Generic CMYK printer profile
Composite Default All-In-One
screen / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
19

MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide


40
10. What is wrong with the following piece of code? Assume no other code has
been written and you are creating the status bar dynamically.
this.sbMyStatusBar.Panels[1].Text = "Panel 1";
this.sbMyStatusBar.Panels[2].Text = "Panel 2";
this.sbMyStatusBar.Panels[3].Text = "Panel 3";
A. Nothing is wrong with the code.
B. It will cause a runtime error.
C. There will be a syntax error found.
D. The Text property is incorrect for a StatusBar.
11. Which line of code must be added in order to show a StatusBar?
A. sbMyStatusBar.Show();
B. sbMyStatusBar.Display();
C. sbMyStatusBar.Show = true;
D. sbMyStatusBar.Display = true;
12. Which line of code will set the Link data for a LinkLabel?
A. this.linkLabel1.Text = "http:\\www.microsoft.com";
B. this.linkLabel1.Link = "http://www.microsoft.com";
C. this.linkLabel1.HyperLink = "http://www.microsoft.com';
D. None of the above.
13. Which segment of code will set the selected text in a RichTextBox to bold?
A. myFont = new Font (oldFont, Font.Bold = Bold);
this.rtfTest1.SelectionFont = myFont;
B. myFont = new Font (oldFont, FontStyle.Bold);
this.rtfTest1.SelectionFont = myFont;
C. myFont = new Font (oldFont, FontStyle.Bold);
this.rtfTest1.SelectedText = myFont;
D. myFont = new Font (oldFont, Font.Bold);
this.rtfTest1.SelectedText = myFont;
14. Which property will allow the user to enter more than one line in a text box?
A. MaxLines
B. MultipleLines
C. MultiLines
D. MultiLine

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:47 PM
Color profile: Generic CMYK printer profile
All-In-One / MCAD/MCSD Visual C# .NET Certification All-in-One Exam Guide / Rempel & Lind / 222443-6 / Chapter
Composite Default screen
19

Chapter 19: User-Interface Components


41
15. Which control would you use to group a lot of controls together?
A. GroupControl
B. GroupBox
C. FrameControl
D. FrameBox

Test Answers
1. C.
2. D. The syntax error is in the Caption property of the TabPage—it should be
the Text property.
3. B. You must add the tab page to the Controls collection of the tab control.
4. D. The ErrorProvider will place the error message next to the text box.
5. C. The Validating event allows you to validate the user input.
6. C.

PART IV
7. A. The collection is called MenuItems, and you must create MenuItem objects.
8. B.
9. D.
10. B. A runtime error will occur since the Panel collection of the StatusBar is
zero-based.
11. C. Show is a property, not a method.
12. D. None of the above. You must use this line of code:
System.Diagnostics.Process.Start ("http://www.microsoft.com");
13. B. The property is SelectionFont, and the Font constructor takes
FontStyle.Bold.
14. D.
15. B.

P:\010Comp\All-in-1\443-6\ch19.vp
Friday, August 23, 2002 5:02:47 PM

Anda mungkin juga menyukai