Software Design Using C++

First Introductory Windows Forms Example

Setting Up a Windows Forms App

The very first thing to do is to tell Visual Studio to create a Windows Forms Application. The directions given here are specifically for Visual Studio .NET 2003, though the 2005 version works in a fairly similar way.

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. Select "Visual C++ Projects" for the Project Type and "Windows Forms Application (.NET)" for the Template. Fill in a reasonable name (such as Calendar) for your project and choose a location for the project. Selecting "Add to Solution" will add your project to the solution that you already have open, whereas the other choice will stick your project in its own little solution (workspace). Thus you want to make choices something like those shown in this picture.

Overall Form Properties

The Properties Window is used to change various properties. If the Properties Windows is not already visible, but you can see a tab for it, just place the mouse over the tab in order to display the window. If this tab is not 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 when the mouse is not over it. Try that out! The Properties Window can be seen in the lower right corner of 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

Let's begin by dragging a label control from the Toolbox to your empty form. Place it toward the top of the form and drag its edge so as to make the label almost as wide as the form itself. 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 an image." (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 and resize this label as necessary so that it looks good.

Next you will try a different control. Drag a MonthCalendar from the Toolbox and place it in the middle of the left half of your form. 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 one to hold an image. Drag a PictureBox from the Toolbox and place it in the right half of your form. Resize it so that it is about the same size as the MonthCalendar. Click on the PictureBox to be sure that it is selected. Then in the Properties Window, find the Image property, click in the box to the right of this property, and then click on the ... button that results. This brings up a dialog box with which you can select the image file to be used. The image used in the sample app seen in the images whose links are on this page was taken from clipart supplied with Microsoft Office. However, you can use most any image that you have available. On the author's particular PC, the file used was found at C:/Program Files/ Microsoft Office/ClipArt/Pub60COR/J0101856.BMP, in case you wish to see if you have the same one. If you use this image and want to display all of it, you will probably need to resize both your form and the PictureBox to be larger. In the sample shown thus far, these were kept small and only a portion of the image was displayed.

Compiling and Running the App

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 with the calendar, for example.

If you used the image mentioned above and resized things so that the entire image displays, you should get an app that looks like the one in this picture. However, if you left the PictureBox at about the same size as the calendar, your app will look more like this.

If you want to line up the calendar and image exactly, there is a way to do this. Begin in Visual Studio by selecting both items. This can be done by clicking on the PictureBox and then holding down the CTRL key while clicking on the MonthCalendar. Then select Format, Make Same Size, Both (where Both refers to making both the width and height the same). If this does not work, it may be because you selected the MonthCalendar first. Since the calendar cannot be resized, it insists that you select the resizable item first, namely the PictureBox. Next, with the two items still selected, try Format, Align, Tops. 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, build your application again and then run it, as done above.

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

Adding Some Simple Interaction

Now let’s add a bit of interaction to the application. Select the PictureBox on your form by clicking on it. Look at the Properties Window for the PictureBox. You should see a button with a lightening bolt on it. Clicking on this button will display the events that are available for a control. 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. Click on the Event Button (the one with the lightening bolt). 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.) You will be in the editor showing the source code for this method. The code will look like this:

private: System::Void pictureBox1_Click(System::Object * sender, System::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 pictureBox1_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 following line:

MessageBox::Show(S"You clicked on the picture!");

Build the project again and run it. If you click on the picture, a small message window should appear with the text “You clicked on the picture!” in it and an OK button, like this picture.

Click the OK button to make the message box disappear.

Author: Br. David Carlson
Last updated: November 08, 2006