Design the Graphical User Interface (GUI)
Tips:
On the
properties toolbox set
in alphabetical order.
Refer to the picture of
the Toolbox, green
circle.
Step 1: Click anywhere on the form
Step 2: In the properties window, under the Text property, type Simple
Calculator
Step 3: In the properties window, under the StartPosition property,
select CenterScreen
Step 4: In the properties window, under FormBorderStyle, select
Fixed3D
Step 5: Click and drag a label from the Toolbox to the form
Step 6: While the label is selected, in the properties window, under the
Text property, type Simple Calculator. Note: Since this label is the
main text describing the text, you can change the size and boldness of
the text under the Font property in the properties window but is not
required for this project
Step 7: Proceed to do this for the following labels (5) and place them
accordingly. Name them: Operators, Operation, Operand 1, Operand
2, and Result (See picture) Note: Objects can either be dragged or
double clicked to be placed onto the GUI
Step 8: Click and drag a button from the Toolbox
Step 9: Place it under the “Operators” label.
Step 10: While the button is selected, in the properties window, under
the Name property, enter btnAdd
Step 11: Then under the Text property, enter a + sign
Step 12: Click and drag a TextBox from the ToolBox beside the
“Operand 1” label (See picture)
Step 13: While the TextBox is selected, in the properties window,
under the Name property, enter txtOperand1
Step 14: Repeat Step 12 but place the second TextBox beside the
“Operand 2” label (See picture)
Step 15: Repeat Step 13 but name it txtOperand2
Step 16: Click and drag a label between the two text boxes (See
picture)
Step 17: While the label is selected, in the properties window, under
the Name property, enter lblOperator
Step 18: Delete the text property of lblOperator so that it is blank
Step 19: Under 9the AutoSize property, select False. Note: This lets
you resize the label at your desire
Step 20: Under the BorderStyle property select Fixed3D
Step 21: Click and drag another label beside the “Result” label
Step 22: Repeat Step 17, name it lblDisplay
Step 23: Repeat Step 18 and Step 19
Step 24: Click and drag a button from the Toolbox below the “Result”
label (See picture)
Step 25: While button is selected, in the properties window, under the
Name property, enter btnClear
Step 26: Change the text property for the Clear button to Clear
Step 27: Click and drag a button from the Toolbox beside the Clear
button (See picture)
Step 28: While button is selected, in the properties window, under the
Name property, enter btnExit
Step 29: Change the text property for the Clear button to Exit
Step 30: Enter the following code by double clicking on each button to
open the code window:
Step 3: Coding the Add Button
Goal: Add to numbers that the user inputs into the text boxes
Code Explanation
Dim Variable As Double declares a variable as a specific data
type
Whenever the Add button is pressed a + sign will appear in the
label between the two text boxes.
The Display label is being assigned the Result variable which is
Operand1 + Operand2.
The “.ToSting(“N”) is to convert back into string from when we
converted it to a number using parse
Step 4: Coding the Clear Button
Goal: To clear all boxes on the GUI and set the cursor to the top text
box (Operand 1)
Code Explanation:
Clear()Function clears a text box. This function can only be used
on a text box
Label boxes must be cleared by setting the. Text property to
nothing
Focus() Function sets the cursor to the text box
Step 5: Coding the Exit Button
Goal: To exit the program.
