Building Graphical User Interfaces (GUIs)
Using Windows Forms

Before you begin this project go back to the "project creation" page and make sure you have followed ALL of the directions on creating this project, including (1) setting the correct SUBSYSTEM for the Linker, (2)setting main() as the ENTRY POINT for the application, and (3) adding code for main() in ApplicationNameForm.cpp.

Exercise 4: A Windows Forms application

Form1.h

• This file is where Visual Studio automatically writes code as you build your application. Note that all this code is placed in a .h file which goes completely against the conventional C++ programming style of putting code in a .cpp file. In Form1.h there are two functions you should notice:
  1. The Constructor. Note that this first calls InitializeComponent() and then has a comment "//TODO: Add the constructor code here". This is where you want to add your code to initialize any components and/or member variables. For example, here is where you would set the initial selected index of items in list boxes or combo boxes. Do not attempt to do it in the InitializeComponent() function (which would seem to be the logical place to do it) because every time you make a change in the form using the form designer it rewrites this function and will overwrite any initializations you put there.
  2. InitializeComponent(). As you add and modify widgets in the Form Designer window Visual Studio modifies this function to add the code to create and set the properties of all the widgets.
  3. Event Handlers. As you add event handler functions for each of the widgets in your Forms GUI they will be created for you below the InitializeComponent() function.

Building the GUI

Build the GUI

1. In the Properties list change the Text Property (window title) to the name of your project and replace John Doe as seen in the title of the above example with your name.
2. Set the Size Property to 640 x 480

1. Create a CheckBox by selecting it in the Toolbox then click on the form where you want to create it.
2. Set the Text Property to "Demo Check Box"
3. Set the Font Property to Times New Roman, bold, 12
4. Double click the CheckBox to create an event handler function in Form1.h.

1. Create a Button by selecting it in the Toolbox then click on the form where you want to create it.
2. Set the Text Property to "My Text Button"
3. Set the Font Property to Times New Roman, bold, 12
4. Double click the Button to create an event handler function in Form1.h.

1. You will need to prepare an image for the button. You can create an icon resource just as you did in the previous exercise, or copy any .ico file from another directory into the project directory. You can also use an image (.JPG, .GIF, .BMP, .PNG). Just copy it into your project directory. If you use an image file it must already be the correct size to fit on the button. It will not be resized by Visual Studio.
2. Create a button by selecting it in the Toolbox then click and drag on the form to create and size the button.
3. Select the Image property then click in the right column to show the select image dialog box. An Open File dialog box will appear that will let you select the image or icon file to use. (You may see a different type of dialog box in which you will have to (1) click the "Local Resource" radio button, (2) click the "Import" button, (3) select "All Files" in the combobox in the lower right of the Open File dialog box that appears, (4) Use this Open File dialog box to select the icon or image to load. )
4. Double click the Button to create an event handler function in Form1.h.

1. Create a Label by selecting it in the Toolbox then click on the form where you want to create it.
2. Set the Text Property to "Status"
3. Set the Font Property to Times New Roman, bold, 12

1. Create a TextBox next to the Status label by selecting it in the Toolbox then click on the form where you want to create it.
2. Set the Font Property to Times New Roman, bold, 12

1. Create a Label by selecting it in the Toolbox then click on the form where you want to create it.
2. Set the Text Property to "TrackBar with a text output"
3. Set the Font Property to Times New Roman, bold, 12

1. Create a TextBox by selecting it in the Toolbox then click on the form where you want to create it.
2. Set the Font Property to Times New Roman, bold, 12

1. Create a TrackBar by selecting it in the Toolbox then click on the form where you want to create it.
2. Set the Maximum Property to 100
3. Set the TickFrequency Property to 10
4. Double click the TrackBar to create an event handler function in Form1.h.

1. Create a ListBox by selecting it in the Toolbox then click on the form where you want to create it.
2. Set the Font Property to Times New Roman, bold, 12
3. Double click the ListBox to create an event handler function in Form1.h.

