ST.

ANTHONY’S COLLEGE
San Jose de Buenavista, 5700 Antique
Telefax No.: (036) 5409238; 5400898; 5409971 Tel No.: (036) 5409196
Website: www.sac.edu.ph Email: [email protected]
In SAC, we care!
Engineering and Technology Department
2nd Semester, AY 2022-2023

COMPUTER PROGRAMMING II
(CC103)

Week 2 – 3: BASIC CONTROLS

Adding Controls to a form

In Windows form application in C# examples, we will create one form which will have the
following functionality.
• The user's ability to submit their name and address.
• A selection of the city the user currently resides in
• The possibility for the user to specify their gender.
• The opportunity to select the course the user wishes to take. There will be options for
both ASP.Net and C#.

So let's take a closer look at each control before adding them to the form to implement the
aforementioned functionality.

Group Box
A group box is used for logical grouping controls into a section. Let’s take an example if you
had a collection of controls for entering details such as name and address of a person.
Ideally, these are details of a person, so you would want to have these details in a separate
section on the Form. For this purpose, you can have a group box. Let’s see how we can
implement this with an example shown below

Step 1) The first step is to drag the Groupbox control onto the Windows Form from the toolbox
as shown below
Step 2) Once the groupbox has been added, go to the properties window by clicking on the
groupbox control. In the properties window, go to the Text property and change it to “User
Details”.
Once you make the above changes, you will see the following output
In the output, you can clearly see that the Groupbox was added to the form. You can also
see that the text of the groupbox was changed to “User Details.”

Label Control
Next comes the Label Control. The label control is used to display a text or a message to the
user on the form. The label control is normally used along with other controls. Common
examples are wherein a label is added along with the textbox control.

The label indicates to the user on what is expected to fill up in the textbox. Let’s see how we
can implement this with an example shown below. We will add 2 labels, one which will be
called ‘name’ and the other called ‘address.’ They will be used in conjunction with the
textbox controls which will be added in the later section.

Step 1) The first step is to drag the label control on to the Windows Form from the toolbox as
shown below. Make sure you drag the label control 2 times so that you can have one for the
‘name’ and the other for the ‘address’.

Step 2) Once the label has been added, go to the properties window by clicking on the
label control. In the properties window, go to the Text property of each label control.
Once you make the above changes, you will see the following output

Output:-
You can see the label controls added to the form.

Textbox
A textbox is used for allowing a user to enter some text on the Windows application in C#.
Let’s see how we can implement this with an example shown below. We will add 2 textboxes
to the form, one for the Name and the other for the address to be entered for the user

Step 1) The first step is to drag the textbox control onto the Windows Form from the toolbox as
shown below

Step 2) Once the text boxes have been added, go to the properties window by clicking on
the textbox control. In the properties window, go to the Name property and add a
meaningful name to each textbox. For example, name the textbox for the user as txtName
and that for the address as txtAddress. A naming convention and standard should be made
for controls because it becomes easier to add extra functionality to these controls, which we
will see later on.
Once you make the above changes, you will see the following output

Output:-
In the output, you can clearly see that the Textboxes was added to the form.

List box
A Listbox is used to showcase a list of items on the Windows form. Let’s see how we can
implement this with an example shown below. We will add a list box to the form to store
some city locations.

Step 1) The first step is to drag the list box control onto the Windows Form from the toolbox as
shown below

Step 2) Once the list box has been added, go to the properties window by clicking on the list
box control.
 1. First, change the property of the Listbox box control, in our case, we have changed
this to lstCity
2. Click on the Items property. This will allow you to add different items which can show
up in the list box. In our case, we have selected items “collection”.
3. In the String Collection Editor, which pops up, enter the city names. In our case, we
have entered “Mumbai”, “Bangalore” and “Hyderabad”.
4. Finally, click on the ‘OK’ button.

Once you make the above changes, you will see the following output

Output:-

In the output, you can see that the Listbox was added to the form. You can also see that the
list box has been populated with the city values.
RadioButton
A Radiobutton is used to showcase a list of items out of which the user can choose one. Let’s
see how we can implement this with an example shown below. We will add a radio button
for a male/female option.

