A few weeks ago I showed you how you can write a simple calculator in C#. We then wrote our application as a console application. So you definitely know how to approach writing such applications. Unfortunately, console applications do not have a very extensive view, i.e. user interface, which makes them quite difficult to use. Therefore, we can now go a step further and write a similar application, but as a desktop application, of course still in C#. In today's article, we will start writing the first complete desktop application in Windows Forms. We will divide writing this application into two parts. In the first part, i.e. in this article, I will show you how to approach creating a user interface (UI) in Windows Forms, where we will use ready-made controls available by default in Visual Studio, and in the next part we will write the entire logic of this application.
Creating a new project
We will be creating an application in visual studio, so please run visual studio and first create a new windows forms project.
Search for windows forms, make sure it is C#. That is, choose Windows Forms App (.NET).
Then enter an appropriate name, it can be Calculator.WindowsFormsApp. We will stick to the convention from the previous article here. That is, solution name + application type. Thanks to this, we can separate the desktop application that we will write in Windows Forms from the console application that we wrote earlier. Click create.
Set .NET 5
And after a while, a new project will be added to our solution. We can still change the target framework so that it is .NET 5.0. Just right-click on the project name, then select Properties.
Just save your changes and the framework will automatically be changed to .NET 5.0.
Project launch
Then, at the top of the menu, it is worth marking this Windows Forms project as a starter project.
Thanks to this, if you now run the application via CTRL+F5, this Windows Forms project will be launched. You can set the same in the Solution Explorer window, just right-click on the project name and select Set as Startup Project. After running, our application looks like this:
Creating a user interface
So we will try to create a nice calculator here. If you want to add new controls, just use the so-called Toolbox. It is located on the left side, next to the main window. If you don't have it here, select the View button in the menu and then Toolbox.
If you want to keep the toolbox visible permanently, use the pin in the upper right corner of this window. As you can see, we have many controls available in the toolbox, the most popular ones that you will use most often are Button, TextBox, CheckBox, ComboBox, DateTimePicker, DataGridView, Label, NumericUpDown, etc. there is a lot of them and they will certainly develop over time. more applications, you will get to know each of them better.
Returning to our application, we will definitely need several Buttons and TextBox controls on our form to display the equation result. So first, using drag & drop, I will drag it from Toolbox to my main form called Form1 (we can of course also change this default name) - TextBox. Then you can also adjust the window size and this is what our main window might look like now:
Now we need some buttons, please search the Toolbox for Button controls. Just like before, use the drag & drop method to drag this button to our main form. Also you can set the size of this button. It can be 90x90. You can do this directly on the form or in the Properties window of each control.
Returning to our application, we will definitely need several Buttons and TextBox controls on our form to display the equation result. So first, using drag & drop, I will drag it from Toolbox to my main form called Form1 (we can of course also change this default name) - TextBox. Then you can also adjust the window size and this is what our main window might look like now:
Now we need some buttons, please search the Toolbox for Button controls. Just like before, use the drag & drop method to drag this button to our main form. Also you can set the size of this button. It can be 90x90. You can do this directly on the form or in the Properties window of each control.
In addition to setting the button size, you can set and customize many other properties in the Properties window.
We will definitely need more such buttons. For all numbers – we need 9 buttons. We will also need 0, a comma, our operations, i.e. division, subtraction, multiplication, addition, displaying the result and deleting the value from our TextBox. We also need 17 buttons. You can copy a button that is already on the form and paste it 16 times, setting the appropriate position for each of them.
Adjust the window size accordingly. Then the button sizes. Usually, the buttons: 0, adding and displaying the result are slightly larger. We can also do this in our application, which will fill in the empty areas. To make our calculator more readable, we can now also complete the text on each button. You can do this by setting the appropriate text for each button in the Properties window (if this window is not visible for you, also click the View button in the menu and then Properties Window), specifically the properties: Text.
Our application is slowly starting to resemble a calculator :) It is also worth customizing the TextBox a bit, you can set some example numbers to its Text property, so that we can immediately adjust the styles.
Ok, so it doesn't look very nice yet :) Let's try to set the appropriate properties in the Properties window for this TextBox. First of all, we need to adjust the font. Try setting Size: 28. We also want the text to display on the right side. To do this, set TextAlign: Right. Because the font has been increased, the entire TextBox has also been increased, so adjust the remaining buttons so that they do not overlap each other.
It is also a good practice to set the Name property for all controls, because we will refer to them later in the code behind. It would be worth referring to them by specific, descriptive names, and not by default ones such as textBox1, button1, button10, etc. We can start with textBox, give it a name, e.g. tbScreen (tb stands for TextBox).
We will definitely need more such buttons. For all numbers – we need 9 buttons. We will also need 0, a comma, our operations, i.e. division, subtraction, multiplication, addition, displaying the result and deleting the value from our TextBox. We also need 17 buttons. You can copy a button that is already on the form and paste it 16 times, setting the appropriate position for each of them.
Adjust the window size accordingly. Then the button sizes. Usually, the buttons: 0, adding and displaying the result are slightly larger. We can also do this in our application, which will fill in the empty areas. To make our calculator more readable, we can now also complete the text on each button. You can do this by setting the appropriate text for each button in the Properties window (if this window is not visible for you, also click the View button in the menu and then Properties Window), specifically the properties: Text.
Our application is slowly starting to resemble a calculator :) It is also worth customizing the TextBox a bit, you can set some example numbers to its Text property, so that we can immediately adjust the styles.
Ok, so it doesn't look very nice yet :) Let's try to set the appropriate properties in the Properties window for this TextBox. First of all, we need to adjust the font. Try setting Size: 28. We also want the text to display on the right side. To do this, set TextAlign: Right. Because the font has been increased, the entire TextBox has also been increased, so adjust the remaining buttons so that they do not overlap each other.
It is also a good practice to set the Name property for all controls, because we will refer to them later in the code behind. It would be worth referring to them by specific, descriptive names, and not by default ones such as textBox1, button1, button10, etc. We can start with textBox, give it a name, e.g. tbScreen (tb stands for TextBox).
We need to do the same with all our buttons. So, in accordance with their purpose, we can name them, e.g. btn0, btn1, btn2, btn3, btn4, btn5, btn6, btn7, btn8, btn9, btnComma, btnClear, btnDivision, btnSubtraction, btnMultiplication, btnAdd and btnResult. Thanks to this, we will know which button exactly was clicked. If we try to add e.g. events in code behind, we will add them here after a specific name. Similarly, in code behind we can change the properties of each control, we will also refer to it by name, i.e. by the Name property. If we change something in code behind, we will know specifically which control the name refers to, this is quite important because these default names are not very good. In some cases it fits, e.g. for 5 there is button5, but for adding there is button15 and that doesn't tell us anything. I also like to stick to this convention. It takes some work, but such specific and clear names of controls will certainly make things easier for us in the future.
Let's get back to styling our app. Let's adjust the font of all buttons so that the text on them is more visible. Let it be font 20.
It looks better now. And we can play with some colors here. For example, we can set the background color to gray. To do this, I select the main form and look for the BackColor property in the Properties window. We can set the color: Gainsboro. We can set a background color for our number buttons, e.g. green (MediumSeaGreen). We can also set a different color for the operation, let it be Gray. We will also set a different one for the result, so that it also stands out a bit. Maybe blue this time (RoyalBlue). Finally, we will set the Clear button to red (IndianRed). We can also set the font to white for all these buttons, which will also make it more visible. We are also looking for Font and set ForeColor: White here. Our interface is ready, so you can now run the application (CTRL+F5).
Let's get back to styling our app. Let's adjust the font of all buttons so that the text on them is more visible. Let it be font 20.
It looks better now. And we can play with some colors here. For example, we can set the background color to gray. To do this, I select the main form and look for the BackColor property in the Properties window. We can set the color: Gainsboro. We can set a background color for our number buttons, e.g. green (MediumSeaGreen). We can also set a different color for the operation, let it be Gray. We will also set a different one for the result, so that it also stands out a bit. Maybe blue this time (RoyalBlue). Finally, we will set the Clear button to red (IndianRed). We can also set the font to white for all these buttons, which will also make it more visible. We are also looking for Font and set ForeColor: White here. Our interface is ready, so you can now run the application (CTRL+F5).
I think it's quite alright. Of course, our buttons are not yet supported here, we will deal with this in the next material. It also looks like our user interface is ready. Finally, clear the test data that we previously set in the Text property of the TextBox.
As you can see, creating a windows forms application user interface is not complicated. You can create a pretty good-looking desktop application in a short time. All we need to do is implement the entire logic of our application and this is what we will cover in the next material.
If you liked this article, be sure to join my community. Sign up for the free newsletter, where every week I share valuable materials, especially regarding C# and the .NET platform (free subscription - newsletter).
SUMMARY
As you can see, creating a windows forms application user interface is not complicated. You can create a pretty good-looking desktop application in a short time. All we need to do is implement the entire logic of our application and this is what we will cover in the next material.
If you liked this article, be sure to join my community. Sign up for the free newsletter, where every week I share valuable materials, especially regarding C# and the .NET platform (free subscription - newsletter).
