This tutorial will be showed how to create a simple graphical interface using C++ and Visual Studio 2019.
This tutorial can be a good kickstart for the future development of Graphical User Interfaces, using C++, Visual Studio 2019, and .Net Framework.
Parts Required
- Microsoft Visual Studio 2019;
- .NET Framework (automatically installed with Visual Studio).
Note: Below you can check a possible install configuration of Visual Studio. If you want to use the file you change the file (from “vsconfig.txt” to “.vsconfig“) and import when install or modify Microsoft Visual Studio 2019.
Create a new Project
1. Open Visual Studio 2019.
2. Select the type of project.
3. Type the desired name of the project.
Create a design
In order to have a graphical appearance, it is necessary to add Windows Forms to the project.
1. Go to “Project” and click on “Add New Item…“.
2. Select “Windows Form“, change the name of the file if you like, and press “Add“.
Note: If this message appears, restart the Visual Studio should get it away.
Design Configurations
Now it is necessary to add the necessary visual components in order to get the desired result. You will need 3 labels, 2 textbox, 1 button, 1 flow layout, and 4 checker boxes.
1. In “Toolbox” search for “label“. Then select the “Label” and drag it to “Design” and drop it wherever you want. (In all, 3 labels will be needed.)
2. Repeat the process for two “TextBox” and one button.
3. Add a “FlowLayoutPannel“.
4. Search for “CheckBox” and drop it inside of the “FlowLayoutPannel” (you will need 4 in total).
5. Select the “checkBox1” and go to “Properties” and change the “Name“. This name should not have spaces, because is the name used when coding to reference the checkbox.
6. Change “Text” to “+” because is this checkbox that will match the sum operation.
7. Repeat the process to others checkboxes.
8. Change the “Text” of “label1” to “My Calculator”.
9. Change the “Text” of “label2” to “Result:”.
10. Change the “Text” of “label3” to “No Input” and the “Name” to “result_output”.
11. Change the “Name” of “textBox1” to “value1_input” and the “Name” of “textBox2” to “value2_input”.
12. Change the “Text” of “button1” to “Calculate”.
On click event configuration
As the objective is to present the result of a certain operation, it is necessary to create an event that performs the desired operations.
1. Double click on the “Calculate” button, to generate a click event on “MyForm.h“.
2. After double click on the button “MyForm.h” file will open and the event will appear.
3. The button click event must have the following code, as it is in this event that the desired operations will be performed. Since the objective is to change the status of the label “result_output” and display the result of the operation in it.
private: System::Void button1_Click(System::Object^ sender, System::EventArgs^ e) {
//Assign the value from TextBox to a float variable
float value1 = (float)System::Convert::ToDouble(value1_input->Text);
float value2 = (float)System::Convert::ToDouble(value2_input->Text);
float result;
//Check the CheckBoxes values and excute the respective operation
if (bool(check_sum->CheckState)) {
//Do the sum operation
result = value1 + value2;
}
if (bool(check_sub->CheckState)) {
//Do the subtraction operation
result = value1 - value2;
}
if (bool(check_mult->CheckState)) {
//Do the multiplication operation
result = value1 * value2;
}
if (bool(check_div->CheckState)) {
//Do the division operation
result = value1 / value2;
}
//Update output label
result_output->Text = System::Convert::ToString(result);
}Build configuration
Before building the project, it is necessary to perform some configurations. In the example case, the solution configuration corresponds to Debug mode and an x86 platform. But if you want to develop this project for another configuration (Release Mode, for example), or another platform (x64, for example), just change these fields and carry out the following procedures.
1. Before performing the project settings, there must be the main function so that the windows forms application can be executed. A simple way to do this is to copy and paste the following code into the “MyForm.cpp” file. This indicates how the form should be executed.
#include "MyForm.h"
using namespace System;
using namespace System::Windows::Forms;
[STAThreadAttribute]
void main(array<String^>^ args)
{
Application::EnableVisualStyles();
Application::SetCompatibleTextRenderingDefault(false);
MyCalculator::MyForm form;
Application::Run(% form);
}
2. On “Solution Explorer“, select your project and right-click on it.
3. In this pop-up, click on “Properties“.
4. Expand “Linker” configurations and click on “Advanced“. On “Entry Point” type “main“, because in this field it is necessary to specify the name of the input function, as an entry point for the file .exe or DLL (it is located in the file “MyForm.cpp”).
5. Select the “System” property on “Linker“. In the option “SubSystem“, select the “Windows” option. After that, click on “OK“.
6. Know it is possible to start without debugging and the GUI should pop up.
Results
Enjoy it!!!
