The Best Guide To Create The C++ GUI Application Using Libraries

To develop C++ GUI or C++ graphical user interface application, you need an IDE that supports the C++ GUI application. To create the GUI app, you must use Visual Studio 2019 because it is better suited for the C++ GUI application. In this tutorial, you will learn how to create a C++ GUI application in a detailed manner.

How to Create a Project and Configure a Visual Studio to Run a C++ GUI Application?

So, start with creating a project in Visual studio. After opening the visual studio application, you need to select the development settings to Visual C++ and choose the color theme.

Once you are done with that, you need to click on this Create a new project.

After this, you are going to add a project template, so you must search for CLR Empty Project(.NetFramework). This framework provides information sharing between the .Net and C++ code.

In the next step, you can write the project's name and select the project's location.

Once you are done with this, you can click on create, and the project will be created.

Learn From The Best Mentors in the Industry!

Automation Testing Masters ProgramExplore Program

Creating Windows Form Application 

As the project has been created, now you will build a windows form application and for that, you must create a form file. Click on this Project icon in the upper bar and select Add New item.

After this step, select UI under Visual C++, click on the Windows form, and press ‘add’ to open the form file.

Now, you will do some additional configurations. Again you must click on Project -> Properties, it will open the configuration properties, and select Linker from there, and from the drop-down, l click on System. On clicking the system the subsystem option will appear, and you have to select that from the drop-down because the Subsystem tells the operating system how to run the .exe file. You will have to select Windows from the drop-down bar.

After this step, you have to select the entry point. So under configuration settings, choose Advanced and write Entry point as main and click on ok. The entry point means the starting address of .exe file.

Once the configurations are done, click on the Myform.cpp file from the left bar and add the code in this file.

Code:

#include "MyForm.h"

using namespace System;

using namespace System::Windows::Forms;

[STAThread]

void main(array<String^>^ args)

{

    Application::EnableVisualStyles();

    Application::SetCompatibleTextRenderingDefault(false);

    MyProject::MyForm form;

    Application::Run(% form);

}

You can paste the above code in the .cpp file. This code shows how the program will execute; MyProject is the project's name; you have to change it according to your project name. In this case, the name of the project is Project2. Similarly, MyForm is the name of the form file; you can change it as well according to the name of your form file and save it.

Now, click on Myform.h, and you will notice the coding part is there, but there is no form. So, you must save it and reopen the visual studio after closing it. 

After opening the visual studio, you must click on Myform.h, and the windows form will appear as shown in the figure below.

Now, you can check the form by running it, so you can click on the Local Windows debugger button, and if it is running fine, you must proceed to add some buttons to the windows form.

Now, go ahead to learn how to create the C++ GUI application.

Unleash Your Career as a Full Stack Developer!

Full Stack Developer - MERN StackEXPLORE COURSE

C++ GUI Calculator Application

As you have successfully created the windows form, now you will design the calculator application and for that, you need to add some buttons and textboxes on the form. To add textbox, click on the toolbox on the right-hand sidebar and search for textbox. To add the textbox in the form, click on the textbox and release it over the form. 

Once it is added, you can adjust the size of the textbox by clicking on the Properties -> Fonts and adjust it according to your requirements.

Similarly, you can create another textbox and adjust its size and font. You must create two textboxes because you want two numbers or digits to compute. You can either create the textbox again or copy the first one and paste it into the form.   

Then, you can add the label in between both the textboxes as an operator. To add the label, you can again go to the toolbox and add the label from there, adjust it from fonts, and write the text inside it from the text option inside the properties.

After adjusting, the form will look like as shown in the figure.

Now, you need some buttons to add to this calculator like addition, multiplication, etc. To add the button, click on the toolbox and add buttons from there. Unlike textboxes, you can simply resize the button by clicking on it and adjusting it manually. But to change the text, you have to go to properties -> text and write down the text, like in this case, you must write the symbol +.

Similarly, you will need to add three more buttons for subtraction, multiplication, and division.

You can also change the color of the text in properties. To display the result, add a label to the form where the calculated result will be displayed, and name it as Result.

As the layout of the calculator is done, so you will now add the functionality to it.

To add the functionality to the buttons, you need to know the actual names of these buttons or labels. The names can be found out by clicking on the button or label and then clicking on the properties, so the name would be displayed on top of properties. For example, in the below figure, the textbox name is shown. Similarly, the buttons’ names are button1, button2, button3, button4.

Now double-click on the add button(+) to add the functionality. 

After double-clicking on the add button, it will open the Myform.h file, and you must create the event handler for this add button whose actual name is button1.

You need to do the addition by clicking this (+) button, so let’s write the following code.

Here, you have declared the variable output which will store the result. The textBox1 is the name of the textbox and the arrow operator gives access to the members of the object. The arrow operator is pointing to Text which means you have to change the text of textBox1. Similarly, you must do it for textBox2 and add both of them.

You know that whatever you write inside the textBox will be a text or can be a string, and you can’t add the strings. So, you need to convert those strings into integers. System::Convert::ToInt16 will convert the string to an integer.

To display the text, write the actual name of the Result label, i.e., label2. Here, you are again using the arrow operator pointing to the text because you want to change the text and print the output.

Learn the Ins & Outs of Software Development

Caltech Coding BootcampExplore Program

To print the result or output, convert the integer to string using System::Convert::ToString(output) because you have already done the computation.

You can also check if the code is working fine by clicking on the Local Windows debugger button and adding the values in the form.

You have added the functionality for the add(+) button. Similarly, you must double click on the subtraction button and do the same for it as well but only the signs would be different. Similarly, for all the buttons the same actions must be done.

Similarly, you are going to do it for the multiplication and division buttons.

Once you are done with this, you can check if it is working fine by running it and then doing the addition, subtraction, multiplication, division in the calculator. 

If all the operations are working fine, then it means the C++ GUI calculator application is created.

Conclusion

After reading this tutorial on C++ GUI, you would have understood how to create a project and configure visual studio to run C++ GUI application and the Creation of windows form application. You will also learn how to create a C++ GUI application.

If you are looking to build a career in software development, check the Full Stack Developer - MERN Stack by Simplilearn. It can prove to be the ideal solution to help you build your career in the right way.

Do you have any questions regarding this tutorial on C++ GUI? If you do, then put them in the comments section. We'll help you solve your queries. To learn more about C++GUI, click on the following link: C++ GUI.

Happy learning!