Visual Basic

Microsoft Visual
Studio 2010 Visual Basic
calculator
 This is not an easy project!!! Please listen carefully
& follow these instructions EXACTLY!
1. Open Microsoft Visual Studio 2010.
Select Visual Basic Development Settings.
Now, select Start Visual Studio.

Click on New Project.

Windows
Click on Windows Forms
Application.
Rename this as Calculator.

IMPORTANT!!!
Create a new folder in your
Student folder in My Documents.
Rename it as Calculator.
 Form
MS Access

Solution
Explorer
all
files project

Properties Form here

Select Debug,
Options and Settings.

Click on the Projects and Solutions

tab.
Set up all 3 to go to your folder in
Drive D.
 In the Solution Explorer window,
right click on the Form.
Rename it Calculator.vb.

IF
Toolbox not
showing
View
Toolbox

triangle icon

Dock
lock
toolbox
position
 NOT user-friendly
Calculator

GRAPHICAL USER
INTERFACE GUI

the user click on

see
Form

Form

design parts calculator

2. In the Toolbox, click on the
All Windows Forms tab.

2 Panels
2 Text Boxes
1 Label
4 Buttons

Click and DRAG them to your Form.

Form

size

properties each

3. Click on Panel 1.
 Panel 1 FILL all top
Form

Select Dock.
Click on the top box.

Now, click on the

triangle next to Size.
Change the Height to
110.

Now, click on Panel 2.

Panel 2
FILL all middle
Form
 Select Dock.

Click on the middle box.

Form

resize Form

Click and drag here.

Make the Form a little bit bigger.

Panels bigger too

Dock tool
4. Click on Text Box 1.

Change Multi Line to

True (=Yes).

resize box

Click here.
Change the Width to 130.
Change the Height to 30.

Choose a Background
colour.

To change the Font,

click here.

Change the Font

settings.

Font Size
big
calculator
user-friendly
 Choose a colour for your Font.

For Text Align,

select Right.

repeat Step 4
Text Box 2
5. Click on Label 1.

Delete Label1.

Set Text Align to

Middle Right.

Set Auto Size to False (=No).

Click here.
Change the Width to
150.
Change the Height to 35.
 Change the Background
colour.

Change the Border

Style.

Change the Flat Style.

To change the Font,

click here.

Change the Font

settings.

Font Size
big
calculator
user-friendly

Choose a colour for your Font.

For Text Align,

select Middle Right.
6. Click on Button 1.

Click here.

Set the Width to 120.

Set the Height to 85.

Click on Text.
Rename the Button as +.

Background
You can use colour.

OR
You can use a
Background image.
 Remember!
picture
NOT look OK
edit size
Photoshop

Background
Image settings

OR

You can use

GIF
Animation.

If you need,
change the
Image Align
settings.

Warning!
cannot edit size GIF animation
edit size stop working
Change Flat Style to
Popup.

To change the Font,

click here.

Change the Font settings.

Font Size
big
calculator
user-friendly

Choose a colour for your Font.

Make sure Text Align

is set to Middle Centre.

Choose a Cursor style.

Play button
repeat Step 6 Button 2 Button 3 Button 4

rename each
button
- x

Tip: each button

look same
Right click button
copy paste
 7. Click here.

Rename it as Colins Calculator.

8. Click on Panel 1.

Click here.
 Import your picture.

Warning!

Click and DRAG

your Picture Box to
your Form.

Click
here.
Import your
GIF
animation.

Click here.

Select Stretch Image.

 setting not OK
another setting
cannot
edit size
GIF animation edit
size stop working

If you are happy with the settings, then select Dock,

Top.

Right click.

Select Send to Back.

Change the Border Style to Fixed 3D.

 Play button

repeat Step 8 Panel 2

Dock
Fill

Picture
Boxes
blank spaces
calculator pictures
GIF animation
 enough
space Form
bigger

*** Remember!
GIF animations ONLY
Image NOT Background
Image

Form
 Visual Basic code
commands real
calculator

easy understand

9. Double click on the + button.

All of the code here is

LINKED to the Button!
code here Button1_Click
name declaration Button

+
button code
here
Button
 + Button
number VALUE
Label1 = number VALUE
TextBox1 + number
VALUE TextBox2

Visual Basic code

Label1.Text =
Val(TextBox1.Text) +
Val(TextBox2.Text)
Textbox 1 Textbox
2 Label 1
***
.Text

number text date

hyperlink
Repeat Step 9 * buttons
change code
 *** Divide Button problem
divide
number zero

error

Visual Basic code command

TRY
*** command
error
10. Double click on the Divide Button.

Type in Try and press Enter.

Now, type in the normal code for
the Divide Button.
 OK
Form open

format Clear
button
format Square
button
format Square
Root button
Calendar

code Clear button

 Square button
code ^ 2
Square Root button
code ^ 0.5

change size boxes

buttons

more space
buttons

Type in some numbers in TextBox 1

and TextBox 2.
Check each button works OK.
If everything is OK, it will show the
result in the Label 1 box.

basic
calculator
NOTE: Square
Square Root buttons
ONLY number
Textbox 1
number
Textbox 2
ERROR
Why?
ONLY
code Textbox 1
NOT Textbox 2

HUGE
Textbox 1 OR Textbox 2
square square root numbers

Textbox 1 blank number Textbox 2

square square root
Textbox 2 blank number Textbox 1
square square root
 If Then End If

IF command

install
double
click Application file

11. Select File, Save Calculator.

Now, select File, Save All.

Select Build,
Configuration Manager.
Change this to Release.
Click Close.
 Now, select Build,
Build Calculator.

application file

Go into your
Folder in Drive
D.
Find this.

Calculator application file

Double click on your application file.

OK

Rename your Application file and send ONLY the

Application file to ICT!!!

As you can see, there is no

need to be afraid of computer
programming.
 I hope you will feel a little bit more
confident.
good
formatting Form
application
user-friendly easy to
use
Click File, Save As Go into Folder Lock.

On the Desktop, you

will see Mr. Colins
ICT Class.
Double click on it, and
then click and drag your work.