1 Creating Windows GUIs with Visual Studio. 2 Creating the Project New Project Visual C++ Projects...

19
1 Creating Windows GUIs with Visual Studio

Transcript of 1 Creating Windows GUIs with Visual Studio. 2 Creating the Project New Project Visual C++ Projects...

Page 1: 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.

1

Creating Windows GUIs with Visual Studio

Page 2: 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.

2

Creating the Project

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

Page 3: 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.

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

Page 4: 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.

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

Page 5: 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.

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

Page 6: 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.

6

Modifying Form Appearance

Most appearance changes are done through properties

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

Page 7: 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.

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

Page 8: 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.

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

Page 9: 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.

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

Page 10: 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.

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

Page 11: 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.

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!

Page 12: 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.

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?

Page 13: 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.

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

Page 14: 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.

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

Page 15: 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.

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

Page 16: 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.

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)

Page 17: 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.

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!”

Page 18: 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.

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?

Page 19: 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.

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