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 add and use the controls radio button and combo box,
including how to change the style of a control. This session will demonstrate how to create a simple
restaurant reservation application. Encourage them to watch and listen carefully, and ask them from time
to time if they can still follow your instructions.
2. Open the Microsoft Visual Studio IDE and create a New Project. Select the Windows Forms Application,
name the project as ReservationApplication, then click OK.
3. Click Form1 and go to its properties. Change the value of (Name) property to frmReservation and the
value of Text property to Restaurant Reservation.
4. Tell the students that the first thing you will do is to add all the controls needed to create the application. In
the frmReservation, insert the following controls:
a. Two (2) textboxes. Change the value of their (Name) property to txtName and txtContact.
b. ComboBox control. Change its (Name) property value to cmbSize and the value of Text property
to -Select-.
c. Two (2) radio buttons. Change the value of their (Name) property to rbtCash and rbtCreditCard;
and change their Text property values to Cash and Credit card.
d. Button control. Change its (Name) property value to btnReserve and the value of Text property to
Place reservation.
5. Add labels that will label each inserted control. See Figure 1 for the example output.

Figure 1. Example output

6. Click the Start button to run the application and show the output to the class.
7. Tell the students that the next thing to do is to design the appearance of the application by changing the
properties of the added controls. Select all labels (*Note: To select multiple controls, press and hold ctrl key
then right-click all the controls to select.). Go to Properties > populate the Font property by clicking the +
sign > change the value of Size property to 12 and Bold to True.
8. Select all textboxes, radio buttons, and combo box. Then, change their Font Size property to 12.

05 Demonstration 1 *Property of STI

Page 1 of 3
 IT1808

9. Select btnReserve then go to its Properties. Change the value of its properties into the following:
Property Value
BackColor SteelBlue
FlatStyle Flat
Size 12
Font
Bold True
ForeColor White
10. Click the Start button to run the application and show the output to the class. See Figure 2 for the design
of the application. Click on the combo box then tell the students that it still has no items to select on it. Click
on the radio buttons then tell them that you can only select one (1) option on it.

Figure 2. Design of application

11. Tell the students that after adding controls and designing the form/application, the next thing to do is to add
items on the combo box and create statements that will get the selected option from the radio buttons.
12. Tell the students that in order to add items on the combo box, you can go to its properties and select Items
property then add a collection of items on it. But when there are too many items to add, you can create
statements on the code editor to add items.
13. Select the form or frmReservation > right-click > View Code, then the editor view will appear. The
frmReservation_Load method is created by the IDE. This method will handle the statements to execute
when the form or application is loaded. The items of the combo box should be added when the form loads.
Write the following statements with a loop statement on the frmREservation_Load method to add items
on the combo box named cmbSize. The statement cmbSize.Items.Add(partySize); adds one (1) item
on the list of items of the combo box. However, using the for loop will add multiple items with values of 1
to 15. It is a good practice to use a looping statement when adding multiple values on the combo box.
int partySize;
for (partySize = 1; partySize <= 15; partySize++) {
cmbSize.Items.Add(partySize);
}
14. Click the Start button to test if the items are added on the cmbSize control, then stop the program from
running.
15. Demonstrate how to get the values from the controls when a user types an information, then click the
btnReserve control.
16. Select the btnReserve from the form. Right-click then select View Code or double click. Visual Studio will
display the Editor view and create a method named btnReserve_Click.
17. Declare the following global variables outside the method btnReserve_Click. These global variables will
be used to store the values entered by the user.
public string name, contact, paymentMode;
public int partySize;

05 Demonstration 1 *Property of STI

Page 2 of 3
 IT1808

18. On the btnReserve_Click method, write the following statements:

a. To get the values from the textboxes txtName and txtContact:
name = txtName.Text;
contact = txtContact.Text;
b. To get the selected value from the combo box named cmbSize:
partySize = Convert.ToInt32(cmbSize.SelectedItem);
*Note: The statement cmbSize.SelectedItem is used to get the value from the combo box as a string type
and must be converted into an integer type to store it on the variable partySize.
19. To get the selected radio button of the user, create statements that will determine if the user selected the
Cash or Credit card. Use if…else statement on this problem. Go to the Design view of the frmReservation
form.
20. In the Design view, select the Cash radio button named rbtCash then double click on it. The IDE will display
the Editor view and create a method named rbtCash_CheckedChanged. This method handles the event
on the radio button whether it was selected or not.
21. In the rbtCash_CheckedChanged method, write the following statements to determine if the radio button
of Cash is selected or not:
bool isChecked = rbtCash.Checked;
if (isChecked) {
paymentMode = rbtCash.Text;
} else {
paymentMode = rbtCreditCard.Text;
}
22. Go to Design view then select and double click the Credit card radio button named rbtCreditCard. The
IDE will create a method named rbtCreditCard_CheckedChanged.
23. In the rbtCreditCard_CheckedChanged method, write the following statements to determine if the radio
button of Credit card is selected or not:
bool isChecked = rbtCreditCard.Checked;
if (isChecked) {
paymentMode = rbtCreditCard.Text;
} else {
paymentMode = rbtCash.Text;
}
24. Display the information entered by the user by showing a message box. Go to the btnReserve_Click
method and add the following statements:
MessageBox.Show("A reservation has been made by " + name + " for the the party size " + partySize
+ ".\nContact details: " + contact + "\nPayment mode: " + paymentMode);

25. Click the Start button to run and test the application. See Figure 3 for the example output. Then ask the
students if they have any questions.

Figure 3. Example output

05 Demonstration 1 *Property of STI
Page 3 of 3