Step 1) The first step is to drag the ‘radiobutton’ control onto the Windows Form from the
toolbox as shown below.

Step 2) Once the Radiobutton has been added, go to the properties window by clicking on
the Radiobutton control.
 1. First, you need to change the text property of both Radio controls. Go the properties
windows and change the text to a male of one radiobutton and the text of the other
to female.
2. Similarly, change the name property of both Radio controls. Go the properties
windows and change the name to ‘rdMale’ of one radiobutton and to ‘rdfemale’ for
the other one.

One you make the above changes, you will see the following output

Output:-
You will see the Radio buttons added to the Windows form.

Checkbox
A checkbox is used to provide a list of options in which the user can choose multiple choices.
Let’s see how we can implement this with an example shown below. We will add 2
checkboxes to our Windows forms. These checkboxes will provide an option to the user on
whether they want to learn C# or ASP.Net.

Step 1) The first step is to drag the checkbox control onto the Windows Form from the toolbox
as shown below
Step 2) Once the checkbox has been added, go to the properties window by clicking on
the Checkbox control.
In the properties window,

1. First, you need to change the text property of both checkbox controls. Go the
properties windows and change the text to C# and ASP.Net.
2. Similarly, change the name property of both Radio controls. Go the properties
windows and change the name to chkC of one checkbox and to chkASP for the other
one.

Once you make the above changes, you will see the following output

Output:-
Button
A button is used to allow the user to click on a button which would then start the processing
of the form. Let’s see how we can implement this with an example shown below. We will add
a simple button called ‘Submit’ which will be used to submit all the information on the form.

Step 1) The first step is to drag the button control onto the Windows Form from the toolbox as
shown below

Step 2) Once the Button has been added, go to the properties window by clicking on the
Button control.
 1. First, you need to change the text property of the button control. Go the properties
windows and change the text to ‘submit’.
2. Similarly, change the name property of the control. Go the properties windows and
change the name to ‘btnSubmit’.

Once you make the above changes, you will see the following output

Output:-
Tree and PictureBox Control
There are 2 further controls we can look at, one is the ‘Tree Control’ and the other is the
‘Image control’. Let’s look at examples of how we can implement these controls

Tree Control
– The tree control is used to list down items in a tree like fashion. Probably the best example is
when we see the Windows Explorer itself. The folder structure in Windows Explorer is like a
tree-like structure.

Let’s see how we can implement this with an example shown below.

Step 1) The first step is to drag the Tree control onto the Windows Form from the toolbox as
shown below
Step 2) The next step is to start adding nodes to the tree collection so that it can come up in
the tree accordingly. First, let’s follow the below sub-steps to add a root node to the tree
collection.

1. Go to the properties toolbox for the tree view control. Click on the Node’s property.
This will bring up the TreeNode Editor
 2. In the TreeNode Editor click on the Add Root button to add a root node to the tree
collection.
3. Next, change the text of the Root node and provide the text as Root and click ‘OK’
button. This will add Root node.

Step 3) The next step is to start adding the child nodes to the tree collection. Let’s follow the
below sub-steps to add child root node to the tree collection.

1. First, click on the Add child button. This will allow you to add child nodes to the Tree
collection.
2. For each child node, change the text property. Keep on repeating the previous step
and this step and add 2 additional nodes. In the end, you will have 3 nodes as shown
above, with the text as Label, Button, and Checkbox respectively.
3. Click on the OK button

Once you have made the above changes, you will see the following output.

Output:-
You will be able to see the Tree view added to the form. When you run the Windows form
application, you can expand the root node and see the child nodes in the list.

PictureBox Control
This control is used to add images to the Winforms C#. Let’s see how we can implement this
with an example shown below.

Step 1) The first step is to drag the PictureBox control onto the C# Windows Form from the
toolbox as shown below
Step 2) The next step is to actually attach an image to the picture box control. This can be
done by following the below steps.

1. First, click on the Image property for the PictureBox control. A new window will pops
out.
2. In this window, click on the Import button. This will be used to attach an image to the
picturebox control.
3. A dialog box will pop up in which you will be able to choose the image to attach the
picturebox
4. Click on the OK button

