Tag Archives: Windows

Creating a Calculator with C# Part 7: Tying up the Loose Ends

This is it. We’re done after this. That’s right – I will cast you off into the land of C#. Alone. It’s a sort of sad reality.

In this tutorial, we’re going to fix all those funky behaviors that happen in our calculator but not the Windows one with the help of two Boolean variables – resetFlag and allowDecPoint. You should declare both of them as class variables and set them to true right off the bat.

public partial class frmMain : Form
{
    // ...
    bool resetFlag = true;
    bool allowDecPoint = true;
    // ...

resetFlag will be used to figure out if the display TextBox needs to be reset when one of the numbers or the decimal point is hit. You can see that “resetting” behavior very frequently in the Windows calculator:

  • Whenever one of the operator buttons or the equals button is clicked
  • Whenever one of the memory buttons is clicked
  • Whenever one of the one-number operations (like square root) is conducted
  • Whenever the calculator displays zero (such as when it first starts up or after the user clicks CE or C)
When resetFlag is set to true, the user will not be able to backspace with the ← button.

The allowDecPoint variable should seem more obvious to you – numbers may only contain one decimal, so after one is put in the display TextBox, no more can be added. This prevents number parsing errors. Notice the glaring lack of error checking in our math. It is not because we don’t assume our users are morons, but because we are simply going to safeguard the code.

Now, let’s start adding places where resetFlag will be set to true. It should be set to true at the end (with the last line of code) of the following parts of our massive if statement:

