Assignment #4

Presentation
Names Registration Numbers
M Faraz Saleem FA16-BCS-111
Ehtasam Tariq FA16-BCS-009
Ali Raza FA16-BCS-003
M Imran FA16-BCS-071
Hassan Raza FA16-BCS-051
ProgressBar in C# windows forms
What is ProgressBar
• A ProgressBar control is used to represent the progress of a lengthy
operation that takes time where a user must wait for the operation to
be finished.
• 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.
Creating ProgressBar
• Design-time: To create a ProgressBar
control at design-time, you simply drag a
ProgressBar control from the Toolbox
and drop onto a Form in Visual Studio.
After you the drag and drop, a
ProgressBar is created on the Form; for
example the ProgressBar1 is added to
the form and looks as in Figure 1.
Setting ProgressBar Properties
•  After you place a ProgressBar
control on a Form, the next step is
to set the properties.
• The easiest way to set the
properties is from the Properties
Window. You can open the
Properties window by pressing F4
or right-clicking on a control and
selecting the "Properties" menu
item. The Properties window looks
as in Figure.
Setting ProgressBar Property
• Name: The Name property represents a unique name of a
ProgressBar control. It is used to access the control in the code. The
following code snippet sets and gets the name and text of a
ProgressBar control.
•  C# Code:
PBar.Name = "ProgresBar1";  
Positioning a ProgressBar

• We can use the Location property to position a control. We can also

dock a control using the Dock property. 
• Note: A ProgressBar can only be positioned horizontally.
• The Dock property is used to set the position of a ProgressBar. It is of
the type DockStyle that can have values Top, Bottom, Left, Right, and
Fill. The following code snippet sets the Location, Width, and Height
properties of a ProgressBar control. 
• C# Code:
pBar.Dock = DockStyle.Bottom;  
Minimum,
Maximum, and Value

•  The Minimum and Maximum properties define the

range of a ProgressBar. The Value property
represents the current value of a ProgressBar. The
current value of the ProgressBar for the minimum
value is the color green to show the progress of the
control. We can also use the Value property to
show the progress of an operation.
• C# Code:
pBar.Minimum = 0;  
pBar.Maximum = 100;  
pBar.Value = 70;  
• A ProgressBar with a value looks as in Figure 3.
Code

• I want to show progress of

calculations, which are
performing in external library.
• For example if I have some
calculate method, and I want to
use it for 100000 values in my
Form class I can write:
Code

• I should perform step after each

calculation. But what if I
perform all 100000 calculations
in external method. When
should I "perform step" if I don't
want to make this method
dependant on progress bar? I
can, for example, write
Using Visual Programming to
Create a Simple Program that
Displays Text and an Image

12
• Star the visual studio
• This program just displays such window:

Label
Control

PictureBox
Button Control
Control

Controls that will be used for this programs;

• A Label — contains the descriptive text
• A PictureBox — displays the image
• A Button – Used to run Program
13
 • Select File > New
Project… and select
Windows Forms
Application

• Name the project

<Name>

• Click Ok

Fig.1 | Form with the updated Text

property

14
• Right-click anywhere on the Form to display the Form’s properties
in the Properties window.
• Click in the textbox to the right of the Text property box and type
“A Simple Program” (Fig. 2)
Name and type of control

Setting the Form’s Text Selected property Property value

property in the
Properties window. Property description

• Press Enter Title bar

• See the Form’s title
bar updated immediately

Fig.2 | Form with the updated Text property.

15
• Resize the Form by clicking and dragging one of the
enabled sizing handles (Fig. 3).

Enabled sizing
handles

Fig.3 | Form with the updated Text property.

16
• Make the Form larger
• Select the bottom-right sizing handle and drag it down and
to the right to (Fig. 4).
• Watch that the Size property changes after dragging
• Note: You can also resize a Form by typing new value for
the Size property.

Fig. 4 | Resized Form.

17
 • In the Properties window, click BackgroundImage
• Click on the Import to get the image directory and import it then Ok

Fig. 5 | Applying form background image. 18

Using Visual Programming to
Create a Simple Program that Displays Text and an
Image (Cont.)
• Once you select the BackgroundImage, the Form’s
background changes to that image (Fig. 6).

New background image

Fig. 6 | Form with new BackgroundImage property applied.

19
 Using Visual Programming to
