CIS Logo SVC Logo

   Computing & Information Systems
   Department

 

Schoology Facebook        Search CIS Site      Tutorials

Software Design Using C++



First Introductory Windows Forms Example



Setting Up a Windows Forms App


We will create a simple Windows Forms application for which we don't have to write any code. Still, we will have to do some work! Our application will display a calendar and a button.

The very first thing to do is to tell Visual Studio to create a Windows Forms Application. The directions for Visual Studio 2008 and 2012 are approximately what are described here. We say approximately both because these directions are trying to cover at least 2 versions of Visual Studio and because the menu system is customizable so that what you see might not exactly match what is described here.

If you are using a newer version of Visual Studio that does not have Windows Forms App capabilities for C++, you can use C# instead, as it is fairly similar to C++. Most of the directions here still work. Try it and see if you can adapt! The one line of code that you have to enter is given below, in both C++ and in C#.

You can choose to group several of your application projects in what Visual Studio calls a solution, or you can simply create individual projects (each of which is in its own "solution"). Let's assume that you have already created a solution and have that solution open in Visual Studio. Use File, New Project. Under Templates, select Visual C++, CLR, and then Windows Forms Application. Fill in a reasonable name for your project and choose a location for the project. You can also specify that you want this project added to an existing solution (or have it make a new solution for this project).

Overall Form Properties


Visual Studio should then produce a blank form in design view for you. We next customize some properties of the overall form. To do this, click somewhere on the form. (Later, when you learn to add controls to the form, be sure not to click on a control when you try to select the form. Otherwise, you won't be editing the properties for the form itself.) Let's start by resizing the form. Drag the handles on the sides and/or corners, moving the mouse so as to make the form about 4 inches wide and 2 inches high.

The Properties Window is used to change various properties. If the Properties Windows is not already visible, use View, Properties Window. Once you have the Properties Windows open, you can click on the pushpin at the top to make it stay open or click again to allow it to retract. The Properties Window can be seen in this picture of Visual Studio. Change the MaximizeBox property to False. (Click in the field to the right of MaximizeBox to get a drop down box showing the choices: true and false, in this case. With a 2-way choice you can even double click so as to reverse the current choice.) The result is to remove the little maximize button in the upper right corner of the form. We eliminate this because it makes little sense to maximize to full screen such a simple application. Also change FormBorderStyle to FixedDialog. This will prevent the user from dragging an edge of the form and resizing it while it is running. Next, change the ForeColor property to ActiveCaption, found in the pulldown under the System list of colors. (You can really choose any color that you like here.) Finally, choose the Text property and change it to whatever label you want to put on the title bar for your application: "App 1", perhaps, or "Calendar".

Before going any further, be sure to save all of your files. It is wise to do this periodically so that you don't lose much if something goes wrong with your computer, etc. You can click on the Save All icon at the top of Visual Studio or use File, Save All.

Adding Controls


The goal is to add "controls" to the form so that it looks like this completed form, perhaps better seen in this close-up of the form in the completed, running application. The items seen on the form are called controls and are dragged onto the form from the Toolbox, seen in this picture. The Toolbox Window works a lot like the Properties Window. If the Toolbox Window cannot be seen, use View, Toolbox. Once you have the Toolbox open, you can click on the pushpin at the top to make it stay open. Also note that the controls in the Toolbox are grouped into categories labeled All Windows Forms, Common Controls, Data, Components, etc. Clicking on one of the categories causes the Toolbox to display the controls in that category. If the list is long, you will get a scroll bar to enable you to browse through the list. We will be using controls in the Common Controls category, so open that one.

Let's begin by dragging a label control from the Toolbox to your empty form. Place it toward the top, left corner of the form. With the label selected, go to the Properties Window. Find the Text property and use "Simple example of a Windows Forms App, showing a calendar and a button" (without the quotes) as its value. Note that if you click on something other than this label, then the Properties Window will show the properties of something else. While our label is selected, look for the property named ForeColor and change it to whatever color you want to use. Clicking on this property will display a downward triangle which you can click on to get a list of colors, categorized as Custom, Web, and System. In the images for this example, the ActiveCaption color found under System was used. Next find the Font property. If it has a + sign in front, click on the + in order to see all of the items within. Find the Bold property under Font and change its value to True. Move this label as necessary so that it is centered and is near the top of your form.

Next you will try a different control. Drag a MonthCalendar from the Toolbox and place it on the left side of your form, underneath the label. You cannot resize it and don't need to change any of its properties.

The last control that you need to add to your form is a button. Drag a button from the Toolbox and place it in the right half of your form. Change its Text property to "Click here" or similar. Resize the button so that its appearance is reasonable.

Compiling and Running the App


Save all of your files again. Then use Build, Build Calendar to compile the project. (Calendar is the project name. If you used a different name for your project, that name should show in the menu.) You should not get any compiler error messages as you did not write any code for this project. All of the code for this one was automatically generated.

You can run your program by using Debug, Start Without Debugging. Assuming that there is no problem at runtime, try out your application to see how it works. Try moving to a different month within the calendar, for example.

If you want to line up the left edges of the label and calendar exactly, there is a way to do this. Begin in Visual Studio by selecting both items. This can be done by clicking on the label and then holding down the CTRL key while clicking on the MonthCalendar. Then select Format, Align, Lefts. There are other alignment choices which you can try out as well. If you do make changes to the formatting of these items on your form, click the Save All button, build your application again, and then run it.

You have now created your first Windows Forms Application without any hand-written code.

Adding Some Simple Interaction


Note that this section, both the code and description, were provided by Dr. Cynthia Martincic. This material is used with her permission.

Now let’s add a bit of interaction to the application. Select the button on your form by clicking on it. Look at the Properties Window for this button. You should see a lightening bolt icon. Click on this to display the events that are available for the selected control (the button). Windows applications are event-driven applications. Events are actions such as clicking on the object, double-clicking on it, and putting the mouse cursor over it. Next, double-click on the Click event in the list now showing in the Properties box. Windows will create the skeleton code for the event-handling method. (Note that a method is a function that belongs to a class, something that is studied in detail later in these C++ web pages.) The editor now shows the source code for this method. The code will look something like this:


private: System::Void button1_Click(System::Object^ sender, System::EventArgs^ e) 
   { 
   }

If you are using C#, you will get this instead:


private void button1_Click(object sender, EventArgs e)
   {

   }

There is a lot there that looks complicated, but some of it should be familiar. The name of the method (or member function) is button1_Click. There are two parameters in the parameter list. Also, the body of the function is empty.

Inside the curly braces of the body of the function, add the appropriate line from below:


// In Visual Studio 2005 use:
MessageBox::Show(S"You clicked the button!");

// In Visual Studio 2008 use:
MessageBox::Show("You clicked the button!");

// If you are using C# use:
MessageBox.Show("You clicked the button!");

Build the project again and run it. If you click on the button, a small message window should appear with the text “You clicked the button!” in it and an OK button. Click the OK button to make the message box disappear.

Back to the main page for Software Design Using C++

Author: Br. David Carlson with contributions by Br. Isidore Minerd
Last updated: November 21, 2014
Disclaimer