1. Create a ComboBox by selecting it in the Toolbox then click on the form where you want to create it.
2. Set the Font Property to Times New Roman, bold, 12
3. Double click the ComboBox to create an event handler function in Form1.h.

1. Create a Button by selecting it in the Toolbox then click on the form where you want to create it.
2. Set the Text Property to "Exit"
3. Set the Font Property to Times New Roman, bold, 12
4. Double click the Button to create an event handler function in Form1.h.

1. Create a GroupBox by selecting it in the Toolbox then click on the form where you want to create it.
2. Set the Text Property to "Radio Button Demo"
3. Set the Font Property to Times New Roman, bold, 12

1. Create two RadioButtons in the GroupBox by selecting RadioButton the Toolbox then click inside the boundary of the GroupBox to create each one.
2. Set the Text Properties to "Radio Button 1" and "Radio Button 2"
3. Set the Font Property of each to Times New Roman, bold, 12
4. Double click each RadioButton to create an event handler function in Form1.h.

1. List box - Look in the constructor for Form1 and add code after the call to InitializeComponent() to add items to the list box.

   	public ref class Form1 : public System::Windows::Forms::Form
   	{
   	public:
   		Form1(void)
   		{
   			InitializeComponent();
   			//
   			//TODO: Add the constructor code here
   			//
   			this->listBox1->Items->Add("List item 01");
   			this->listBox1->Items->Add("List item 02");
   			this->listBox1->Items->Add("List item 03");
   			this->listBox1->Items->Add("List item 04");
   			this->listBox1->Items->Add("List item 05");
   			this->listBox1->Items->Add("List item 06");
   			this->listBox1->Items->Add("List item 07");
   			this->listBox1->Items->Add("List item 08");
   			this->listBox1->Items->Add("List item 09");
   			this->listBox1->Items->Add("List item 10");
   			this->listBox1->SelectedIndex = 0;
   

2. Combo box - Look in the constructor for Form1 and add code after the call to InitializeComponent() to add items to the combo box.

   			this->comboBox1->Items->Add("Combobox item 01");
   			this->comboBox1->Items->Add("Combobox item 02");
   			this->comboBox1->Items->Add("Combobox item 03");
   			this->comboBox1->Items->Add("Combobox item 04");
   			this->comboBox1->Items->Add("Combobox item 05");
   			this->comboBox1->SelectedIndex = 0;
   

1. RadioButtons, CheckBox, text Button, and icon Button
   1. Look in Form1.h close to the top and you should see a list of variable names for each of the widgets created. Look for the one for the "Status" TextBox and note the name of the widget (textBox1 in this example):

      private: System::Windows::Forms::TextBox^  textBox1;
      

   2. Find the event handler function for each of the named widgets above and add a line similar to the one below, which is for the first radio button.

      this->textBox1->Text = "Radio button 1 clicked";
      

   3. You can also do a check to determine if the check box is checked with:

      if(this->checkBox1->Checked)
      

2. List box
   Find the event handler for the list box and add the following code to display the selected line in the status text box

   this->textBox1->Text = 	(System::String ^)(this->listBox1->Items[this->listBox1->SelectedIndex]) + " selected";
   

3. Combo box
   Find the event handler for the combo box and add the following code to display the selected line in the status text box

   this->textBox1->Text = (System::String ^)(this->comboBox1->Items[this->comboBox1->SelectedIndex]) + " selected";
   

4. TrackBar
   
   1. Look in Form1.h close to the top and you should see a list of variable names for each of the widgets created. Look for the one for the trackbar text box and note the name of the widget (textBox2 in this example).

      private: System::Windows::Forms::TextBox^  textBox2;
      

   2. Find the event handler function for the TrackBar and add the line below

      this->textBox2->Text = this->trackBar1->Value.ToString();
      

5. Exit button
   Find the event handler for the Exit button and add the following code to terminate the application when it is clicked.

   this->Close();