Create a Simple Program that Displays Text and an
Image (Cont.)
• If the toolbox is not open, open it
– View>>Toolbox (might be slooow, be patient)
• Add a Label (will contain “Welcome to Visual C#!”)
– Find and drag the Label control from the Toolbox to the
Form (Fig. 2.35)
OR:
– Double click the Label control

Label control
in the Toolbox

Fig. 7 | Adding a Label to the Form.

20
• Set the AutoSize property to False
• If the AutoSize property is set to True, it automatically
resizes the Label to fit its text
• We will change it, and we don’t want automatic resizing

AutoSize
property

Fig 9 | Changing the label1’s

AutoSize property to
False.
21
Using Visual Programming to Create … (Cont.)

• Change the font of the Label’s text

– Click on the Font property (Fig. 2.38).
– The ellipsis button appears
– Click on the ellipsis button
- The Font dialog appears (next slide)

Ellipsis button

Fig. 10 | Properties window displaying the Label’s properties.

22
Using Visual Programming to
Create a Simple Program that … (Cont.)
• The Font dialog (Fig. 2.39) allows you to select the font name,
style and size.
• Under Font, select Segoe UI.
• Under Size, select 24 points
• Click OK.
• Resize the Label if it’s not large enough to hold the text.

Current font

Font sample

Fig. 11 | Font dialog for selecting fonts, styles and sizes. 23

• Make sure that text in the label is in two rows (see
Fig. below).
– If not, adjust label size to have text in 2 rows as shown
• Drag PictureBox from the Toolbox to the Form

24
Add picture in project by right clicking on project from solution
1.Click add
2.Then click Existing Items..
And move to the directory and select pic and hit the ok button

Added Picture
Using Visual Programming to
Create a Simple Program that Displays Text and an
Image
• Click the PictureBox to display its properties in the
Properties window
• The Image property displays a preview of the image, if one
exists.

Image property value

(no image selected)

Fig. 12| Image property of the PictureBox.

26
 Using Visual Programming to Create … (Cont.)
• Select File >> Save All to save the entire solution

• Select Build>>Build Solution

27
Using Visual Programming to Create … (Cont.)
• Select Debug >> Start Debugging to compile and
execute the program (Fig. 17).

Form without running or debugging

Close box

Form

Running program

Fig.17 | In run mode, with the running program in the foreground.

28
Panel in C# windows forms
What is Panel
• Windows Forms Panel controls are used to
provide an identifiable grouping for other
controls. Typically, you use panels to subdivide
a form by function.
• The Panel control is similar to the GroupBox
control; however, only the Panel control can have
scroll bars, and only the GroupBox control
displays a caption.
Sub Controls in Panel
• The entire point of the panel is to provide a visual and logical
grouping for controls. To add some controls to the panel, drag them
to the inner part of the panel in Visual Studio
STEP 1 - Start
the Project
• Let's start the Project. Open
Visual Studio 2017--->Start
new Project---
>Windows.Forms Application--
>Name it as Panel Control
STEP 2 - Drag and Drop Controls
• By Default Form Designer Page
will be loaded and in the
Designer page, You need to
create three pages with the
Panel Control.
Page 1
• In the form drag and drop Panel
control from the toolbox onto
the form in Visual Studio 2017.
Inside the Panel Control, drag
and drop other sub controls like
Label ,TextBox, and Checkbox.
Change the text of the controls
as given below in the
screenshot. 
Page 2
• In the form, drag and drop panel
control from toolbox onto the
form in Visual Studio 2017.
Insidd the Panel Control drag
and drop other sub controls like
Label,TextBox and PictureBox.
Change the text of the controls
as given below in the
screenshot.
Page 3
• In the form drag and drop panel control from the
toolbox onto the form in Visual Studio 2017. Inside
the Panel Control drag and drop other sub controls
like Label,TextBox and Picture Box. Change the text of
the controls as given below in the screenshot.
• Drag and drop button control onto  the form from
toolbox in Visual Studio 2017 and change the text of
the button as previous and next.
 Step 3 Coding
Follow the coding given below in the screenshot for panel cotrol in the windows  forms application.
Step 3 Coding
• private void button1_Click(object sender, EventArgs e)  
•        {  
•            if (index > 0)  
•                listpanel[--index].BringToFront();  
•        }  
•   
•        private void Form1_Load(object sender, EventArgs e)  
•        {  
•            listpanel.Add(panel1);  
•            listpanel.Add(panel2);  
•            listpanel.Add(panel3);  
•            listpanel[index].BringToFront();  
•        }  
•   
•        private void button2_Click(object sender, EventArgs e)  
•        {  
•            if (index < listpanel.Count - 1)  
•                listpanel[++index].BringToFront();  
•        }  
STEP 4 - Output
• Compile and run the code and the following output will be obtained
as given below in the screenshot. As the next button is clicked pages
 are navigated to the next page. When the previous button is clicked
the pages are navigated to the previous pages.
The next button is clicked and page 2 is navigated to
page 3
Previous button is clicked and page 2  is navigated to
page 1
 MaskedTextBox In C#

• A MaskedTextBox control provides a validation mechanism for user input on a Form. For example, if you want
a TextBox to accept a date in mm/dd/yyyy format, you can set masking in the MaskedTextBox.

In this article, I will discuss how to create a MaskedTextBox control in Windows Forms at design-time as well
as run-time. After that, I will continue discussing various properties and methods available for the
MaskedTextBox control.

Creating a MaskedTextBox

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

To create a MaskedTextBox control at design-time, you simply drag and drop a MaskedTextBox control from
Toolbox to a Form in Visual Studio. After you drag and drop a MaskedTextBox on a Form, the MaskedTextBox
looks like Figure 1. Once a MaskedTextBox is on the Form, you can move it around and resize it using mouse
and set its properties and events.
• Creating a MaskedTextBox control at run-time is merely a work of creating
an instance of MaskedTextBox class, setting its properties and adding
MaskedTextBox class to the Form controls.

The first step to create a dynamic MaskedTextBox is to create an instance

of MaskedTextBox class. The following code snippet creates a
MaskedTextBox control object.
• MaskedTextBox dynamicMaskedTextBox = newMaskedTextBox();  
• In the next step, you may set properties of a MaskedTextBox control. The
following code snippet sets background color, foreground color, Text,
Name, and Font properties of a MaskedTextBox.
• dynamicMaskedTextBox.BackColor = Color.Red;  
• dynamicMaskedTextBox.ForeColor = Color.Blue;  
• dynamicMaskedTextBox.Text = "I am Dynamic MaskedTextBox";  
• dynamicMaskedTextBox.Name = "DynamicMaskedTextBox";  
• dynamicMaskedTextBox.Font = newFont("Georgia", 16);  
• Once a MaskedTextBox control is ready with its properties, the next step is to add the MaskedTextBox control to the
Form. To do so, we use Form.Controls.Add method. The following code snippet adds a MaskedTextBox control to the
current Form.
• Controls.Add(dynamicMaskedTextBox);  
• Setting MaskedTextBox Properties

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

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.
• Location, Height, Width, and Size

The Location property takes a Point that specifies the starting position of the MaskedTextBox on a 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 MaskedTextBox control.
• dynamicMaskedTextBox.Location = newPoint(20, 150);  
• dynamicMaskedTextBox.Height = 40;  
• dynamicMaskedTextBox.Width = 300;  
• Background, Foreground, BorderStyle

BackColor and ForeColor properties are used to set background and foreground color of a MaskedTextBox respectively. If you click on these
properties in Properties window, the Color Dialog pops up.

Alternatively, you can set background and foreground colors at run-time. The following code snippet sets BackColor and ForeColor properties.
• dynamicMaskedTextBox.BackColor = Color.Red;  
• dynamicMaskedTextBox.ForeColor = Color.Blue;  
• You can also set borders style of a MaskedTextBox by using the BorderStyle property. The BorderStyle property is represented by a BorderStyle
enumeration that has three values – FixedSingle, Fixed3D, and None. The default value of border style is Fixed3D. The following code snippet
sets the border style of a MaskedTextBox to FixedSingle.
• dynamicMaskedTextBox.BorderStyle = BorderStyle.FixedSingle;  
• Name

Name property represents a unique name of a MaskedTextBox control. It is used to access the control in the code.
The following code snippet sets and gets the name and text of a MaskedTextBox control.
• dynamicMaskedTextBox.Name = "DynamicMaskedTextBox";  
• string name = dynamicMaskedTextBox.Name;  
• Text, TextAlign, and TextLength

Text property of a MaskedTextBox represents the current text of a MaskedTextBox control. The TextAlign property
represents text alignment that can be Left, Center, or Right. The TextLength property returns the length of a
MaskedTextBox contents.

The following code snippet sets the Text and TextAlign properties and gets the size of a MaskedTextBox control.
• dynamicMaskedTextBox.Text = "I am Dynamic MaskedTextBox";  
• dynamicMaskedTextBox.TextAlign = HorizontalAlignment.Center;  
• int size = dynamicMaskedTextBox.TextLength;  
• Font

Font property represents the font of text of a MaskedTextBox 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.

dynamicMaskedTextBox.Font = newFont("Georgia", 16);

Maximum Length

You can restrict the number of characters in a MaskedTextBox control by setting MaxLength property. The following code snippet sets the
maximum length of a MaskedTextBox to 50 characters.
• dynamicMaskedTextBox.ReadOnly = true;  
• dynamicMaskedTextBox.MaxLength = 50;  
• Masking Related Properties

Mask

Masks the default property and represents the format of the input can be accepted by a control. We can set Mask property by clicking on the
control and click on the little handler and select Set Mask link as you can see in Figure 3.
• The following code snippet sets the Mask property at run-time.
• dynamicMaskedTextBox.Mask = "00/00/0000";  
• Here is a list and description of masking characters.
• 0 – Digit, required. Value between 0 and 9.
• 9 – Digit or space, optional.
• # - Digit or space, optional. If this position is blank in the mask, it will be
rendered as a space in the Text property.
• L - Letter, required. Restricts input to the ASCII letters a-z and A-Z.
• ? - Letter, optional. Restricts input to the ASCII letters a-z and A-Z.
• & - Character, required.
• C - Character, optional. Any non-control character.
• A - Alphanumeric, required.
• a - Alphanumeric, optional.
• . - Decimal placeholder.
• , - Thousands placeholder.
• : - Time separator.
• / - Date separator.
• $ - Currency symbol.
• < - Shift down. Converts all characters that follow to lowercase.
• > - Shift up. Converts all characters that follow to uppercase.
• | - Disable a previous shift up or shift down.
• \ - Escape. Escapes a mask character, turning it into a literal. "\\" is the escape sequence for a backslash.