Adding Controls to the Form

So far, you have created a form, set some properties, added a few controls, and defined a style. To make the form useful, you need to add some more controls and write some code

of your own. The WPF 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 might not be so familiar.

Using WPF Controls

In the next exercise, you will add controls to the form that a user can use to input details about members of the bell ringers association. You will use a variety of 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 either. 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 be either selected (True) or cleared (False).

Tip CheckBox controls can actually have three states if the IsThreeState property is set to True. The three states are true, false, and null. 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.

The application also gathers statistical information about when members joined the association and how much bell-ringing experience they have (up to 1 year, between 1 and 4 years, between 5 and 9 years, and 10 or more years). You can use a group of options, or radio but-

tons, to indicate the member’s experience—radio buttons provide a mutually exclusive set of values. The older Microsoft Windows Forms library provides the DateTimePicker control

for selecting and displaying dates, and this control is ideal for indicating the date that the member joined the association. There is one small snag, however: The WPF library does not

provide an equivalent control. You can either implement your own custom control to provide this functionality or use Windows Forms interoperability and the WindowsFormsHost control to add the DateTimePicker control to a WPF form. You will adopt the latter approach in this

application.

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 rings only 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 play simple music. There are a variety of bellringing methods, and they have rather quaint-sounding names such as Plain Bob, Reverse Canterbury, Grandsire, Stedman, Kent Treble Bob, and Old Oxford Delight. New methods are being written with alarming regularity, so the list of methods can vary over time. In a realworld 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 access and retrieve data from a database in Part V of this book, “Managing Data.”) A good control

for displaying this information and indicating whether a member can ring a method is a ListBox containing a list of CheckBox controls.

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 controls to the form

1.Ensure that Window1.xaml is displayed in the Design View window. Remove the two button controls and the text box control from the form.

2.In the XAML pane, change the Height property of the form to 470 and the Width property to 600, as shown in bold type here:

<Window x:Class=”BellRingers.Window1”

...

Title=”...” Height=”470” Width=”600”>

...

</Window>

3.In the Design View window, click the Window1 form. From the Toolbox, drag a Label control onto the form, and place it near the upper-left corner. Do not worry about positioning and sizing the label precisely because you will do this task for several controls later.

4.In the XAML pane, change the text for the label to First Name, as shown in bold type here:

<Label ...>First Name</Label>

Tip You can also change the text displayed by a label and many other controls by setting the Content property in the Properties window.

5.In the Design View window, click the Window1 form. From the Toolbox, drag a TextBox control onto the form to the right of the label.

Tip You can use the guide lines displayed by the Design View window to help align controls. (The guide lines are displayed after you drop the control on the form.)

6.In the XAML pane, change the Name property of the text box to firstName, as shown here in bold type:

<TextBox ... Name=”firstName” .../>

7.Add a second Label control to the form. Place it to the right of the firstName text box. In the XAML pane, change the text for the label to Last Name.

8.Add another TextBox control to the form, and position it to the right of the Last Name label. In the XAML pane, change the Name property of this text box to lastName.

9.Add a third Label control to the form, and place it directly under the First Name label. In the XAML pane, change the text for the label to Tower.

10.Add a ComboBox control to the form. Place it under the firstName text box and to the right of the Tower label. In the XAML pane, change the Name property of this combo box to towerNames.

11.Add a CheckBox control to the form. Place it under the lastName text box and to the right of the towerNames combo box. In the XAML pane, change the Name property of the check box to isCaptain, and change the text displayed by this check box to

Captain.

12.Add a fourth Label to the form, and place it under the Tower label. In the XAML pane, change the text for this label to Member Since.

13.In Solution Explorer, right-click the References folder under the BellRingers project, and then click Add Reference. In the Add Reference dialog box, click the .NET tab, hold down the CTRL key while you select the System.Windows.Forms and

WindowsFormsIntegration assemblies, and then click OK.

In the following steps, you will add a WindowsFormsHost control to the form to hold a DateTimePicker control. These controls require the application to reference the System. Windows.Forms and WindowsFormsIntegration assemblies.

14.In the XAML pane, add the following XML namespace declaration shown in bold type to the Window1 form. This declaration brings the types in the Windows Forms library into scope and establishes wf as an alias for this namespace:

<Window x:Class=”BellRingers.Window1” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:wf=”clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms”

Title=...>

...

</Window>

20.Add a RadioButton control to the form, and place it inside the StackPanel control you just added. Add three more RadioButton controls to the StackPanel control. They should automatically be arranged vertically.

21.In the XAML pane, change the Name property of each radio button and the text it displays, as shown here in bold type:

<GroupBox...> <StackPanel ...>

<RadioButton ... Name=”novice” ...>Up to 1 year</RadioButton> <RadioButton ... Name=”intermediate” ...>1 to 4 years</RadioButton> <RadioButton ... Name=”experienced” ...>5 to 9 years</RadioButton> <RadioButton ... Name=”accomplished” ...>10 or more years</RadioButton>

</StackPanel>

</GroupBox>

22.Add a ListBox control to the form, and place it to the right of the GroupBox control. In the XAML pane, change the Name property of the list box to methods.

23.Add a Button control to the form, and place it near the bottom on the lower-left side of the form, underneath the GroupBox control. In the XAML pane, change the Name property of this button to add, and change the text displayed by this button to Add.

24.Add another Button control to the form, and place it near the bottom to the right of the Add button. In the XAML pane, change the Name property of this button to clear, and change the text displayed by this button to Clear.

You have now added all the required controls to the form. The next step is to tidy up the

layout. The following table lists the layout properties and values you should assign to each of the controls. Using the XAML pane or the Properties window, make these changes. The

margins and alignment of the controls are designed to keep the controls in place if the user

resizes the form. Also notice that the margin values specified for the radio buttons are relative to each preceding item in the StackPanel control containing them; the first radio button is 10 units from the top of the StackPanel control, and the remaining radio buttons have a

gap between them of 20 units vertically.

As a finishing touch, you will next apply a style to the controls. You can use the bellRingersStyle style for controls such as the buttons and text boxes, but the labels, combo box, group

box, and radio buttons should probably not be displayed on a gray background.

Apply styles to the controls, and test the form

1.In the XAML pane, add the bellRingersFontStyle shown in bold type in the following code to the <Windows.Resources> element. Leave the existing bellRingersStyle style in place. Notice that this style changes the font only of controls that reference this style.

<Window.Resources>

<Style x:Key=”bellRingersFontStyle” TargetType=”Control”> <Setter Property=”FontFamily” Value=”Comic Sans MS”/>

</Style>

<Style x:Key=”bellRingersStyle” TargetType=”Control”>

...

</Style>

</Window.Resources>

2.In the XAML pane, apply the bellRingersFontStyle style to the label1 control, as shown in bold type here:

<Label Style=”{StaticResource bellRingersFontStyle}” ...>First Name</Label>

Apply the same style to the following controls:

label2

label3

isCaptain

towerNames

label4

yearsExperience

methods

Note Applying the style to the yearsExperience group box and the methods list box automatically causes the style to be used by the items displayed in these controls.

3. Apply the bellRingersStyle style to the following controls: firstName

lastName add clear

4.On the Debug menu, click Start Without Debugging.

The form when it runs should look like the following image:

Notice that the Methods list box is currently empty. You will add code to populate it in a later exercise.

5.Click the drop-down arrow in the Tower combo box. The list of towers is currently empty. Again, you will write code to fill this combo box in a later exercise.

6.Close the form, and return to Visual Studio 2008.