CS 1400 Lab #2: Creating Your First GUI Application

What is a GUI?

In Lab #1 you created your first C# application. It was a Console Application. Most of the programs that you run on your laptop computer, your smart phone, or your tablet are called graphical User Interface (GUI) applications. An application with a graphical user interface can be more interesting and less error prone than similar Console Applications. In this lab you will create your first GUI application.

Starting the New Project

Start Visual Studio. Depending on the version of Visual Studio that you are using, the images you see may look slightly different from what you see in these instructions. Once Visual Studio is running, start a new Project, by clicking on New Project on The Start Page, as shown
in figure 1.

new project

 

Figure 1: Start Page for a new Project

You will then see a DialogBox like the one in figure 2. Be sure that C# has been selected as the language, then select the template labeled Windows Forms Application. Fill in the Project name and click on Okay.

New Project Dialog

Figure 2: Selecting a Windows Forms Application

Once the project has been created, Visual Studio will open up a Window as shown in figure 3. This is a layout of the Window that your program will create when it runs. Notice that the tab above the Window says "Form1.cs(design)". We will create the look and feel of your interface by dragging various GUI components onto the Client Area of the Form.

Code Page

Figure 3: Form1 Design Page

Using The Toolbox

To see all of the different controls that you can use on your Form, Click on view on the toolbar, and then click on Toolbox on the pulldown menu, as shown in figure 4.

tool box

Figure 4: Selecting the Toolbox Window

The Toolbox window should show up. It is shown in figure 5.

Code Page

Figure 5: The Toolbox Window

Scroll down until you see a control in the Toolbox named PictureBox. Click on the PictureBox with your mouse and drag a PictureBox onto the Client Area of your Form. Your Form should now look something figure 6.

picture box on form

Figure 6: A PictureBox on The Client Area of the Form

You can drag the PictureBox around the Form and re-size it by dragging on the handles (the small white sqaures on the edges of the PictureBox). Once you are happy with the size and placement of the PictureBox, go back to the ToolBox and grab a Label. Drag it to the Form so that your form now looks like figure 7.

Code Page

Figure 7: Label Placed on the Client Area of the Form

Using the Properties Window

On the MenuBar, select view again, and then click on Properties Window, as shown in figure 8.

properties window

Figure 8: Selecting the Properties Window

If you click on any of the controls on your Form, you can change the Properties of that control by using the Properties Window. Click on the Form and look at the Properties Window. Change the value of the Text Property so that it has your initials and the lab number, as shown in figure 9.

form text

Figure 9: Changing the Text Property

Now click on the PictureBox to select it. To complete this step you will need an image file. You can use the one here, or use another image of your choice. Your image should be about 200 pixels high and 200 pixels wide. With the PictureBox selected go to the Properties Window and select the Image property. The properties Window should look something like figure 10.

Code Page

Figure 10: PictureBox Properties

Click on the little box with the three dots in it (called an ellipsis). This will open a Window where you can import an image and set it to display in the PictureBox, as in this illustration.

Code Page

Finally, we will change the Text Property for the Label and use a different font to display it. Select the Label with the mouse, and then go to the Properties Window. Select the Text Property as shown in figure 11, and change the text to say "Programming is fun!".

Code Page

Figure 11: Changing the Text Property of a Label

With the Label still selected go to the Properties Window and select the Font Property. Click on the little box on the right with the three dots in it as shown in figure 12.

Code Page

Figure 12: Font Property of a Label

This will open a Window where you can change the font face and the size of the font that you want, as shown in figure 13. Pick your favorite font and make it large enough so that the text fills up the horizontal space on the Form.

Code Page

Figure 13: The Font Window

Your finished Form should look something like figure 14. When you are satisfied with your Form, click on the green triangle to run it.

Code Page

Figure 14: Finished Form Design

If you are happy with your program, click on File and Save All to save it.

Questions

When you submit this lab, answer the following two questions by adding a comment to your submission. The answers to these questions can be found in the study material included in this lab.

Question #1: The type of application you select in Visual Studio, when creating a GUI application is
    (a) a GUI application
    (b) a Console application
    (c) a CS1400_Program
    (d) a Windows Forms application

Question #2: The text that appears in a Label is stored in
    (a) the Text propery of the Label
    (b) the Label property of the Label
    (c) the Font property of the Label
    (d) the compiler

File(s) to Submit:

Place the complete project folder for this lab in a zip file and name the zip file
lab_02_your-initials_V1.0.zip. For example, I would name my file lab_02_RKD_V1.0.zip. Submit the assignment as Lab #2 on Canvas.

Grading Guidelines

Description Points possible

Assignment meets grading guidelines:
o The project folder has been properly submitted to Canvas

2

Program executes correctly and meets the specifications.

3

The answers to the questions in this lab have been included as comments on your submission, and they are correct.

2
Total 7