1

Creating Windows GUIs with Visual Studio

2

Creating the Project

New Project Visual C++ Projects Windows Forms Application Give the Project a Name and Location Confirm

3

The Form Designer Window

When you start a new Windows Form Application, you will be immediately taken to the designer window

This is where you modify the appearance, properties, and components of your form

Compile and run the project at any time to preview your form

4

Modifying Form Properties A Windows Form has Many Properties Each Property Changes Your Form In

Some Way To Access the Properties:

Right-Click your formSelect PropertiesThe Property Viewer Will Appear on ScreenClick on a property to view possible values

and an explanation of what this property does

5

Commonly Used Properties Appearance Properties

BackColor, ForeColorFormBorderStyle – Resizable or NotFontText – Title of your Form

Layout PropertiesAutoScaleSize and StartPosition

Windows Style Properties IconMinimizeBox, MaximizeBoxOpacity – 100 for solid, 0 for invisible

6

Modifying Form Appearance

Most appearance changes are done through properties

Others are made in the design window Mostly by dragging, dropping, and resizing

7

Adding Components to Your Form

You must use the “Toolbox” to add graphical or control components to your form (labels, buttons, etc…)

Go to “View -> Toolbox” or mouse over the toolbox tab on the right

This opens the toolbox and allows you to choose components

Drag components onto your for design to add them

8

Customizing Components

Each component you add will be a default component

You must position and size each component as you please

Also, components have properties you can (or must) modify to customize them

9

Common Simple Components

Labels and Link LabelsAllow you to name items or provide linked

information. Buttons

Allow the user to perform actions Text Boxes

Allow the user to input information

10

Common Simple Components

Menu ItemsAllow the user to interact with the form menu

Check Boxes and Radio ButtonsAllow the user to select or choose controls

Grouping BoxesHelp clearly mark groupings of components

11

Editing the Form’s C++ Code

All of the code to display your form is written for you!

The automatic code cannot handle user-generated events

YOU must write the event handling code!

12

More about events…

When running, the form is in an infinite “event loop” until an exit command is given

In the event loops, user interaction with form components is detected

Each interactive form component should have an event handling functionWhat do I do when the user clicks me?

13

Event Handling Function

Double click the component to which you want to add a click event handler

The click event handling function will be added and your editor will place your cursor at that function

You must fill in the body of this function with C++ code to handle the click event

14

Making Your Form Interactive Certain form components allow the user to

interact with the form Text Boxes allow users to type input to the

form or get feedback from the form Radio Buttons and Check Boxes allow the

user to select from options Your event handlers must collect

information from these components in order to perform

15

Accessing Components inEvent Handlers To access form components and/or their

properties you must use the “arrow” or “dereference” operator

The arrow operator follows a path of already made pointers and names to the information you desire

16

The Arrow Operator

Examples: this->textBox1->Text

Gives the value of the Text property in textBox1 on this form (String data type)

this->radioButton1->Checked Gives the value of the Checked property in

radioButton1 on this form (boolean data type)

17

An Example

Create a form having two text boxes and one button

The first text box should be interactive for the user to enter data and have a default value of “0”

The second should be “ReadOnly” to display the results

The button should be labeled “Square It!”

18

Example Continued… When the button is pressed, the number

entered in the first text box should be squared and the answer displayed in the second text box

Note that text boxes can only deal with String dataHow do we convert to and from numerical

data to do the calculations?

19

A Look at the Button Event Handlerprivate: System::Void button1_Click(System::Object * sender, System::EventArgs * e)

{ double operand = Convert::ToDouble(this->textBox1->Text); double result = operand * operand; this->textBox2->Text = Convert::ToString(result); }

We use the Convert interface to convert between data types

Note we have accessed a property in one form component and set a property of another

Perform more complex operations by simply extending your event handling code as needed