A C# .NET Calculator

Design Stage

You're now going to write your own very own C# .NET calculator programme. We'll keep it simple at first, and the only thing it will be able to do is add up. After you understand how it all works, we'll make it divide, subtract and multiply. Version 1 of your calculator will look like this:

As you can see, it has a text box for the display of numbers, buttons for the numbers 0 to 9, a point symbol, plus and equals buttons, and a clear button.
So the first thing to do is to design your calculator. Start a new project by clicking File > New project. For your new form, set the following properties:

Size: 440, 487
Text: Calculator

To add a bit of colour to your calculator, you can change the BackColour property of the form, as in the image below:

We went for an orange colour, but feel free to choose any colour you like.
Now add a text box to your form and set the following properties for it:

Name: txtDisplay
Location: 66, 52
Size: 200, 26
TextAlign: Right

Time to add the buttons. You need 10 buttons for the numbers 0 to 9. Add the first button to the form, and set the following properties for it:

Name: btnZero
Font: Microsoft Sans Serif, Bold, 12
Location: 143, 378
Size: 49, 40
Text: 0

This is the zero button, which goes at the bottom. Add a new button to your form and set the following properties for it:

Name: btnOne
Font: Microsoft Sans Serif, Bold, 12
Location: 66, 159
Size: 49, 40
Text: 1

An easier way to add new buttons, is to copy and paste them. Click on btnOne to select it. Right click the button and select Copy from the menu that appears. Now click anywhere on the form. Right click again, and select Paste. A new button will appear with the number 1 on it. Have a look at the properties window, though, and you'll see that the new button has the Name button1. Change it to btnTwo. Then change the Text property to 2. Drag it in to position next to your number 1 button.
Add the other number buttons in the same: Copy, Paste, change the Name and the Text properties. For the other number buttons, use the following for the Name properties: btnThree, btnFour, btnFive, etc. Position your buttons like ours.
Add a new button for the Point symbol. Give it the Name btnPoint, and type a full stop (period) for the Text property. Change the Font property, if you think it's too small.
Only three buttons to go. So add three more buttons, and use the following properties:

Name: btnPlus
Font: Microsoft Sans Serif, Bold, 12
Location: 324, 159
Size: 49, 40
Text: +

Name: btnEquals
Font: Microsoft Sans Serif, Bold, 12
Location: 324, 230
Size: 49, 40
Text: =

Name: btnClear
Font: Microsoft Sans Serif, Bold, 8
Location: 324, 305
Size: 49, 40
Text: Clear

Change the locations, though, if they don't match the alignment for your own buttons. But you've now completed the design of your calculator

Code

Before we get to the code, let's just go through how our calculator is going to work:

1. Click the number buttons. This will be the first number in the addition
2. The first number you want to add will then appear in the text box
3. Click the Plus button to tell the calculator you want to add
4. The first number will disappear from the text box, ready for the second number
5. Click the number buttons again to add the second number
6. Click the equals button and the answer appears in the text box

The first task on the list is to get the number to appear in the text box when a number button is clicked. To do this, double click your number 1 button to get at the code. The numbers on the buttons were put there by changing the Text property. So the only thing we need to do is to access this Text property. We can then use the button text as the text Property for the text box. Add the following line for your btnOne code:

txtDisplay.Text = btnOne.Text;

This says, "Make the Text in the text box the same as the Text that's on the button". Remember: whatever is on the right of the equals sign gets stored in whatever is on the left of the equals sign.
Run your programme and try it out. Click the number 1 button and it will appear in your text box. Click your number 1 a few times and what do you notice? You might think that clicking the number 1 button twice, for example, will cause the text box to display 11, and not 1. After all, you clicked it twice, so why shouldn't two number 1's appear?
The reason it doesn't is because you haven't told C# to keep the value that was already there. Each time you click the button, C# is starting afresh - it doesn't know what was in there before, and discards the number that you previously stored.
Halt your programme and return to your code. Change your line to this:

txtDisplay.Text = txtDisplay.Text + btnOne.Text;

This line is easier to read if you just look at the part after the equals sign. Which is this:

txtDisplay.Text + btnOne.Text;

