IT1808
Demonstration
Building C# Windows Application in Visual Studio
IDE
Materials:
One (1) personal computer with pre-installed Windows operating system
Microsoft Visual Studio 2015 or higher
Instructions:
1. Tell the students that you will demonstrate how to create a simple Windows application in Visual Studio IDE
and how to use its basic tools. Encourage them to watch and listen carefully.
2. Open Visual Studio IDE. On the File menu, select New Project.
3. In the New Project dialog, select Installed > Visual C# then select the Windows Forms Application
template. Name the project as HelloApplication then click OK.
Figure 1. New Project dialog
4. Tell the students the following statements:
Visual Studio creates the HelloApplication project and solution, and Solution
Explorer shows the various files. The Visual Studio shows a design view of the
project where a form is shown and you can add different controls, such as buttons.
5. Figure 2 shows that the interface contains different windows: the Main windows (designer view or editor
view), Solution Explorer, the Properties, and the Toolbox.
04 Demonstration 1 *Property of STI
Page 1 of 4
IT1808
Figure 2. Interface of Visual Studio IDE with Windows Form application
A. Main window shows the design view (form) where you can add various controls, such as button and
textbox. Main window can show either designer view or the code editor view where you can edit the
program codes in this window.
B. Solution Explorer window is used to view and navigate all the items in your project.
C. Toolbox window displays the controls that you can add to your projects, such as button, textbox,
checkbox, etc. This only appears with designer view.
D. Properties window allows you to change the properties of the forms and controls which you added
in your project. For example, if you select and click Form1, you can change its title by setting the
Text property, and you can change the background color by setting the Backcolor property.
6. Click Form1 and go to Properties window and change the value of (Name) property to frmGreetingProgram
and the Text property to Greeting Program.
Note: The (Name) property is the name of object or control. When naming a control use abbreviation and Camel Case.
7. Click the Start button to give the students and idea on what the output of this project is. Then, click the
Close button of the form to close the program and stop it from running.
8. Show to the students that the form is resizable and when you make changes in forms or with an editor,
there will be an asterisk (*) in the tab title indicating that the changes have been made in the project it is not
yet saved.
9. Tell the students that you will demonstrate how to create an application with a text box that will display a
greeting message. The first thing you will do is to add the controls needed to create the program and set
their properties.
10. Demonstrate how to add controls in form. Go to Toolbox window. Select, click, and hold Button, then drag
and drop it on the form; or simply click the Button, then click on the form to add it. The new button is added
to the form. Click the button in the form if not selected. In the Properties window, refer to the following table
to change the button properties.
Property Value
(Name) btnGreeting
Text Greet
11. Add the following controls into the form:
• Textbox control and change the value of its (Name) property to txtName.
• Label control and change the value of its Text property to Name:.
04 Demonstration 1 *Property of STI
Page 2 of 4
IT1808
12. Add another Label control and change its properties. Refer to the following table:
Property Value
(Name) lblGreeting
AutoSize False
Text Greeting message here.
TextAlign MiddleCenter
13. See Figure 3 for the example arrangement of added controls.
Figure 3. Form with added controls
14. Click the Start button to show the output to the students. After adding controls and setting up their
properties, create a method that will get the name of the user in the textbox and will display a greeting
message when the button is clicked.
15. Double click the btnGreeting control, or right-click on it, and select View code. The Code editor will appear
and the Visual Studio will create a method named btnGreeting_Click that will handle the click event of the
button.
16. In the btnGreeting_Click method, write the following statements:
string name = txtName.Text;
lblGreting.Text = "Welcome to the class Mr./Ms. " + name + "!";
17. Tell the students the following:
• To get the entered value from the Textbox control, get the value of its Text property. For example,
in the statement string name = txtName.Text;, the value of the property Text of txtName control
is get a string type and assigned to the variable name.
• To update the text value of the Label control, set the value of its Text property. For example, in the
statement lblGreting.Text = "Welcome to the class Mr./Ms. " + name + "!";, the Text
property of lblGreeting control is set.
18. Click the Start button and enter a name in the textbox and click the button to show the results.
Figure 4. Example output
04 Demonstration 1 *Property of STI
Page 3 of 4
IT1808
19. Add a validation on the application, such as determining if the user did not enter a name on the textbox
and will display a dialog box. Modify the statements in the method btnGreeting_Click using the following
statements:
string name = txtName.Text;
if (name != "")
{
lblGreting.Text = "Welcome to the class Mr./Ms. " + name + "!";
}
else {
MessageBox.Show("Please type a name on the textbox!");
}
20. Click the Start button to test the application.
21. Tell the students that to get a number value from a textbox, you need to convert the value of Textbox control
into an integer or floating-point value. For example, the value of Textbox control named txtNumber is
converted into an integer value using ToInt32 method.
int temp = Convert.ToInt32(txtNumber.Text);
22. Ask the students if they have any clarifications.
04 Demonstration 1 *Property of STI
Page 4 of 4