One you make the above changes, you will see the following output

Output:-
Save your work for future use.

C# ComboBox Control

The ComboBox control provides combined functionality of a text box and a listbox in a single
control. Only one list item is displayed at one time in a ComboBox and rest of the available
items are loaded in a drop down list.

Creating a ComboBox

We can create a ComboBox control using a Forms designer at design-time or using the
ComboBox class in C# code at run-time.

To create a ComboBox control at design-time, you simply drag and drop a ComboBox
control from Toolbox to a Form in Visual Studio. After you drag and drop a ComboBox on a
Form, the ComboBox looks like Figure 1.
Once a ComboBox is on the Form, you can move it around and resize it and set its properties
and events using the Properties and Events windows.

Creating a ComboBox control at run-time includes creating an instance of ComboBox class,

set its properties and add ComboBox instance to the Form controls.

First step to create a dynamic ComboBox is to create an instance of ComboBox class.

The following code snippet creates a ComboBox control object.

1. ComboBox comboBox1 = new ComboBox();

In the next step, you set properties of a ComboBox control.

The following code snippet sets location, width, height, background color, foreground color,
Text, Name, and Font properties of a ComboBox.

1. comboBox1.Location = new System.Drawing.Point(20, 60);

2. comboBox1.Name = "comboBox1";
3. comboBox1.Size = new System.Drawing.Size(245, 25);
4. comboBox1.BackColor = System.Drawing.Color.Orange;
5. comboBox1.ForeColor = System.Drawing.Color.Black;

Once the ComboBox control is ready with its properties, the next step is to add the
ComboBox to a Form.

To do so, we use Form.Controls.Add method.

The following code snippet adds a ComboBox control to the current Form.
 1. Controls.Add(comboBox1);

Setting ComboBox Properties

Alternatively, you can set control properites at design time. The easiest way to set properties
is from the Properties Window. You can open Properties window by pressing F4 or right click
on a control and select Properties menu item. The Properties window looks like Figure 2.

Name

Name property represents a unique name of a ComboBox control. It is used to access

control in the code. The following code snippet sets and gets the name and text of a
ComboBox control.

1. comboBox1.Name = "comboBox1";

Location, Height, Width and Size

The Location property is a type of Point that specifies the starting position of the ComboBox
on a Form. You may also use Left and Top properties to specify the location of a control from
the left top corner of the Form. The Size property specifies the size of the control. We can also
use Width and Height property instead of Size property. The following code snippet sets
Location, Width, and Height properties of a ComboBox control.
 1. comboBox1.Location = New System.Drawing.Point(12, 12);
2. comboBox1.Size = New System.Drawing.Size(300, 25);
3. comboBox1.Width = 300;
4. comboBox1.Height = 25;

DropDownHeight and DropDownWidth

You can control the size of the dropdown area of a ComboBox. The DropDownHeight and
DropDownWidth properties represent the height and width of the dropdown area in pixel
respectively. If the DropDownWidth and DropDownHeight properties are less than the Width
and Height values, they will not be applicable. If all the items do not fit in the size of the
dropdown area, the scrollbars will appear as you can see from Figure 3.

The following code snippet sets the height and width of the dropdown area of a ComboBox.

1. comboBox1.DropDownHeight = 50;
2. comboBox1.DropDownWidth = 300;

Font

Font property represents font of text of a ComboBox control. If you click on the Font property
in Properties window, you will see Font name, size and other font options.

1. comboBox1.Font = new Font("Georgia", 16);

Background and Foreground

BackColor and ForeColor properties are used to set background color and foreground color
of a ComboBox respectively. If you click on these properties in Properties window, the Color
Dialog pops up.
Alternatively, you can set background color and foreground color at run-time. The following
code snippet sets BackColor and ForeColor properties.

1. comboBox1.BackColor = System.Drawing.Color.Orange;
2. comboBox1.ForeColor = System.Drawing.Color.Black;

The new ComboBox with background and foreground looks like Figure 4.

ComboBox Items

