Graphical User Interface

 It is a user interface that includes graphical elements, such as windows, icons and buttons.
 C# has all the features of any powerful, modern language. In C#, the most rapid and convenient
way to create your user interface is to do so visually, using the Windows Forms Designer and
Toolbox.

Windows Form

 The basic element of most GUI programming in Windows Forms is the window. Essentially,
everything on a GUI screen—buttons, text boxes, and icons—are windows. Because of this, most
of the windows and controls in the Windows Forms package have the same characteristics. For
instance, they all have a Text property. How they use the property is up to the specific type of
window.

Windows Forms controls

 are reusable components that encapsulate user interface functionality and are used in client side
Windows based applications.
 A control is a component on a form used to display information or accept user input
 The Control class provides the base functionality for all controls that are displayed on a Form.
 Some of the windows form control are buttons, label, textbox, radiobutton, checkbox,and
combobox.

How to create a new project with GUI in C#?

Open your Visual Studio (I’m using Microsoft Visual C# 2010 Express) and click new project.
Select Windows Form Application, change the name of the project and click OK.

After clicking OK, you will get the following screen.

Now for the Form1 properties:

Select the form and view the properties window. You can change the properties of form1 base on your
preference. For now, I will change the Text property of form1.

After changing the text property, this is how the screen look like.
Let’s change the backcolor property

Note: You can change the design of the Form of your preference in the properties window.

How to add Windows form control?

To add windows form controls:

Click the TOOLBOX for you to view all the controls that can use for GUI designing. Drag and drop the
selected control in the form.
Here’s how we can add and control some of the above controls:

How to add a button?

A button is a control, which is an interactive component that enables users to communicate with an
application. A Button can be clicked by using the mouse, ENTER key, or SPACEBAR if the button has focus.

Drag and drop it in the form.

When you want to change the text of the Button, select the button in the form and to go properties
window in the screen and change the text property.

After changing the text property from button1 to SUBMIT.

Also, you can change the name from button1 to btnSubmit.

Note: You can change the design of the button of your preference in the properties window.
How to add a textbox?

A TextBox control is used to display, or accept as input, a single line of text. This control has additional
functionality that is not found in the standard Windows text box control, including multiline editing and
password character masking.

For displaying a text in a TextBox control , you can code it like this:

textBox1.Text = “Input a number”;

For accepting and retrieve input from the user:

We need to have a variable with string data type to store the data. The code will look like this:

// for string input

string var;

var = textBox1.Text;

//for integer values

int i;

i = int.Parse (textBox1.Text);

//for float values

float i;

i = float.Parse (textBox1.Text);

//for double values

double i;

i = float.Parse (textBox1.Text);

You change basic properties of a textbox in the properties window. Some properties of a textbox:

Background Color and Foreground Color

 You can set background color and foreground color through property window and
programmatically.
Textbox BorderStyle

 You can set 3 different types of border style for textbox, they are None, FixedSingle and fixed3d.

TextBox Events

Keydown event

 You can capture which key is pressed by the user using KeyDown event

TextChanged Event

 When user input or setting the Text property to a new value raises the TextChanged event

Textbox Maximum Length

 Sets the maximum number of characters or words the user can input into the text box control.

Textbox ReadOnly

 When a program wants to prevent a user from changing the text that appears in a text box, the
program can set the controls Read-only property is to True.

Multiline TextBox

 You can use the Multiline and ScrollBars properties to enable multiple lines of text to be displayed
or entered.

Textbox password character

 TextBox controls can also be used to accept passwords and other sensitive information. You can
use the PasswordChar property to mask characters entered in a single line version of the control.
You can use ( * or .) as character to mask the password.

Let’s change the name property of the textbox form textBox1 to textInput.
Let’s change the passwordchar property using the * character:

How to add a label?

Labels are one of the most frequently used C# control. We can use the Label control to display text in a
set location on the page. Label controls can also be used to add descriptive text to a Form to provide the
user with helpful information.

To change the display text of the Label, you have to set a new text to the Text property of Label or code
like this:

label1.Text = "This is my first Label";

Label control can also display an image using the Image property, or a combination of the ImageIndex
and ImageList properties or code like this:

label1.Image = Image.FromFile("C:\\testimage.jpg");

In the above picture name, font, and text property of a label is change in the properties window.

Note: You can change the design of the label of your preference in the properties window.
Now that we have three controls, let’s have the program for the following controls.

To display the form1.cs file:

Press F7 or double click the Fom1 window to have the file where you can write your program. This is now
the look of your project. Also, if you want to add an event in some of your control like a button, just double
click the control to add an event. Event is an action response from the application every time you click
(example click a button).

Here is the sample program with GUI that will determine if the input value from the user is even or add.

The view of my design:

When I double click the button SUBMIT, it will display the code below:
private void btnSubmit_Click(object sender, EventArgs e)
{

For the code when submit button is clicked, we will implement the condition what to display base on the
user input.
Output of the code:

When I input 20 in the textbox and clicked submit:

Let’s add another button and call it btnClear.

The text property will display CLEAR, and when the button is click, it will clear the textbox to allow another
input.
For the code:

Output:

When clear is clicked:

Now, you can input another number.

For more Windows Form controls:

How to add a RadioButton?

A radio button or option button enables the user to select a single option from a group of choices when
paired with other RadioButton controls. When a user clicks on a radio button, it becomes checked, and all
other radio buttons with same group become unchecked.

The RadioButton control can display text, an Image, or both. Use the Checked property to get or set the
state of a RadioButton or code like this:

radioButton1.Checked = true;

How to add a CheckBox?

CheckBoxes allow the user to make multiple selections from a number of options. CheckBox to give the
user an option, such as true/false or yes/no. You can click a check box to select it and click it again to
deselect it.

The CheckBox control can display text, an Image, or both. Use the Checked property to get or set the state
of a CheckBox or code like this:

checkBox1.Checked = true;
How to add a ComboBox?

A ComboBox displays a text box combined with a ListBox, which enables the user to select items from the
list or enter a new value.

The user can type a value in the text field or click the button to display a drop down list.

To add an item to combobox:

comboBox1.Items.Add("Sunday");

comboBox1.Items.Add("Monday");

comboBox1.Items.Add("Tuesday");

To set default text in combobox:

Go to text property an input default string, example: Select as the default

To retrieve value from ComboBox:

If you want to retrieve the displayed item to a string variable, you can code like this:

string var;

var = comboBox1.Text;

or

var item = this.comboBox1.GetItemText(this.comboBox1.SelectedItem);

To remove an item from ComboBox:

You can remove items from a combobox in two ways. You can remove item at a the specified index or
giving a specified item by name.

comboBox1.Items.RemoveAt(1);

or

comboBox1.Items.Remove("Friday");

DropDownStyle

The DropDownStyle property specifies whether the list is always displayed or whether the list is displayed
in a drop-down. The DropDownStyle property also specifies whether the text portion can be edited.
To set the selected item in a comboBox:

You can display selected item in a combobox in two ways.

comboBox1.Items.Add("test1");

comboBox1.Items.Add("test2");

comboBox1.Items.Add("test3");

comboBox1.SelectedItem = "test3";

or

comboBox1.SelectedIndex = comboBox1.FindStringExact("test3");

Combobox SelectedIndexChanged event

The SelectedIndexChanged event of a combobox fire when you change the slected item in a combobox. If
you want to do something when you change the selection, you can write the program on
SelectedIndexChanged event. This if you have more than one combobox.

Example if you have two combobox:

For above output, the code is like this:
private void Form1_Load(object sender, EventArgs e)
{
comboBox1.Items.Add("weekdays");
comboBox1.Items.Add("year");
}
private void comboBox1_SelectedIndexChanged(object sender, EventArgs e)
{
comboBox2.Items.Clear();
if (comboBox1.SelectedItem == "weekdays")
{
comboBox2.Items.Add("Sunday");
comboBox2.Items.Add("Monday");
comboBox2.Items.Add("Tuesday");
}
else if (comboBox1.SelectedItem == "year")
{
comboBox2.Items.Add("2012");
comboBox2.Items.Add("2013");
comboBox2.Items.Add("2014");
}
}
}

Now, let’s have an example for the additional windows form control:

Form Design:
Color options uses radiobutton (allow user to select one option only)

Gadgets uses checkboxes (allow user to select multiple options)

String displays uses labels

DISPLAY uses button

Program:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace GUIExample
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{ //set default for control
comboBox1.Items.Add("year");
comboBox1.Items.Add("weekdays");

}
private void btnSubmit_Click(object sender, EventArgs e)
{
int x;
// get the input value from textbox
x = int.Parse(textInput.Text);
if (x % 2 == 0)
{
// display the string in the label
outputdisplay.Text = "The input number is even";
}
else {
// display the string in the label
outputdisplay.Text = "The input number is odd";
}
}

private void btnClear_Click(object sender, EventArgs e)

{
// set textbox text to null
textInput.Text = " "; // or textInput.Text = null;
 }

private void btnDisplay_Click(object sender, EventArgs e)

{
//for radiobuttons only one option to select so we use if else if statement
if (radibtnRed.Checked == true) {
//display the selected option in a label
displaySelected.Text = "You selected red";
}
else if (radibtnBlue.Checked == true)
{
displaySelected.Text = "You selected blue";
}
else if (radbtnGreen.Checked == true)
{
displaySelected.Text = "You selected green";
}
else {
displaySelected.Text = "Please selected a color and a gadget/s:";
}

//for checkboxes, more one option so we use if statement

if(checkBoxPhone.Checked == true){

// retain the string in the displayselected label and concatenate the selected option for
gadgets
displaySelected.Text = displaySelected.Text + " and a phone";

}
if (checkBoxLaptop.Checked == true)
{
displaySelected.Text = displaySelected.Text + " and a laptop";

}
if (checkBoxDesktop.Checked == true)
{
displaySelected.Text = displaySelected.Text + " and a desktop";

private void comboBox1_SelectedIndexChanged(object sender, EventArgs e)

{
comboBox2.Items.Clear();
if(comboBox1.SelectedItem == "weekdays")
{
comboBox2.Items.Add("Sunday");
comboBox2.Items.Add("Monday");
comboBox2.Items.Add("Tuesday");
}
else if(comboBox1.SelectedItem == "year")
{
comboBox2.Items.Add("2020");
comboBox2.Items.Add("2021");
 comboBox2.Items.Add("2022");
}
else {
comboBox2.Items.Clear();
}

}
}

Output:

After selecting blue smart phone and laptop, clicked display:

Select option for combobox1 to display option of combobox2.

When year is selected in the combobox:

When weekdays is selected in the combobox:

Exercise (Graded)

AT Bright University, the student's TUITION FEE is computed based from the inputted unit load
and the rate per unit. An additional P1000.00 as registration fee, Php 10.00 as Health Insurance and
miscellaneous fees.

The amount of miscellaneous fees a student pays during enrollment is determined by his
nationality, year level and gender. A flat fee of P200 is paid by all students. Male seniors pay an
additional P100 for CMT. Female freshmen and sophomores pay an additional P75 for girl scouting.
Foreigners pay an additional P200 as alien fees.

Compute & print each charges as well as the total Enrolment Fee to be paid by a student.

Info:
NATIONALITY - Filipino, Foreigner
GENDER - Male, Female
YEAR - 1 to 4
Follow the layout given below:

BRIGHT UNIVERSITY
Cebu City

N A M E : <input> I.D. no.: <input>

Course: <input> Rate per Unit: <input>
Year Level: <input> Total Unit Load: <input>
Nationality: <input>
Gender: <input>

NOTE:
 Use combobox for courses
 Use radiobuttons for year level, gender, nationality
 Use checkboxes for options of school clubs available for students to join (at least 5 clubs for
option)
 Use label to display student information (include the school clubs the student wanted to join)
 Use textboxes to input for name, ID no., number of units and rate per unit
 Compute the tuition fee using a button
 Use labels to display the tuition fee, misc fee, registration fee, health insurance and total tuition
fee

Note: set your own unit rate.