Week1_WindowsGUIProgramming
Week1_WindowsGUIProgramming
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.
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.
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.
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.
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:
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.
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:
We need to have a variable with string data type to store the data. The code will look like this:
string var;
var = textBox1.Text;
int i;
i = int.Parse (textBox1.Text);
float i;
i = float.Parse (textBox1.Text);
double i;
i = float.Parse (textBox1.Text);
You change basic properties of a textbox in the properties window. Some properties of a textbox:
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
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 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:
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:
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.
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.
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:
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:
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;
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.
comboBox1.Items.Add("Sunday");
comboBox1.Items.Add("Monday");
comboBox1.Items.Add("Tuesday");
If you want to retrieve the displayed item to a string variable, you can code like this:
string var;
var = comboBox1.Text;
or
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:
comboBox1.Items.Add("test1");
comboBox1.Items.Add("test2");
comboBox1.Items.Add("test3");
comboBox1.SelectedItem = "test3";
or
comboBox1.SelectedIndex = comboBox1.FindStringExact("test3");
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.
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)
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";
}
}
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";
}
}
Output:
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
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