The Items property is used to add and access items in a ComboBox. We can add items to a
ComboBox at design-time from Properties Window by clicking on Items Collection as you
can see in Figure 5.
When you click on the Collections, the String Collection Editor window will pop up where you
can type strings. Each line added to this collection will become a ComboBox item. I add four
items as you can see from Figure 6.
The ComboBox looks like Figure 7.

Alternatively, you can add same items at run-time by using the following code snippet.

1. comboBox1.Items.Add("Mahesh Chand");
2. comboBox1.Items.Add("Mike Gold");
3. comboBox1.Items.Add("Praveen Kumar");
4. comboBox1.Items.Add("Raj Beniwal");
C# ProgressBar Control

A progress bar is a control that an application can use to indicate the progress of a lengthy
operation such as calculating a complex result, downloading a large file from the Web etc.

ProgressBar controls are used whenever an operation takes more than a short period of time.
The Maximum and Minimum properties define the range of values to represent the progress of
a task.

 Minimum : Sets the lower value for the range of valid values for progress.

 Maximum : Sets the upper value for the range of valid values for progress.

 Value : This property obtains or sets the current level of progress.

By default, Minimum and Maximum are set to 0 and 100. As the task proceeds, the ProgressBar
fills in from the left to the right. To delay the program briefly so that you can view changes in
the progress bar clearly.

The following C# program shows a simple operation in a progressbar .

using System;
using System.Drawing;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}

private void button1_Click(object sender, EventArgs e)

{
int i;

progressBar1.Minimum = 0;
progressBar1.Maximum = 200;

for (i = 0; i <= 200; i++)

{
progressBar1.Value = i;
}

}
}
C# DateTimePicker Control

The DateTimePicker control allows you to display and collect date and time from the user with
a specified format.

The DateTimePicker control has two parts, a label that displays the selected date and a popup
calendar that allows users to select a new date. The most important property of the
DateTimePicker is the Value property, which holds the selected date and time.

dateTimePicker1.Value = DateTime.Today;

The Value property contains the current date and time the control is set to. You can use the
Text property or the appropriate member of Value to get the date and time value.

DateTime iDate;
iDate = dateTimePicker1.Value;

The control can display one of several styles, depending on its property values. The values can
be displayed in four formats, which are set by the Format property: Long, Short, Time, or
Custom.

dateTimePicker1.Format = DateTimePickerFormat.Short;
using System;
using System.Drawing;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}

private void Form1_Load(object sender, EventArgs e)

{
dateTimePicker1.Format = DateTimePickerFormat.Short;
dateTimePicker1.Value = DateTime.Today;
}

private void button1_Click(object sender, EventArgs e)

{
DateTime iDate;
iDate = dateTimePicker1.Value;
MessageBox.Show("Selected date is " + iDate);
}
}
}
NumericUpDown In C#

A NumericUpDown control allows users to provide a spin (up/down) interface to move

through pre-defined numbers using up and down arrows. In this tutorial, we will see how to
create a NumericUpDown control at design-time as well as at run-time.

Creating a NumericUpDown

We can create a NumericUpDown control using the Forms designer at design-time or using
the NumericUpDown class in code at run-time (also known as dynamically).

Design-time

To create a NumericUpDown control at design-time, you simply drag and drop a

NumericUpDown control from Toolbox to a Form in Visual Studio. After you drag and drop a
NumericUpDown on a Form, the NumericUpDown looks like Figure 1. Once a
NumericUpDown is on the Form, you can move it around and resize it using mouse and set its
properties and events.

Run-time

Creating a NumericUpDown control at run-time is merely a work of creating an instance of

NumericUpDown class, setting its properties and adding NumericUpDown class to the Form
controls.

First step to create a dynamic NumericUpDown is to create an instance of NumericUpDown

class. The following code snippet creates a NumericUpDown control object.

1. private System.Windows.Forms.NumericUpDown numericUpDown1;

2. this.numericUpDown1 = new System.Windows.Forms.NumericUpDown();

In the next step, you may set properties of a NumericUpDown control. The following code
snippet sets location, size and name properties of a NumericUpDown.
 1. this.numericUpDown1.Location = new System.Drawing.Point(26, 12);
2. this.numericUpDown1.Name = "numericUpDown1";
3. this.numericUpDown1.Size = new System.Drawing.Size(228, 20);
4. this.numericUpDown1.TabIndex = 0;

