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
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.
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.
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.
Figure 4: Selecting the Toolbox Window
The Toolbox window should show up. It is shown in figure 5.
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.
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.
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.
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.
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.
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.
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!".
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.
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.
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.
Figure 14: Finished Form Design
If you are happy with your program, click on File and Save All to save it.
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
Question #2: The text that appears in a Label is stored in
File(s) to Submit:
Place the complete project folder for this lab in a zip file and name the zip file