Adding Controls to the Form
Adding Controls to the Form
So far you have created a form, set some of its properties, and examined the code that Visual Studio 2005 generates. To make the form useful, you need to add controls and write some code of your own. The Windows Forms library contains a varied collection of controls. The purposes of some are fairly obvious—for example, TextBox, ListBox, CheckBox, and ComboBox—whereas other, more powerful controls (such as the DateTimePicker) might not be so familiar.
Using Windows Forms Controls
In the next exercise, you will add controls to the form that allow a user to input member details. You will use a variety of different controls, each suited to a particular type of data entry.
You will use TextBox controls for entering the first name and last name of the member. Each member belongs to a “tower” (where bells hang). The Middleshire district has several towers, but the list is static—new towers are not built very often and hopefully, old towers do not to fall down with any great frequency. The ideal control for handling this type of data is a ComboBox. The form also records whether the member is the tower “captain” (the person in charge of the tower who conducts the other ringers). A CheckBox is the best sort of control for this; it can either be selected (True) or cleared (False).
TIP
CheckBox controls can actually have three states if the ThreeState property is set to True. The states are True, False, and Indeterminate. These states are useful if you are displaying information that has been retrieved from a relational database. Some columns in a table in a database allow null values, indicating that the value held is not defined or is unknown. If you want to display this data in a CheckBox, you can use the Indeterminate state to handle null values.
The application also gathers statistical information about when members joined the association and how much bell ringing experience they have (up to one year, between one and four years, between five and nine years, and ten or more years). A DateTimePicker control is very suitable for selecting and displaying dates, and a group of options, or radio buttons, is useful for indicating the member's experience—radio buttons provide a mutually exclusive set of values.
Finally, the application records the tunes the member can ring—rather confusingly, these tunes are referred to as “methods” by the bell-ringing fraternity. Although a bell ringer only rings one bell at a time, a group of bell ringers under the direction of the tower captain can ring their bells in different sequences and generally play simple music. There are a variety of bell ringing methods, and they have names like Canterbury Minimus, Plain Bob Doubles, and Old Oxford Delight Minor. New methods are being written with alarming regularity, so the list of methods can vary over time. In a real-world application, you would store this list in a database. In this application, you will use a small selection of methods that you will hard-wire into the form. (You will see how to use databases in the next part of the book.) A good control for displaying this information and indicating whether a member can ring a method is the CheckedListBox.
When the user has entered the member's details, the Add button will validate and store the data. The user can click Clear to reset the controls on the form and cancel any data entered.
Add Windows Forms controls
Ensure that Form1 is displayed in the Designer View window. Using the Toolbox, verify that the Common Controls category is expanded, and then drag a Label control onto MemberForm. (If the Toolbox is not displayed, click Toolbox from the View menu, or click the Toolbox tab in the left-hand border of Visual Studio.)
In the Properties window, click the Location property, and then type 10,40 to set the Location property of the label.
From the Toolbox, drag a TextBox control onto MemberForm, to the right of the label. Do not worry about aligning the TextBox exactly because you will set the Location property for this and the following controls later.
TIP
You can use the guide lines displayed by the Designer to help align controls.Add a second Label to the form. Place it to the right of the TextBox.
Add another TextBox to MemberForm and position it to the right of the second Label.
From the Toolbox, drag a third Label onto the form. Place it directly under the first Label.
From the Toolbox, drag a ComboBox control onto the form. Place it on MemberForm under the first TextBox and to the right of the third Label.
From the Toolbox, drag a CheckBox control onto the form and place it under the second TextBox.
Add a fourth Label to MemberForm and place it under the third Label.
From the Toolbox, drag a DateTimePicker control and place it under the ComboBox.
In the Toolbox, expand the Containers category. Drag a GroupBox control from the Toolbox and place it under the fourth Label control.
From the Common Controls category in the Toolbox, drag the RadioButton control and place it inside the GroupBox control you just added.
Add three more RadioButton controls, vertically aligned with each other, to the GroupBox. You might need to make the GroupBox bigger to accommodate them.
From the Toolbox, drag a CheckedListBox control and place it under the second Label and to the right of the GroupBox control.
From the Toolbox, drag a Button control and place it near the bottom on the lower-left side of MemberForm.
Add another Button control to the bottom of the form, just to the right of the first.
Setting Control Properties
You now need to set the properties of the controls you just added to the form. To change the value of a control's property, click the control on the form to select it, and then enter the correct value in the Properties window. You will start with the basic properties. The following table lists the properties and values you need to assign to each of the controls.
Control | Property | Value |
label1 | Text | First Name |
Location | 10, 40 | |
textBox1 | (Name) | firstName |
Location | 120, 40 | |
Size | 170, 26 | |
label2 | Text | Last Name |
Location | 300, 40 | |
textbox2 | (Name) | lastName |
Location | 400, 40 | |
Size | 170, 26 | |
label3 | Text | Tower |
Location | 10, 92 | |
comboBox1 | (Name) | towerNames |
DropDownStyle | DropDownList (This setting forces users to pick one of the items in the list; users cannot type in a value of their own.) | |
Location | 120, 92 | |
Size | 260, 28 | |
checkBox1 | (Name) | isCaptain |
Location | 400, 92 | |
Text | Captain | |
CheckAlign | MiddleLeft (This property specifies the location of the checkbox relative to the text in the control. When you click the drop-down arrow for this property, an interesting graphic containing a grid appears. Click the left square in the middle row.) | |
label4 | Text | Member Since (This text should be split over two lines. You can click the drop-down arrow in this property to display a simple text editor that also allows you to enter multi-line text values) |
Location | 10, 148 | |
DateTimePicker | (Name) | memberSince |
Location | 120, 148 | |
Size | 290, 26 | |
groupBox1 | (Name) | yearsExperience |
Location | 10, 204 | |
Size | 260, 160 | |
Text | Experience | |
radioButton1 | (Name) | novice |
Location | 16, 32 (Note that this location is relative to the radio button's container, the experience GroupBox.) | |
Text | Up to 1 year | |
radioButton2 | (Name) | intermediate |
Location | 16, 64 | |
Text | 1 to 4 years | |
radioButton3 | (Name) | experienced |
Location | 16, 96 | |
Text | 5 to 9 years | |
radioButton4 | (Name) | accomplished |
Location | 16, 128 | |
Text | 10 or more years | |
checkedListBox1 | (Name) | methods |
Location | 300, 212 | |
Size | 270, 165 | |
Sorted | True | |
button1 | (Name) | Add |
Location | 190, 388 | |
Size | 75, 40 | |
Text | Add | |
button2 | (Name) | Clear |
Location | 335, 388 | |
Size | 75, 40 | |
Text | Clear |
It is a good idea to save your project at this point.
Control Properties
As you have just seen, like forms, controls have many properties that you can set. Each different type of control has different properties. Also, like forms, you can set and query control properties dynamically in your own programs, and there are a number of properties that are available only at run time. If you want to learn more about the different properties available for each type of control, you can find a list of them in the MSDN Library for Visual Studio 2005 supplied with Visual Studio 2005.
Changing Properties Dynamically
You have been using the Design View to set properties statically. When the form runs, it would be useful to reset the value of each control to an initial default value. To do this, you will need to write some code (at last). In the following exercises, you will create a private method called Reset. Later, you will invoke the Reset method when the form first starts, and when the user clicks the Clear button.
Rather than coding the method from scratch, you will use the Class Diagram editor to generate the method. The Class Diagram editor provides a schematic way to view and amend classes.
Create the Reset method
In the Solution Explorer, right-click Form1.cs. A menu appears.
On the menu, click View Class Diagram.
A new class diagram appears displaying the MemberForm class.
Right-click the MemberForm class in the diagram, point to Add, and then click Method. The MemberForm class expands to display a list of all defined methods (Dispose, InitializeComponent, and the MemberForm constructor). A new method, simply called Method, is added. Change the name of this method to Reset by overtyping the name and pressing the Enter key.
In the Class Details pane that appears underneath the class diagram, verify that the Type of the Reset method is void, and that the Modifier is public. If they are wrong, you can click these fields in the Class Details pane and modify them.
TIP
The Class Details pane sometimes shares the same window as the Error List pane. If the Class Details pane is not visible, click the Class Details tab below the Error List pane to display it.The following graphic shows the class diagram with the new method added:
In the Class Details pane that appears underneath In the Class Diagram, right-click the Reset method and then click View Code.
You are placed in the Code and Text Editor window displaying the MemberForm class. The Reset method has been added with a default implementation that throws a NotImplementedException:
public void Reset() { throw new System.NotImplementedException(); }In the Code And Text Editor window, replace the throw statement in the Reset method with the following lines of code:
firstName.Text = ""; lastName.Text = "";
These two statements ensure that the firstName and lastName text boxes are blank by assigning an empty string to their Text property.
Programming the User Interface
You now need to configure the properties of the remaining controls on the form. You will do this programmatically.
Populating the ComboBox
If you recall, the towerName ComboBox will contain a list of all the bell towers in the Middleshire district. This information would usually be held in a database and you would write code to retrieve the list of towers and populate the ComboBox. Because you have not been shown how to access a database yet, the application will use a hard-coded collection.
A ComboBox has a property called Items that contains a list of the data to be displayed. In the Reset method, after the code you have already written, add the following statements to clear this list (this is important because otherwise you would end up with many duplicate values in the list) and create four items in the ComboBox:
towerNames.Items.Clear(); towerNames.Items.Add("Great Shevington"); towerNames.Items.Add("Little Mudford"); towerNames.Items.Add("Upper Gumtree"); towerNames.Items.Add("Downley Hatch");
Set the current date
The next step is to initialize the memberSince DateTimePicker control to the current date. The date can be set by using the Value property. You can obtain the current date by using the static property Today of the DateTime class. Add the following statement to the Reset method:
memberSince.Value = DateTime.Today;
Initialize the CheckBox
The isCaptain CheckBox should default to False. To do this, you need to set the Checked property. Add the following statement to the Reset method:
isCaptain.Checked = false;
Initialize the radio button group
The form contains four radio buttons that indicate the number of years of bell ringing experience the member has. A radio button is similar to a CheckBox in that it can contain a True or False value. However, the power of radio buttons increases when you put them together in a GroupBox. In this case, the radio buttons form a mutually exclusive collection—at most, only one radio button in a group can be selected (set to true), and all the others will automatically be cleared (set to false). By default, none of the buttons will be selected. You should rectify this by setting the Checked property of the novice radio button. Add the following statement to the Reset method:
novice.Checked = true;
Fill the ListBox
Like the Tower ComboBox, the CheckedListBox containing the list of bell ringing methods has a property called Items that contains a collection of values to be displayed. Also, like the ComboBox, it could be populated from a database. However, as before, you will supply some hard-coded values for now. Complete the Reset method by adding the following code:
methods.Items.Clear(); methods.Items.Add("Canterbury Minimus"); methods.Items.Add("Reverse St Nicholas"); methods.Items.Add("Plain Bob Doubles"); methods.Items.Add("Grandsire Doubles"); methods.Items.Add("Cambridge Minor"); methods.Items.Add("Old Oxford Delight Minor"); methods.Items.Add("Kent Treble Bob Major");
Call the Reset method
You need to arrange for the Reset method to be called when the form is first displayed. A good place to do this is in the MemberForm constructor. In the Code And Text Editor window, scroll to the beginning of the MemberForm class in the file Form1.cs, and find the constructor (it is called MemberForm, just like the class). Insert a call to the Reset method after the statement that calls the InitializeComponent method:
this.Reset();
Compile and test the application
It is a good practice to name the file containing a form after the form itself. In the Solution Explorer, right-click Form1.cs, click Rename, and then type MemberForm.cs.
On the Debug menu, click Start Without Debugging to verify that the project compiles and runs.
When the form runs, click the Tower ComboBox.
You will see the list of bell towers, and you can select one of them.
Click the drop-down arrow on the right side of the Member Since date/time picker.
You will be presented with a calendar of dates. The default value will be the current date. You can click a date, and use the arrows to select a month. You can also click the month name to display the months as a drop-down list, and click the year to allow you to select a year using a numeric up-down control.
Click each of the radio buttons in the Experience group.
Notice that you cannot select more than one at a time.
In the Methods list box, click some of the methods and select the corresponding check box. You will have to click once to select a method and a second time to select or clear the checkbox.
Close the form and return to Visual Studio 2005.
EAN: N/A
Pages: 183