How to Create Your First Windows Forms (Winforms) Application in Visual Studio

Get to grips with Microsoft Visual Studio and develop your own apps with Windows Forms with almost no coding required.

Windows Forms is a framework available in Visual Studio that allows you to build desktop applications with the assistance of a graphical user interface. This allows you to click and drag widgets such as buttons or labels directly onto a canvas, and manipulate the properties of each widget such as its font-size, color or border.

In this article, a simple Celsius to Fahrenheit Converter will be used as an example to go through the basics of how to set up a Windows Form Application. Visual Studio 2019 Community Edition is the edition used for this tutorial.

How to Create the Windows Forms Project in Visual Studio

First, create the project in Visual Studio.

1. Open Visual Studio and select Create a New Project.
2. Visual Studio will provide you with a list of project templates you can choose from.

3. To create a Windows Forms Application, search for Windows Form App and select it from the list of templates. Once this is selected, click on Next.

   

   If the Windows Form App option is not available on the list, modify your installed version of Visual Studio. In Visual Studio Installer, add the .NET desktop development workload for Desktop and Mobile, and re-launch Visual Studio.

4. Add a name and location for the project, and click on Next. The location is the directory where the code files will be stored.

   
5. On the next screen, keep the default selection of .NET Core 3.1.

6. Click Create.

   

7. Once Visual Studio has finished creating the project, the project will open.

   

How to Add Elements to the Project Canvas

The canvas is the white area located at the top-left of the screen. Click and drag the points on the bottom, right, or bottom-right of the canvas to resize it if needed.

To create the UI of the application, add widgets such as buttons or text boxes onto the canvas.

1. Open the View Tab at the top of the window, and select Toolbox.

   
2. This will add a toolbox to the left side of the application. Select the pin icon in the top-right of the toolbox to pin it there permanently.

3. This is where you can drag any widget from the toolbox onto the canvas. Highlight a button from the toolbox, and drag it onto the canvas.

   

4. Drag two more text boxes onto the canvas, along with three labels (two labels for each text box, and one label for the title at the top of the application).

   
5. Every widget on the canvas has properties associated with them. Highlight a widget to display the Properties window in the bottom-right of Visual Studio, which lists all the properties that widget has. These properties can include the text, name, font size, border, or alignment of the highlighted widget.

6. At the moment, the text on these widgets still say label1, label2, or button1. Select the label1 widget and edit the Text property in the properties window to say "Celsius to Fahrenheit". Change the font size to be 22pt.

   
7. Similarly, edit the properties of the other widgets on the canvas to be the following: Widget Property New Value label2 Text Celsius label3 Text Fahrenheit button Text Calculate Fahrenheit text box ReadOnly True

How to Handle Events and Write Code in the Code-Behind

Widgets on the canvas can be tied to events. Events can include things like clicking on a button, changing the text inside a text box, or selecting a particular radio button. When these events happen, it can cause a section of code in the Code-Behind to trigger.

C# is the language used when creating Windows Forms. If you haven't already used C#, there are many practical reasons to learn C# programming.

For this particular application, add an event to the Calculate button, to trigger a section of code to run when this button is pressed.

1. Double-click the Calculate button to automatically open Form1.cs with a new Event method:

   private void calculateButton_Click(object sender, EventArgs e)

2. This is where you will add the code that will perform the Celsius to Fahrenheit calculation, and display the result in the Fahrenheit text box. To do this, you need to be able to read the value from the Celsius text box, and modify the Fahrenheit text box to display the result.
3. Go back to the canvas, and re-edit the properties as shown before. This time, edit the Name property for both the Celsius and Fahrenheit text boxes. These names can be used to reference the text boxes in the code. Widget Property New Value Celsius Text Box Name celsiusTextBox Fahrenheit Text Box Name fahrenheitTextBox
4. Go back to the calculateButton_Click function in Form1.cs.
5. Now, the Celsius text box can be referred to in the code using the name "celsiusTextBox". The Celsius value the user entered is stored in its Text property. However, since it's a string, parse this into a double in order to include it in the future Fahrenheit calculations.

   private void calculateButton_Click(object sender, EventArgs e)
   {
    // Get the value that the user entered in the Celsius Text Box
    double celsiusValue = Double.Parse(celsiusTextBox.Text);
   }

6. The celsiusValue variable now stores the value that the user entered in the Celsius Text Box. The formula for converting Celsius to Fahrenheit is (celsiusValue * 9 / 5) + 32. Therefore, the result can now be calculated and stored in the Fahrenheit Text Box.

   private void calculateButton_Click(object sender, EventArgs e)
   {
    // Get the value that the user entered in the Celsius Text Box
    double celsiusValue = Double.Parse(celsiusTextBox.Text);
    // Apply the calculation
    double result = (celsiusValue * 9 / 5) + 32;
    // Store the result in the Fahrenheit Textbox
    fahrenheitTextBox.Text = result.ToString();
   }

How to Run and Debug the Windows Forms Program

Running the Windows Forms Program in Visual Studio

Now that the UI and code logic is set up, run the program to see it working.

1. To run the program, select the green arrow at the top of the toolbar in Visual Studio.

   

2. Once the project has loaded, add a value into the Celsius text box and press the Calculate button. This will add the result into the Fahrenheit text box.

   
3. If the program is blurry at runtime, it is likely your application is not DPI aware. This can cause scaling and resolution issues, so this will need to be enabled. You can also read more about configuring display scaling on Windows 10 for High-DPI monitors.
4. Right-click on the TemperatureConverter Project in the Solutions Explorer. Select Add, then select New Item.

5. Search for the Application Manifest File, and click Add.

   
6. Copy the following code into the new app.manifest file, as a child of the assembly tag (if the code is already generated, just un-comment it).

   <application xmlns="urn:schemas-microsoft-com:asm.v3">
    <windowsSettings>
    <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true</dpiAware>
    <longPathAware xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">true</longPathAware>
    </windowsSettings>
   </application>

7. For this change to take effect, re-run the program. Select the red stop button at the top of the toolbar, then select the green play button again.

Debugging the Windows Forms Program

You may want to debug the program if the logic of your Windows Forms application is not working as expected.

1. Navigate back to the calculateButton_Click function in Form1.cs and click anywhere on the gray bar in the far-left of the screen. This will add a breakpoint, which is indicated by a red circle.
2. Press the "Calculate" button again to trigger this method to execute. The program will pause when it hits the breakpoint to show all the values stored in the variables at that point.

3. To continue the program, click the green Continue arrow at the top of the toolbar.

   

Running the Program Using an Executable File

If you don't want to run your program through Visual Studio, use the standalone executable file for the program. This is automatically generated.

1. Navigate to the executable file, which can be found here:

   <your-project-folder>/bin/Debug/netcoreapp3.1/TemperatureConverter.exe

2. Click on the executable file to directly run the program.

Adding More to Your Windows Form

Hopefully you now have a basic understanding of the basic structure of a Windows Form Application. You can continue exploring additional Windows Forms features by experimenting with new widgets, and taking a deeper dive into the other various events that can be handled.

Once you are more familiar with Windows Forms, you can start creating more complex applications. You can also explore many of the other ways you can create applications on Windows desktop.