When you're working with text, the plus symbol doesn't mean add - it means concatenate (you learned about this in the previous section when working strings). So C# will join the text in the text box with the text on the button. After it has finished doing this, it will store the answer to whatever is on the left of the equals sign. In this case, it's not a variable but the text property of the text box.
Run your programme again. Click the number one button a few times. You should find that the number one will appear in the text box more than once.
Halt the programme and return not to your code but to the form itself. (If you can't see your form, right-click Form1.cs in the Solution Explorer on the right. From the menu that appears, select View Designer.)
Now double click button 2, and add the following code:

txtDisplay.Text = txtDisplay.Text + btnTwo.Text;

The only thing that's different is the name of the button - btnTwo instead of btnOne. The rest is the same.
Do the same for the rest of your button, changing the name of the button each time. (You can copy and paste your code to save time.)
But your coding window should look like this, when you've finished:

Run your programme again, and click all ten of your buttons. Make sure that each number appears in the text box when its button is clicked.
Return to your form and double click the Clear button. Add the following line:

txtDisplay.Clear( );

After the full stop, you type the word Clear, followed by a pair of round brackets. Clear is a method you can use on text boxes. As its name suggests, it will clear the text box, leaving it blank.
Run your programme again, click a few numbers, then try your Clear button. The numbers should disappear from the text box.

 

Plus Button

So we've got the numbers to appear in the text box when a button is clicked. The next thing we need to do is grab that number and store it somewhere. We'll then use this number when the equals button is clicked. (The equals button will do the addition, not the plus button.)

The plus button, then, needs to grab the number from the text box. Because it's text, we need to convert it to a number. We'll then store that number in a variable. The only other line of code we'll need for the Plus button is to clear the text box, ready for the second number.
The first number needs to be stored in a variable. We'll use the double type of variable. That way, we can have really big numbers with a "point something" at the end.
So that all the buttons in the programme can see this variable, it needs to be set outside of any button code. So we can't do this:

private void btnOne_Click(object sender, EventArgs e)
{

double total1 = 0;

}

If you set up a variable inside of a button only this button will be able to do anything with the variable. This is known as scope. Because we've set up the variable inside of the button code, we've given it local scope: it can only be seen inside of the curly brackets. To make the variable accessible to all the buttons, we need to give it what's knows as global scope. This is fairly easy - just set it up outside of any buttons. Like this:

double total1 = 0;

private void btnPlus_Click(object sender, EventArgs e)
{

}

Now the variable is outside of the curly brackets, making it available to all the buttons on our form. So set up that variable in your own code.
For the btnPlus code itself, add the following two lines (in blue bold below):

double total1 = 0;

private void btnPlus_Click(object sender, EventArgs e)
{

total1 = total1 + double.Parse( txtDisplay.Text );
txtDisplay.Clear();

}

All we're doing here is getting the text from the text box, converting it to a double number, and then storing it in the total1 variable. Notice that we've also done this:

total1 = total1 +

Just like we did for the number buttons, we need to keep whatever was in the total1 variable. You need to do this in case you want to add more than two numbers. If you didn't keep what was in the total1 variable, C# would "forget" what was in it, and start afresh. This technique is so common in programming that a shorthand way of doing this is usually implemented:

total1 += double.Parse(txtDisplay.Text);

So instead of repeating the variable name, you just use a plus symbol and an equals symbol together ( += ). The above line does exactly the same thing as this:

total1 = total1 + double.Parse(txtDisplay.Text);

But whichever way you choose to retain a value in a variable, all you're saying is "Keep whatever is already in the variable, and add something else".
After storing the number from the text box, we need to clear it:

txtDisplay.Clear( );

Once the text box is cleared, a second number can be selected by clicking the number buttons

Equals Button

The Equals button is where the action takes place. This is where we will do the actual addition.

To store the answer to the addition, we'll need another variable (in blue bold below):

double total1 = 0;

double total2 = 0;

private void btnPlus_Click(object sender, EventArgs e)
{

total1 = total1 + double.Parse(txtDisplay.Text);
txtDisplay.Clear();

}

So set up a total2 variable in your code, as we've done above.
Return to your Form, and double click the Equals button to get at your code. Now add the following three lines of code:

total2 = total1 + double.Parse( txtDisplay.Text );
txtDisplay.Text = total2.ToString( );
total1 = 0;

The first line should look familiar:

total2 = total1 + double.Parse( txtDisplay.Text );

To the right of the equals sign, we're doing the same thing as before:

total1 + double.Parse(txtDisplay.Text);

The difference is before the equals sign: we're now storing it in the total2 variable:

total2 = total1 + double.Parse(txtDisplay.Text);

In other words, get the number from the text box, convert it to a double variable, add it to whatever is in total1. When all this is worked out, store the answer in the variable called total2.
The second line of code was this:

txtDisplay.Text = total2.ToString( );

On the right of the equals sign, we're converting the total2 variable To a String. This is so that it can be displayed as Text in the text box.
The third line of code resets the total1 variable to zero:

total1 = 0;

This is so a new sum can be calculated.
Time to try out your calculator. Use it to calculate the following:

10 + 25
36 + 36
10 + 10 + 10

Of course, you can do these sums in your head. But make sure that your calculator gets its sums right before going any further. Click your Clear button to start a new addition. When you're sure you understand what is going on with the code, try this exercise.

 

 

 

Posted in: