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 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).
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):
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:
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!
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.
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.
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.
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!