< C++ .NET Windows Form 2 | Main | C++ .NET Windows Form 4 >


 

 

Windows Forms 3

 

 

  1. Placing Controls on the Form

  2. Handling Events

 

Placing Controls on the Form

 

Now that you know how to create forms and set their properties, let's examine how to add controls to a form. The following exercise will walk you through adding two buttons to the form, and the same procedure can be applied to many other controls.

 

13.     Continue with the same Windows Forms project that was used in the previous two exercises.

 

14.     Make sure that the designer window is open, and open the Toolbox. If the Toolbox is not already visible, you can open it by using the Toolbox item on the View menu  or by pressing Ctrl+Alt+X or the vertical Toolbox tab on the right most of VC++ EE IDE. If the All Windows Forms tab is not open on the Toolbox, you can expand it. Selecting this tab will display all the controls that can be used with Windows Forms.

 

Invoking the Toolbox page through a menu

 

Visual C++ Express Edition Toolbox for Windows GUI designer

 

15.     Click the Button entry in the Toolbox, and drag it onto the form. When you release the mouse button, you will see a button appear on the form. At the same time the Properties editor displayed for the Button ready for editing.

 

Adding a button to the Windows Form

 

 

 

 

16.     Select the button, and use the Properties editor to set its Name to btn1, its Text to OK, its Size to 70, 25, and its Location to 130, 225 as summarized in the following Table.

 

Properties

Value

Name

btn1

Text

OK

Size

70, 25

Location

130, 225

 

Table 3

 

The coordinates for Location are in pixels, relative to the upper-left corner of the form containing the button. If you examine the code in Form1.h and look at the InitializeComponent function, you will see that code has been added to create and set up the button. The designer changes the code in the InitializeComponent function as you edit the form, so you should be very careful about editing InitializeComponent yourself.

 

Viewing the Windows Form source codes

 

Notice how the button has been added to the Controls property of the form. Every container (such as a form) has a Controls property that contains references to all the controls currently hosted by the form. By adding a control to the collection, the form will display it and will treat it as an owned window.

 

Button control property page.

 

17.     Add a second button to the form, and Name it btn2. Make it display Cancel for the Text, and make the Size the same, but change the Location so that this one displays at 210, 225. The finished design is shown in the following figure.

 

Properties

Value

Name

btn2

Text

Cancel

Size

70, 25

Location

210, 225

 

Table 4

 

Customizing button controls

 

18.     Compile and run the code, and you should see two buttons displayed on the form, as shown in the following figure.

 

Windows form with OK and Cancel button controls

 

Handling Events

 

We already have two button controls, however when we click (event fired) those button (event source), nothing happen (nothing to handle those fired events). It isn't much use placing buttons on a form unless you can make them do something, so let's take a look at how to handle the events that are fired by controls. The .NET event mechanism was covered in Module 20, so you might review that material now if you want to refresh your memory. To handle an event, you need to create an event handler function and attach it to the event source. In Module 20, you saw how to do this with custom event source and receiver classes, and now we'll show you how to do it with standard event sources in the form of controls. The following exercise, which follows on from the last one, shows you how to add event handlers for the buttons on the form.

 

19.     Continue with the project from the previous exercise. The form currently contains two buttons, and you're going to add handlers for the Click events that are raised when the buttons are clicked.

 

20.     Select the OK button, and bring up the Properties editor. Click on the Event button at the top of the Properties editor window, the button with a lightning bolt as a symbol (), next to the Properties symbol and the editor will show the events associated with the button.

 

Invoking the Event page using the shortcut icon

 

21.     Find the Click event in the left-hand column, and double-click in the blank space to the right of it. The name btn1_Click will be inserted into the space, a function with the same name will be added to the code part and the code is shown automatically.

 

Adding an event handler to the button control

 

Auto generated event handler function name

 

22.     This function is called when the button is clicked, and just to prove that the handler is called, add the following line to display a message box, as shown here:

private: System::Void btn1_Click(System::Object^ sender, System::EventArgs^ e)

{

    MessageBox::Show(L"You clicked the OK button! It worked!");

}

 

Adding source code to the button click event handler

 

The MessageBox class is part of the Forms namespace, and its one Show method is used to display a standard Windows message box. Show has a dozen overloads that take different combinations of arguments, and the one we are using specifies only the message and title. This message box will display without an icon and with a single OK button. If you look in InitializeComponent, you can see how the button has been made aware of the handler.

this->btn1->Click += gcnew System::EventHandler(this, &Form1::btn1_Click);

 

Viewing the auto generated source code for the button click event handler

 

 

 

 

From the discussion of events in Module 20, you'll recall that event handlers are connected with event sources by delegates. There are several different event handlers associated with controls (we'll meet some of them later in the module), but the delegate used for controls that don't pass back any data (return value is Void) is called EventHandler, and this event delegate passes back a plain EventArgs object. So, to connect an event handler to the button object, a new EventHandler is created, which is passed a pointer to the object that is going to handle the event and the address of the event-handling function within the object. In this case, the event is being handled within the form object, so the this pointer is passed for the first argument and the address of the btn1_Click function as the second. Remember that in C++ the name of a function, when used on its own without parentheses, evaluates to the address of the function. The event handler is registered with the source by using the += operator to link the handler to the button's Click event.

 

23.     Try building and testing the application. You should see a message box like the one shown in the following figure when you click OK.

 

Testing the button click event and handling the event using message box

 

Note that the message box is modal, you can't return to the application until you've sent the message box away by clicking OK.

 

24.     Try adding a similar event handler for the Cancel button with the following code.

private: System::Void btn2_Click(System::Object^ sender, System::EventArgs^ e) {

        MessageBox::Show(L"You clicked the Cancel button! It also worked!");

        // Exit the application

        Application::Exit();

}

And the following is the output.

 

Windows Form with button click in action

 

 

Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Part 6

 

 


< C++ .NET Windows Form 2 | Main | C++ .NET Windows Form 4 >