Once the NumericUpDown control is ready with its properties, the next step is to add the
NumericUpDown to a Form. To do so, we use Form.Controls.Add method that adds
NumericUpDown control to the Form controls and displays on the Form based on the
location and size of the control. The following code snippet adds a NumericUpDown control
to the current Form.

1. this.Controls.Add(this.NumericUpDown1);

Setting NumericUpDown Properties

After you place a NumericUpDown control on a Form, the next step is to set its properties.

The easiest way to set properties is from the Properties Window. You can open Properties
window by pressing F4 or right clicking on a control and selecting Properties menu item. The
Properties window looks like Figure 2.
Name

Name property represents a unique name of a NumericUpDown control. It is used to access

the control in the code. The following code snippet sets and gets the name and text of a
NumericUpDown control.

1. privateNumericUpDown dynamicUpDown = newNumericUpDown();

2. dynamicUpDown.Name = "DynamicUpDownButton";

Location, Height, Width and Size

The Location property takes a Point that specifies the starting position of the
NumericUpDown on a Form. You may also use Left and Top properties to specify the location
of a control from the left top corner of the Form. The Size property specifies the size of the
control. We can also use Width and Height property instead of Size property. The following
code snippet sets Location, Width, and Height properties of a NumericUpDown control.

1. dynamicUpDown.Location = new System.Drawing.Point(12, 50);

2. dynamicUpDown.Width = 200;
3. dynamicUpDown.Height = 25;

Font

Font property represents the font of text of a NumericUpDown control. If you click on the Font
property in Properties window, you will see Font name, size and other font options. The
following code snippet sets Font property at run-time.

1. dynamicUpDown.Font = newFont("Georgia", 12);

Foreground and Background

ForeColor and BackColor properties represent foreground and background colors of a

control. The following code snippet sets the background and foreground colors of a control.

1. dynamicUpDown.ForeColor = Color.Orange;
2. dynamicUpDown.BackColor = Color.Black;

Current Value

The Value property represents the currently selected value in a control. The following code
snippet sets and gets the Value properties at run-time.

1. dynamicUpDown.Value = 10;
2. MessageBox.Show(dynamicUpDown.Value.ToString());

Minimum and Maximum Range

Minimum and Maximum properties are used to set the minimum and maximum values of a
NumericUpDown control. The following code snippet sets the minimum and maximum
properties at run-time.
 1. dynamicUpDown.Minimum = -10;
2. dynamicUpDown.Maximum = 10;

Acceleration and Increment

Accelerations property can be used to move through a set of values when up and down
buttons are clicked in a NumericUpDown control.

Increment property is used to set the value that is increased or decreased when up and
down buttons are clicked. The following code snippet sets the Increment and adds
accelerations.

1. dynamicUpDown.Increment = 5;
2. numericUpDown1.Accelerations.Add(newNumericUpDownAcceleration(2, -5));
3. numericUpDown1.Accelerations.Add(newNumericUpDownAcceleration(5, 0));
4. numericUpDown1.Accelerations.Add(newNumericUpDownAcceleration(8, 5));

Decimal Places

We can format the number of a NumericDropDown control using the DecimalPlaces

property. The following code snippet formats the number that displays 4 decimal values.

1. dynamicUpDown.DecimalPlaces = 4;

HexaDecimal

We can use a NumericDropDown control to display number value in hexadecimal format.

The following code snippet formats the number in hexadecimal.

1. dynamicUpDown.Hexadecimal = true;

NumericUpDown ValueChanged Event Hander

ValueChanged event is fired when the value of a NumericUpDown control is changed. This is
important, say, if you need to refresh some data on the Form based on the value of the
changed NumericUpDown.

To add this property event handler, you go to Events window and double click on the
ValueChanged event as you can see in Figure 3
The following code snippet defines and implements these events and their respective event
handlers.

1. this.numericUpDown1.ValueChanged += new System.EventHandler(this.numericUpDow

n1_ValueChanged);
2. privatevoid numericUpDown1_ValueChanged(object sender, EventArgs e)
3. {
4. }