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 Textproperties. 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. Save your hard work, and we can begin the coding in the next part.