  • else if (btn.Text == “*” || btn.Text == “/” || btn.Text == “+” || btn.Text == “-”)
  • else if (btn.Text == “=”)
  • else if (btn.Text == “√”)
  • else if (btn.Text == “%”)
  • else if (btn.Text == “1/x”)
  • else if (btn.Text == “MC”)
  • else if (btn.Text == “MR”)
  • else if (btn.Text == “MS”)
  • else if (btn.Text == “M+”)
  • else if (btn.Text == “M-”)
  • else if (btn.Text == “C”)
  • else if (btn.Text == “CE”)

Notice that the pieces of code listed above correspond to the behaviors I described earlier. Coding gets a lot easier when you plan out what you want to do, then write it. It isn’t a dark art. Moving on, we’ve set resetFlag to true in a whole bunch of places but not to false once. That’s a problem. The actual resetting gets done when a user clicks one of the number buttons or the decimal button, so the first part of the if statement seems like a logical place to stick some code. When we reset the display TextBox, we will clear its text, set resetFlag to false, and set allowDecPoint to true, since there is no decimal in the TextBox.

if ((char.IsDigit(btn.Text, 0) && btn.Text.Length == 1) || btn.Text == ".")
{
    if (resetFlag)
    {
        txtDisplay.Clear();
        resetFlag = false;
        allowDecPoint = true;
    }
    // ...

Now, we need to implement one more tiny piece of the resetFlag modification. Remember when I mentioned that the user can’t backspace when resetFlag is set to true?

else if (btn.Text == "←")
{
    if (txtDisplay.TextLength > 0 && !resetFlag)
    {
        txtDisplay.Text = txtDisplay.Text.Remove(txtDisplay.TextLength - 1);
    }
}

We’ve added a “&& !resetFlag”. We went over what && is in the last lesson: it’s a logical AND, so for the code within this if statement to execute, txtDisplay’s text length must be greater than zero and !resetFlag must be true. We haven’t covered ! yet. ! is the NOT operator. It is used with Booleans and causes it to behave in the opposite manner from which it is set. That is, !true is false and !false is true. Therefore, in the code above, resetFlag must be false for the code to execute.

Let’s move on to the other variable. You won’t have to add as much code for this one – we only have to make sure allowDecPoint is true when we append a decimal and set allowDecPoint to false when we do. We don’t have to worry about allowDecPoint when we add any other numbers, so we just append the text. Modify the first part of your if statement to look like this:

if ((char.IsDigit(btn.Text, 0) && btn.Text.Length == 1) || btn.Text == ".")
{
    if (resetFlag)
    {
        txtDisplay.Clear();
        resetFlag = false;
        allowDecPoint = true;
    }
    if (btn.Text == "." && allowDecPoint)
    {
        txtDisplay.Text += btn.Text;
        allowDecPoint = false;
    }
    else if (btn.Text != ".")
    {
        txtDisplay.Text += btn.Text;
    }
}

The second if statement inside the larger if statement checks to see if allowDecPoint is true if the button text is “.”. If so, it allows the decimal to be appended. Otherwise, the != operator (not equal to) is used to see if the button’s text does not equal “.”. If it does not, it is a number so it gets added to the TextBox. Notice that if btn.Text is “.” and allowDecPoint is false, nothing happens, so it is not added to the TextBox.

Now, remember the reciprocal DivideByZeroException possibility I mentioned in the last lesson? We’re going to fix that now with another if statement. Rather than allowing the exception to be thrown, you should stop the problem in its tracks. Instead of using a try…catch statement, we’ll use an if statement to see if the value is zero before we divide. If so, we’ll just set the display value to zero:

else if (btn.Text == "1/x")
{
    decimal currVal = decimal.Parse(txtDisplay.Text);
    if (currVal != 0)
    {
        currVal = 1 / currVal;
        txtDisplay.Text = currVal.ToString();
    }
    else
    {
        txtDisplay.Text = "0";
    }
    resetFlag = true;
}

In this case, we use an else instead of an else if because it saves keystrokes – something is either zero or not, so there is no need to type out “else if (currVal == 0)”. If currVal != 0 and currVal == 0 are both false in the same if statement, something is seriously wrong.

Finally, we’ll make some changes to C and CE. Rather than clearing the TextBox, since we set resetFlag to true in both sections, we’ll set txtDisplay to zero like the Windows calculator does.

else if (btn.Text == "C")
{
    workingMemory = 0;
    opr = "";
    txtDisplay.Text = "0";
    resetFlag = true;
}
else if (btn.Text == "CE")
{
    txtDisplay.Text = "0";
    resetFlag = true;
}

To be consistent, open up the designer and set txtDisplay’s Text property to “0″ in the designer. Since resetFlag is true to begin with, it will just be erased when the user hits a button.

We have one last thing to do now: preventing the user from adding leading zeros to a number. Users should not be able to enter something like “00000016″. This isn’t binary! Accomplishing this actually took some trial-and-error, but it is actually trivial to emulate the behavior of the Windows calculator. Change your if(resetFlag) code to look like this:

if (resetFlag)
{
    txtDisplay.Clear();
    if (btn.Text != "0")
    {
        resetFlag = false;
    }
    allowDecPoint = true;
}

This way, the text will be reset again if the user hits zero.

You have been building up to this moment for seven lessons. You should feel very proud of yourself. You have gone from a beginner-level, “Hello World” tutorial to a console calculator to a calculator with a Windows GUI and 28 buttons that closely emulates the functionality of the Windows calculator when it is set in standard mode. Your calculator could be used as what we call a “little blue crutch” in school – a four-function calculator without graphing capability. With some of your new C# skill, you could write a program that graphs equations.

I know that the calculator is a common project for beginners. New developers all go through the “creative” stage, where they write more software than Microsoft. It’s a good thing – I’ve been there. My old computer had a hard drive with perhaps 50 Visual Studio projects, of which perhaps four were done. But still, I had lots of fun. Here are some projects that I enjoyed that you probably will, too:

  • A “network messenger” chat system that can either be connection-less (done with UDP instead of TCP) or use a client-server system (done with TCP, more advanced).
  • A video/media player. If you want, write some visualizations for it. Check out the Bass.NET library.
  • A YouTube downloader. I understand that this is way harder than it used to be. This project was particularly fun – I wrote a plugin system for the conversion formats (including my own FLV music extractor) and later ported it to Python on Ubuntu.
  • A rich text editor.
  • A web browser. Check out .NET’s WebBrowser control. Note that it’s IE-based, so you’ll come to hate it and want to check out WebKit.NET.
  • Pong.
  • A clock or alarm clock.
  • An email client – at least something to send emails. Receiving them is a lot harder (I stopped on mine when I got to MIME parsing).
  • Your own scripting or programming language. I wrote one called BeepScript then wrote a program to play Mario in computer beeps. Fun, fun, fun!
  • A Craigslist watcher.
  • An IDE for .NET similar to Visual Studio. Look into System.Reflection – you can compile .NET code very easily!
  • A .NET disassembler similar to ildasm.exe. Your C# code is actually compiled to a series of “opcodes” that aren’t machine code. The opcodes can be disassembled to CIL (Common Intermediate Language), which is basically .NET assembler. There are methods that allow you to disassemble .NET assemblies within the .NET framework.
  • An operating system. This isn’t very possible in C# (I say very because of COSMOS) but is lots of fun if you really want to learn what is going on with a computer.
  • A screenshot taker.
  • A drawing program or photo editor (or even photo cropper) similar to Microsoft Paint.
  • An RSS reader.

Here are some resources you might find helpful:

Whatever you choose to do, I wish you the best of luck with it. Thank you very much for reading this tutorial series. I hope it was helpful and I truly hope it sparked your interest in programming.

Click here to download my project (requires a VS product from 2010 or later).

A note on the licensing: You will notice that there is a file called license.txt in the root directory of the project. This project uses the MIT license. The MIT software license grants me the copyright (since I wrote it) and gives you unlimited rights to use the code in this project. I would have provided the source as a public domain dedication, but unfortunately, some nations do not have a “public domain”. The MIT license is about as close to the public domain as one can get with a license – you may sell this calculator if you want! I’m not saying that people would buy it.

If you do something interesting with it, I’d love to hear about it in a comment!

Creating a Calculator with C# Part 6: Making Your Calculator Function

In the last part of this tutorial series, you learned how to stick numbers into your TextBox. Hopefully you’re feeling fairly proud of yourself at this point. In this tutorial, we’ll implement the “calculator” part of the whole operation. To sum it up, we’ll make it function. Integral to the whole thing is the “if…elseif…else” statement we learned earlier (the math puns are now over). We’ll be using that to check the button text in our button click method. Based on the button text, the calculator will do something. Unfortunately, we haven’t attached all the Button.Click events yet. Let’s do that now. I won’t force you to type it all out if you don’t want to (I can understand why!).

public frmMain()
{
    InitializeComponent();
 
    btn0.Click += new EventHandler(ButtonClickHandler);
    btn1.Click += new EventHandler(ButtonClickHandler);
    btn2.Click += new EventHandler(ButtonClickHandler);
    btn3.Click += new EventHandler(ButtonClickHandler);
    btn4.Click += new EventHandler(ButtonClickHandler);
    btn5.Click += new EventHandler(ButtonClickHandler);
    btn6.Click += new EventHandler(ButtonClickHandler);
    btn7.Click += new EventHandler(ButtonClickHandler);
    btn8.Click += new EventHandler(ButtonClickHandler);
    btn9.Click += new EventHandler(ButtonClickHandler);
 
    // Below here are all the new ones
 
    btnBack.Click += new EventHandler(ButtonClickHandler);
    btnC.Click += new EventHandler(ButtonClickHandler);
    btnCE.Click += new EventHandler(ButtonClickHandler);
    btnDecimal.Click += new EventHandler(ButtonClickHandler);
    btnDivide.Click += new EventHandler(ButtonClickHandler);
    btnEquals.Click += new EventHandler(ButtonClickHandler);
    btnMC.Click += new EventHandler(ButtonClickHandler);
    btnMMinus.Click += new EventHandler(ButtonClickHandler);
    btnMPlus.Click += new EventHandler(ButtonClickHandler);
    btnMR.Click += new EventHandler(ButtonClickHandler);
    btnMS.Click += new EventHandler(ButtonClickHandler);
    btnMultiply.Click += new EventHandler(ButtonClickHandler);
    btnPercent.Click += new EventHandler(ButtonClickHandler);
    btnPlus.Click += new EventHandler(ButtonClickHandler);
    btnPlusMinus.Click += new EventHandler(ButtonClickHandler);
    btnRecriprocal.Click += new EventHandler(ButtonClickHandler);
    btnSquareRoot.Click += new EventHandler(ButtonClickHandler);
    btnSubtract.Click += new EventHandler(ButtonClickHandler);
 
}

Every button click now triggers our event. That’s what we want! Now, we can write an if statement to check for every other condition. Change the if statement in your ButtonClickHandler method to look like this:

if ((char.IsDigit(btn.Text, 0) && btn.Text.Length == 1) || btn.Text == ".")
{
    txtDisplay.Text += btn.Text;
}
// Two-number operations
else if (btn.Text == "*" || btn.Text == "/" || btn.Text == "+" || btn.Text == "-")
{
}
else if (btn.Text == "=")
{
}
// One-number operations
else if (btn.Text == "±")
{
}
else if (btn.Text == "√")
{
}
else if (btn.Text == "%")
{
}
else if (btn.Text == "1/x")
{
}
else if (btn.Text == "←")
{
}
// Memory operations
else if (btn.Text == "MC")
{
}
else if (btn.Text == "MR")
{
}
else if (btn.Text == "MS")
{
}
else if (btn.Text == "M+")
{
}
else if (btn.Text == "M-")
{
}
else if (btn.Text == "C")
{
}
else if (btn.Text == "CE")
{
}

This if statement handles every possible button input. Notice the change to the original statement. The || (“logical OR”) operator is used. The logical OR operator allows code to execute as long as one condition is true. So, if the character is a digit (which we want to add to the screen) or if the character is a decimal (which we also want to add to the screen), we will add it because in either case, (char.IsDigit(btn.Text, 0) || btn.Text == “.”) will be true.

Look at it mathematically – Booleans are essentially just bits, with a value of either 0 (false) or 1 (true). Bool1 || Bool2 || Bool3 || … || BoolN will return true if at least one of the values between Bool1 and BoolN is true. So false || false || true || false is true.

This operator gets used again in the first else if statement.  Obviously, btn’s text can’t be both all four of the characters it is compared against, but the code in that statement will execute if it is one of those characters.

There is also another big change to the first statement – I found a bug in my original code as I tested! Adding the btn.Text.Length == 1 check ensures that “1/x” does not get appended to the TextBox when that button is pushed. The && (“logical AND”) operator is the exact opposite of the logical OR operator: if any one value is false, the logical AND will return false. This means that True || True || False || True returns false.

Now, we simply plug in code to wire the calculator up, right? Easier said than done (especially when we get into idiot-proofing in the next tutorial), but we can start with the one-number operations right now, since they are the simplest. I mentioned a while ago that .NET has a whole bunch of numeric data types to choose from. We are absolutely not going to use integers – no modern calculator only does integer math and we don’t have hardware limitations. What else can we use? We could use floating points (the .NET type System.Double), but since floating points store approximations, we don’t want to go down that road. Luckily, .NET has a memory-hogging, slow, lovable data type called Decimal. Decimal can store just about any value you ever want. Its maximum absolute value is about 7.92×10^28 and its minimum absolute value (besides zero) is about 1×10^-28. That’s more than good enough.

Not convinced yet? This is the full maximum value your calculator can hold: 79,228,162,514,264,337,593,543,950,335. If 79 octillion isn’t big enough for you, then you still have another 228 septillion to go through. If that still isn’t enough, then perhaps you should just find a better calculator!

Now then, we’ll start with the ± function. We’ll get the current value of the TextBox, convert it to a Decimal, negate it (if it is negative, it will become positive and vice versa), convert its value back to a string, and then set the TextBox’s value equal to it. How do we do that?

else if (btn.Text == "±")
{
    decimal currVal = decimal.Parse(txtDisplay.Text);
    currVal = -currVal;
    txtDisplay.Text = currVal.ToString();
    // Shorthand version:
    // txtDisplay.Text = (-decimal.Parse(txtDisplay.Text)).ToString();
}

This code is displayed in both the long version and the shorthand version that I would probably use and have to write a comment about in production code. It gets the value of the display TextBox (with a glaring lack of error checking), negates it, then sets the display text again. The shorthand version does the same thing with a few more parentheses and two fewer lines of code. Both do the exact same thing.

With the ± function done, we can move on down to the √ (square root) operation. Just like before, we’ll get a Decimal value, but this time we will square root it. C# does not have a power operator or a square root operator (the same as raising a number to a power of 1/2) so we will have to use a method in the System.Math class.

else if (btn.Text == "√")
{
    decimal currVal = decimal.Parse(txtDisplay.Text);
    currVal = (decimal)Math.Sqrt((double)currVal);
    txtDisplay.Text = currVal.ToString();
}

The most noteworthy part of this code is the second line. Math.Sqrt (the square root function) takes a double as an argument and returns another double. This is probably due to performance reasons but it comes at the expense of accuracy. We will simply have to convert from a Decimal to a Double and back again. We accomplish that with a cast – first on currVal inside the parentheses and then on the whole thing.

Next are the % (percent) and 1/x (reciprocal) buttons. Note that the reciprocal button will crash the program if you try to find the reciprocal of 0. This will be fixed in the next tutorial. For now, we do something similar to the last two methods:

else if (btn.Text == "%")
{
    decimal currVal = decimal.Parse(txtDisplay.Text);
    currVal = currVal / 100;
    txtDisplay.Text = currVal.ToString();
}
else if (btn.Text == "1/x")
{
    decimal currVal = decimal.Parse(txtDisplay.Text);
    currVal = 1 / currVal;
    txtDisplay.Text = currVal.ToString();
}

For the percent, we divide the value in the TextBox by 100. For the reciprocal, we divide 1 by the value in the TextBox. Feel free to try these out – provide some input and hit the button. If you find the reciprocal of a number that has a repeating decimal, the rounding will be a little off if you hit the reciprocal button twice. Try this with the number 7 or 9. We won’t worry about that for the time being.

Next is the back (←) button. This button needs to trim off the last character of the TextBox.

else if (btn.Text == "←")
{
    if (txtDisplay.TextLength > 0)
    {
        txtDisplay.Text = txtDisplay.Text.Remove(txtDisplay.TextLength - 1);
    }
}

This code actually contains some error checking – if the text length of the TextBox is zero, then the line within the if statement will throw an exception. The check prevents the exception. If you are wondering how I find all these properties, I don’t usually have to remember the name or even look on MSDN. You should notice when you type something into the editor that a little box pops up sometimes:

Intellisense Image

This is one of the most helpful inventions of all time at work.

This box contains everything that has to do with whatever variable or class you’re working with. It also contains information about method arguments.

Anyway, back on subject – the String.Remove method as we’ve used it gets rid of everything at or after the specified character index in the string. Indices are zero-based (the first character is at index zero, the second is at one, and so on) while lengths are one-based (one-character strings have a length of one, two of two, and so on), so we have to subtract one from the string’s length to get the last character. We then remove it and set the TextBox text.

Now, we move on to the memory. We need to declare two new class variables. One should be called memory and the other should be called workingMemory (because I can’t think of anything better to call it). Memory will be used for the memory buttons (MR and the like) while workingMemory will store numbers before operations are conducted on them. Both should be Decimals. While you’re at it, declare a string called opr (short for operator, which we can’t use as a variable name because it is a C# keyword).

I say class variables because they need to be accessible to all the methods in the class. The curly brackets help categorize everything in your code, but they also define a hierarchy. Variables declared at one hierarchical level cannot be accessed at a higher one.  The more open curly brackets you are within, the lower your hierarchical level is. Class variables live in the class, not a method, and so are accessible to all the methods of the class.  All that explaining was for this:

public partial class frmMain : Form
{
    decimal memory = 0;
    decimal workingMemory = 0;
    string opr = "";
// ...
// The rest of the code goes here

Now that we’ve declared and initialized our variables, we can start working on the memory piece of the application. The easiest part (not that any of them are difficult) to implement is the MC function. MC clears the memory. Simply set memory equal to 0. For MR, we have to recall the memory value into the TextBox – set the Text to a string version of the memory variable.

MS stores the TextBox value in memory and removes the value from the TextBox, so we will just set memory equal to the value in the TextBox then clear it. Finally M+ and M- add and subtract (respectively) from the value stored in memory, so we act accordingly in the code. This part is actually quite simple.

else if (btn.Text == "MC")
{
    memory = 0;
}
else if (btn.Text == "MR")
{
    txtDisplay.Text = memory.ToString();
}
else if (btn.Text == "MS")
{
    memory = decimal.Parse(txtDisplay.Text);
    txtDisplay.Clear();
}
else if (btn.Text == "M+")
{
    memory = memory + decimal.Parse(txtDisplay.Text);
}
else if (btn.Text == "M-")
{
    memory = memory - decimal.Parse(txtDisplay.Text);
}

Before we move on to the “big four” operations, we have to take care of C and CE. C means clear – it clears the working memory (not the number the user chose to store in memory), the operation, and the TextBox. CE means clear entry and only clears the TextBox. We can write the code to take care of both of those:

else if (btn.Text == "C")
{
    workingMemory = 0;
    opr = "";
    txtDisplay.Clear();
}
else if (btn.Text == "CE")
{
    txtDisplay.Clear();
}

Setting opr equal to an empty string (“”) will come into play later with the equals button, and setting workingMemory to 0 will have an effect too. Both of these methods call txtDisplay.Clear() which is a fast way of getting rid of the text in a TextBox. Now, we move on to the operations.

The way we will be making these operations work is rather rudimentary. In the next tutorial, we’ll look at how we can better emulate the way the Windows calculator works since it is something most users are already familiar with and will reduce our program’s learning curve. For now, in our operation part of the if statement, we need to set what the operator is, set workingMemory, and clear the TextBox so the user can enter more values. Easy enough, right?

else if (btn.Text == "*" || btn.Text == "/" || btn.Text == "+" || btn.Text == "-")
{
    opr = btn.Text;
    workingMemory = decimal.Parse(txtDisplay.Text);
    txtDisplay.Clear();
}

Finally, in the equals button part, we need to get the second value from the TextBox and put a resulting value in the TextBox based on what the operation is. For this, I’ve decided to use a switch statement. The reason I used an if statement instead of a switch statement before is because you cannot use method calls in a switch like I did in the if – you can only compare values (so char.IsDigit(btn.Text, 0) would not be allowed, which would add a bunch of code). This time, there are only four possible values, so I chose a switch:

else if (btn.Text == "=")
{
    decimal secondValue = decimal.Parse(txtDisplay.Text);
    switch (opr)
    {
        case "+":
            {
                txtDisplay.Text = (workingMemory + secondValue).ToString();
                break;
            }
        case "-":
            {
                txtDisplay.Text = (workingMemory - secondValue).ToString();
                break;
            }
        case "*":
            {
                txtDisplay.Text = (workingMemory * secondValue).ToString();
                break;
            }
        case "/":
            {
                txtDisplay.Text = (workingMemory / secondValue).ToString();
                break;
            }
    }
}

Your calculator is now totally wired. It’s far from user-friendly and has some minor issues, but we’ll work on it! You can do one thing to reduce errors right now – go to the Forms designer, click on the TextBox, and set its ReadOnly property to true. This will prevent troublemakers like me from typing gibberish into your TextBox.

Great job on this tutorial. At this point, you have a working calculator. The only thing left to do is to make it work well.

Working Calculator Image

Woo-hoo!!

Creating a Calculator with C# Part 5: Casting, Handling Events, Getting Input and Useful Methods

My thoughts and prayers go out to every individual who was hurt in the shootings last night in Colorado.

In the last installment of this tutorial, you learned how to use the Windows Forms editor. That’s a big step, but the Windows Forms editor isn’t much help if you don’t know how to use your creation. I saw Spiderman last night (because I didn’t want to stay out until two watching Batman on a day I had to drive for 4 hours), and using the Forms editor without being to write the corresponding code is kind of like inserting lizard DNA into your body when it actually turns you into a lizard – insane.

Now, open up your project and right-click on the form you made. Choose “View Code”. The code editor that you saw with the console application will pop up, but the code will look different. Where’s the main method, you ask? It’s there – but it’s in Program.cs. I suggest you don’t mess with it right now. Anyway, you have a code file that looks like this:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
 
namespace Calculator
{
    public partial class frmMain : Form
    {
        public frmMain()
        {
            InitializeComponent();
        }
    }
}

This seems a little more complex than the console application, does it not? Just like before, we have using statements (although Windows applications have more by default). We have a namespace and a class and a method. There are two key differences. The first is the “: Form” thing, and the second is that the frmMain() method doesn’t have a return type.

The “: Form” thing means that our class inherits from the class System.Windows.Forms.Form. The Form class provides basic form functionality and lets us put controls on the screen. We can set the size of the form, change the color of the form, move the form, and do pretty much whatever we want with the form. Inheriting from the Form class allows us to get that functionality and add whatever we need onto it.

The latter difference also bears a lot of explaining. It is called a constructor. Constructors are methods that are called whenever a new instance of a class is created. What do I mean by that? Remember how I told you that you can use classes as variables? Each variable contains a different instance of a class, and a class instance is created with the “new” keyword. So a class could contain two variables, v1 and v2, and two variables could be declared with separate instances of the class. v1 and v2 could be 1 and 2 in the first and 5 and 6 in the second, like so:

// Call this from the Main method of a console application.
static void ClassExample()
{
    A a = new A();
    A b = new A();
    b.v1 = 5;
    b.v2 = 6;
 
    Console.WriteLine(a.v1 + " " + a.v2 + " " + b.v1 + " " + b.v2);
}
 
// Put this outside the Program class
public class A
{
    public int v1 = 1;
    public int v2 = 2;
}

The above code will output “1 2 5 6″. Declaring something within a class as static means it does not go with an instance of a class; changing it will affect all instances.

For now, all you need to know is that the constructor runs before the form opens. We’re going to take advantage of that by adding some code to the constructor:

public frmMain()
{
    InitializeComponent();
 
    btn0.Click += new EventHandler(ButtonClickHandler);
}

While you’re add it, add the ButtonClickHandler method to stop the error about ButtonClickHandler not existing in the current context:

private void ButtonClickHandler(object sender, EventArgs e)
{
    throw new NotImplementedException(); // Prevent head-scratching later on.
}

Now I have three more things to explain: the btn0.Click += part, the private keyword and the arguments that ButtonClickHandler requires.

  • btn0.Click is called an event. The event happens when btn0 (the zero button – I’m writing this a full day later and I can figure out what controls do because of my naming convention!) is clicked. += is an operator that appends something, so you are essentially adding the event handler method to the Click event. In other words, when the user clicks the button, that method will be automatically called.
  • The private keyword means a method may only be called by other methods in the same class. There is no sense in making an event handler public; it will only make it easier for outside code to interfere with our program.
  • ButtonClickHandler requires two arguments: sender and e. Sender is whatever raised the event – so when you click btn0, sender is btn0. The EventArgs (e) are the base EventArgs class and don’t do anything useful, but some EventArgs let you do cool things like keep a form from closing when a user presses the X button or getting the location of the mouse.

But John, you said C# is type-safe. The type of btn0 is Button, not object! That should be an error!

I like the way you’re thinking, but remember inheritance? Btn0 is a button. You’re correct about that, but if you go back far enough in the family tree, btn0 is an object because every single class in C# is an object. String is an object. EventHandler is an object. System.Linq.ParallelQuery is an object. So, you can use a cast to convert the object into what it actually is. We’ll get there in a bit. For now, add this event handler to the other nine number buttons.

public frmMain()
{
    InitializeComponent();
 
    btn0.Click += new EventHandler(ButtonClickHandler);
    btn1.Click += new EventHandler(ButtonClickHandler);
    btn2.Click += new EventHandler(ButtonClickHandler);
    btn3.Click += new EventHandler(ButtonClickHandler);
    btn4.Click += new EventHandler(ButtonClickHandler);
    btn5.Click += new EventHandler(ButtonClickHandler);
    btn6.Click += new EventHandler(ButtonClickHandler);
    btn7.Click += new EventHandler(ButtonClickHandler);
    btn8.Click += new EventHandler(ButtonClickHandler);
    btn9.Click += new EventHandler(ButtonClickHandler);
}

Now, whenever you click one of the number buttons, your program will crash because of an unhandled exception! Exciting stuff – you can try it out if you want but we really need more functionality than that. Go to your handler and add this (by the way, my TextBox is named txtDisplay):

private void ButtonClickHandler(object sender, EventArgs e)
{
    Button btn = (Button)sender;
    if (char.IsDigit(btn.Text, 0))
    {
        txtDisplay.Text += btn.Text;
    }
}

WHOA, WHOA, WHOA! I thought this was a basic course on C#! That looks like gibberish! I know it does, but it’s the best I can do to make that work. The way this calculator is going to work is to save ourselves a lot of extra coding, we’re going to have one event handler for all the buttons, and figure out which button we’re working with based on sender. To do so, we create a button variable, and use what is known as a cast to turn sender into a Button. You can’t do that arbitrarily; the classes must be compatible. That is, going back and forth from Button to object is fine, but going from Button to TextBox would cause your program to crash.

The next thing the code does is to look at the button’s text and decide if it is a number. The char.IsDigit method does just that. Since the number buttons only have one digit on them, using char (which represents a character in C#) is fine because one digit means there is only one character. If the character turns out to be a number, we add it to the display with the += operator, which appends it.

I know this was a short tutorial, but I have to get on the road to Bot Blast now. As always, thanks for reading!

Creating a Calculator with C# Part 4: Designing the Windows Form

We now move on to the fun part: creating a GUI. GUI creation in C# requires absolutely no code. You can drag-and-drop what are known as controls on to your window, which is called a form. Controls are items on a form that serve some sort of function. I realize how broad that definition is, but controls can be anything from a TextBox (which you use to enter text) to a Button to a Label to a WebBrowser. C# provides you with all sorts of goodies to make cool programs with. In this tutorial, you will be designing your calculator window. Now, I know you have never designed a form before, so we should probably have a model to design our form from…

The Windows Calculator

Oh, hey. That’s convenient.

The Windows calculator is actually a very useful program. Most of the time, I use it in scientific mode because it is the most familiar to me (since I use a TI-30XIIS in school whenever I don’t need to graph and a TI-84+ when I do), but there are other modes as well. The programmer mode is actually kind of useful for testing logic operations before you try them in code (having a xor button can come in handy).

Windows Programming Calculator

So is being able to enter numbers in binary.

Our calculator will be based on the most basic calculator. It will have all of the same functions, but will look a little different. Why? The Windows calculator uses a theme that looks like Windows Ribbon, and we’ll be using the default theme. What’s Ribbon, you ask? Look at Microsoft Word 2007 or later and compare it to Word 2003.

I hate to break it to you, but you’ll need to create a new project in Visual C#. Fire it up, then go to File > New. This time, select Windows Forms Application as your project type and name your project Calculator. Hit OK. Go up to the View menu, and choose Toolbox (or press Control+Alt+X) and then go up again and choose Properties Window (or press F4). Press the pushpin icon to make both windows dock. Your window will change to look something like this (remember that I have Visual Studio so my window has a few additional features):

Windows Forms Designer

No errors! So far, so good!

I know it looks overwhelming, but you will find the forms designer to be fast, easy and intuitive. On the left side of the screen is the toolbox. It contains every control that you can use in your C# application. The most common ones are listed under Common Controls, but at the top (where it says All Windows Forms), you can find all the controls. On the right side is the property editor. It modifies a control’s properties. What are properties, you ask? Properties are attributes of a control – anything from a label’s text to a form’s border style. To modify a control, click on it and then search for the corresponding property in the editor. I’ll walk you through it more once we start adding controls.

In the top middle is the form preview. When you drag-and-drop (yes, drag-and-drop!) controls from the toolbox into the form, you can move them around. What the form looks like here will be what it looks like when your program runs. If you make a mistake when adding a control, you can either right-click it and choose delete or click on it and press the delete key.

Finally, the bottom middle has the error list. You may have seen it before if you made mistakes in the first three tutorials. If you can’t see it now, you can go to View > Error List. Make sure to click on the pushpin if you want it to stay showing. Otherwise, it lives in the bottom toolbar.

Let’s start designing our calculator form. Drag the box at the bottom right of the form out to make it a little bit bigger, then add a TextBox to the form from the common controls in the toolbox. You’ll notice that if you mouse over it, your cursor indicates that you can move it. Drag it to the top-left of the form. You’ll notice some blue spacer lines appear. They are suggesting how close your TextBox should be to the edge. Let me suggest something – listen to them. They know what they’re talking about. Finally, drag the right side of the TextBox over so that it stretches all the way across your form. Again, pay attention to the blue lines. When you’re done, it will look like this:

Form with Textbox

It already looks like a calculator.

Now, we’re going to edit the TextBox’s properties a little bit. Make sure it’s selected, then go to the properties editor. Find where it says (Name) and change textBox1 to txtDisplay. Then, go to Font and click in the box to the right of it. A button with an ellipsis will pop up. Click that button, and an editor will pop up. Change the font size to 24pt. Notice how the TextBox grows.

Now, why did we change textBox1 to txtDisplay? When we access the TextBox through code, we will want to know what it does. Imagine having a form with 16 TextBoxes, named textBox1 through textBox16. One of the TextBoxes has a first name in it. Which is it? Now imagine it’s named txtFirstName – it becomes self-explanatory. The txt prefix categorizes the control and makes it easier to find. You should always prefix your control names. Here are some prefixes I use:

  • frm for Form
  • txt (sometimes tb) for TextBox
  • btn for Button
  • lb for ListBox
  • rtb for RichTextBox
  • lbl for Label
  • pan for Panel
  • cb for ComboBox

Notice how the prefix is simply an easy-to-remember abbreviation. If you want, you can rename the form from Form1 to frmMain (I usually name my Windows Applications’ main form frmMain), but since this program will only have one form, you don’t need to if you don’t want to.

Next, drag two buttons on the form. Resize the first one so it looks like you will be able to have five columns of buttons and 6 rows. Then, place the second one below the first and stretch it to be the same width, then place it to the side of the first to make it the same height. The little blue helper lines (or maybe a pink line which indicates alignment) will appear again to let you know when you’re all set!

Adding Buttons

2 down, 26 to go.

Now, start adding buttons to make your window look like the Windows calculator. Remember that the button on the bottom-left is two buttons wide and the one on the bottom right is two buttons tall. Don’t worry about fonts, names or text yet. Just get the buttons on the form. If you need to, you can resize the buttons or the form to make everything fit. Making this part look good is up to you – I can’t drag-and-drop for you (actually, I can but I’m not going to). Here’s my finished product. I had to make my form wider and a tiny bit shorter.

Skeleton Form

My example only had 16 TextBoxes with non-descriptive names? We have 28 buttons here!

Hopefully you see the problem here – the buttons look like we have a calculator here, but we have no idea what any of the buttons do. Our users don’t either. I know we don’t like them, but we have to deal with them. Go through all the buttons and change the text to match the Windows calculator. I know your job is to code, not to scour the web for special characters, so here’s all that you’ll need: √±←☺. Okay, you won’t need the smiley face but I included it just in case (you might want to read ahead a bit now).

When you’re done changing button texts, you also need to change the button names. You need to come up with some sort of naming convention for your buttons. A naming convention is a standardized way of naming your controls so you don’t end up with one control named foo3, one named duck, and another named overlyDescriptiveNameForButtonOnLeftSideOfForm. You don’t have to follow the one I suggest, but please make it reasonable. Note that your names can only contain letters, numbers, dashes, and underscores and must start with a letter or underscore.

  • For all numbers: btnNumber (ie. the button for 3 is btn3)
  • Any functional or operation button: btnFunction
    • MC is btnMC, MR is btnMR, MS is btnMS, M+ is btnMPlus, M- is btnMMinus, CE is btnCE, C is btnC
    • ← is btnBack, ± is btnPlusMinus, √ is btnSquareRoot, % is btnPercent, + is btnAdd, – is btnSubtract, * is btnMultiply, / is btnDivide, 1/x is btnRecriprocal, = is btnEquals and . is btnDecimal

That covers it. Now you can get to work. I’ll wait for you to finish by showing you that mine is already done. Haha.

Completed Button Titles

We still haven’t written a single line of code.

Now, there are a few things left to do. The first is to make these buttons look better, because the font looks comically small right now. You can change the font on every button at once by clicking one, then holding shift or control and selecting all the others. Just like before, click on the box to the right of where it says “Font” in the property editor, then click the button that pops up. Change the font to whatever you want. Bold 14pt seems to be big enough for my huge calculator.

Next, we’re going to modify the form, so click on the border to deselect all the buttons and to select the form. Change the Text property from “Form1″ to something better. “My Calculator” wouldn’t be bad. Next, find the MaximizeBox property and set it to false by clicking where it says True next to it, hitting the button that pops up, and choosing false. Finally, change FormBorderStyle to FixedSingle. The last two actions will keep users from resizing your form at all.

Now, the moment of truth. Hit F5 or press the green play button to run your program and display your form.

Finished Product

It’s beautiful.

You can type in the TextBox and hit all the buttons. Of course, nothing happens yet because we haven’t written any code, but we still have a beautiful product.

A common question is how the heck the Forms Designer works, since the buttons just appear and you don’t have to write any code. If you go to View > Solution Explorer and click the arrow next to Form1.cs, you will see two more files pop up. The designer generates code, which gets put in Form1.Designer.cs. My designer file has 425 lines of code in it. The designer just saved you a ton of work – learn to use it well and you will be making gorgeous GUIs very quickly. Good work today!