Fall 2014

Visual
Instructor: Saima Jawad
Programming

Advance
GUI Design
Tab Control
ListView
TreeView
Split Container
Progress Bar
Status Bar

Week-11 Outline

Visual Programming - Fall 2014

Instructor: Saima Jawad 1
 Tab Control
4

Tab pages

Visual Programming - Fall 2014

Instructor: Saima Jawad 2
 Tab Control
5

Creates a Tabbed Window

 Contains TabPage objects

 TabPages can have controls
 Tabpages have Click event

Tab Control
6

TabControl presents a tabbed layout in

the user interface.
TabPage

TabControl

Controls in
TabPage

Visual Programming - Fall 2014

Instructor: Saima Jawad 3
 Using a Tab Control
7

Adding TabPages to the TabControl.

Tab Control Properties and Events

8

TabControl Description
properties and
events
Common Properties
ImageList Specifies images to be displayed on a tab.
MultiLine Indicates whether multiple rows of tabs can be displayed.
SelectedIndex Indicates index of TabPage that is currently selected.

SelectedTab Indicates the TabPage that is currently selected.

TabCount Returns the number of tabs.
TabPages Gets the collection of TabPages within our TabControl.
Common Event
SelectedIndex Generated when SelectedIndex changes (i.e., another
Changed TabPage is selected).
TabControl properties and events.

Visual Programming - Fall 2014

Instructor: Saima Jawad 4
 Using TabControl to display various
Font Settings

// event handler for black color radio button

private void blackRadioButton_CheckedChanged(object sender, EventArgs e )
{
displayLabel.ForeColor = Color.Black;
}

// event handler for red color radio button

private void redRadioButton_CheckedChanged(object sender, EventArgs e )
{
displayLabel.ForeColor = Color.Red;
}

// event handler for green color radio button

private void greenRadioButton_CheckedChanged(object sender, EventArgs e )
{
displayLabel.ForeColor = Color.Green;
}

Visual Programming - Fall 2014

Instructor: Saima Jawad 5
 Using TabControl

void fontListBox_SelectedIndexChanged( object sender, EventArgs e)

{
displayLabel.Font = new Font( fontListBox.SelectedItem.ToString(), 16 );
}

Using TabControl

// event handler for message "Hello!" radio button

private void helloRadioButton_CheckedChanged(object sender,
EventArgs e )
{
displayLabel.Text = "Hello!“ ;
}

// event handler for “Goodbye!" radio button

private void goodByeRadioButton_CheckedChanged(object sender,
EventArgs e )
{
displayLabel.Text = "Goodbye!“ ;
}

Visual Programming - Fall 2014

Instructor: Saima Jawad 6
 ListView
13

A list view is a list of items with multiple options.

 The items can each appear as a large icon and a

label

ListView
14

 The items can each appear as a small icon and a

label:

Visual Programming - Fall 2014

Instructor: Saima Jawad 7
 ListView
15

 The items can be made to show some details

(related-information) each:

List View Creation

16

 The list view control is made available in the

.NET Framework through the ListView class
that is represented in the Windows Forms
section of the Toolbox by the list view button.

Visual Programming - Fall 2014

Instructor: Saima Jawad 8
 The Collection of Listview Items
17

 The items of a list view are stored in a property

called Items, which is of type
ListViewItemCollection.

Visually Creating the Items of a List View

 To visually create the items of a list view, we can use the
ListViewItem Collection Editor.

The Collection Editor

18

Visual Programming - Fall 2014

Instructor: Saima Jawad 9
 ListView Example
19

ColumnHeader Collection Editor

20

Visual Programming - Fall 2014

Instructor: Saima Jawad 10
 Creating Columns Visually
21

 To support columns, the ListView class is equipped

with the Columns property.

 Each column is based on the ColumnHeader class.

 At design time, to create the columns:

 On the form, right-click the list view and click Edit Columns...

 To view columns set the View property to Details

Creating Columns through Code

22

listView.Columns.Add("ProductName", 100,
HorizontalAlignment.Center);

Visual Programming - Fall 2014

Instructor: Saima Jawad 11
 Listview Example
23

Listview Example
24

Set the following properties of listview control:

conListView.View = View.Details;
conListView.GridLines = true;
conListView.FullRowSelect = true;

Visual Programming - Fall 2014

Instructor: Saima Jawad 12
 Listview Example
25

private void addButton_Click(object sender, EventArgs e)

{
string[] row = { NTextBox.Text, ETextBox.Text, PTextBox.Text };
ListViewItem listViewItem = new ListViewItem(row);

conListView.Items.Add(listViewItem);

NTextBox.Text = "";
ETextBox.Text = "";
PTextBox.Text = "";
}

Listview Example
26

private void removeButton_Click(object sender, EventArgs e)

{
foreach (ListViewItem item in conListView.Items)
if (item.Selected)
conListView.Items.Remove(item);
}

private void clearButton_Click(object sender, EventArgs e)

{
conListView.Items.Clear();
}

Visual Programming - Fall 2014

Instructor: Saima Jawad 13
 TreeView
27

TreeView
28

 Displays nodes hierarchically

 Parent nodes have children

 The first parent node is called the Root

 Use Add() method to add nodes

Visual Programming - Fall 2014

Instructor: Saima Jawad 14
 TreeView Properties and Events
29
TreeView properties Description / Delegate and Event Arguments
and events
Common
Properties
CheckBoxes Indicates whether checkboxes appear next to nodes. True displays
checkboxes. Default is False.
ImageList Indicates the ImageList used to display icons by the nodes. An
ImageList is a collection that contains a number of Image
objects.
Nodes Lists the collection of TreeNodes in the control. Contains
methods Add (adds a TreeNode object), Clear (deletes the
entire collection) and Remove (deletes a specific node). Removing
a parent node deletes all its children.
SelectedNode Currently selected node.

Common Event

AfterSelect Generated after selected node changes. Default when double-clicked

in designer.
TreeView properties and events.

TreeView Properties and Events

30
TreeNode properties Description / Delegate and Event Arguments
and methods
Common Properties
Checked Indicates whether the TreeNode is checked. (CheckBoxes property must be set to True in parent
TreeView.)
FirstNode Specifies the first node in the Nodes collection (i.e., first child in tree).

FullPath Indicates the path of the node, starting at the root of the tree.
ImageIndex Specifies the index of the image to be shown when the node is deselected.

LastNode Specifies the last node in the Nodes collection (i.e., last child in tree).

NextNode Next sibling node.

Nodes The collection of TreeNodes contained in the current node (i.e., all the children of the current node). Contains
methods Add (adds a TreeNode object), Clear (deletes the entire collection) and Remove (deletes a
specific node). Removing a parent node deletes all its children.

PrevNode Indicates the previous sibling node.

SelectedImageI Specifies the index of the image to use when the node is selected.
ndex
Text Specifies the text to display in the TreeView.
Common Methods
Collapse Collapses a node.
Expand Expands a node.
ExpandAll Expands all the children of a node.
GetNodeCount Returns the number of child nodes.
TreeNode properties and methods.

Visual Programming - Fall 2014

Instructor: Saima Jawad 15
 TreeView Node Editor
31

Treeview Example

Visual Programming - Fall 2014

Instructor: Saima Jawad 16
 Treeview Example

using System.IO;

// Using TreeView to display directory structure

public void PopulateTreeView(

string directoryValue, TreeNode parentNode )
{
// populate current node with subdirectories
string[] directoryArray =
Directory.GetDirectories( directoryValue );

// populate current node with subdirectories

try
{
if ( directoryArray.Length != 0 )
{
// for every subdirectory, create new TreeNode,
// add as child of current node and recursively
// populate child nodes with subdirectories
foreach ( string directory in directoryArray )
{
// create TreeNode for current directory
TreeNode myNode = new TreeNode( directory );

// add current directory node to parent node

parentNode.Nodes.Add( myNode );

// recursively populate every subdirectory

PopulateTreeView( directory, myNode );
}

} // end if
}

Visual Programming - Fall 2014

Instructor: Saima Jawad 17
 Treeview Example

// catch exception
catch ( UnauthorizedAccessException )
{
parentNode.Nodes.Add( "Access denied" );
}

} // end PopulateTreeView

Treeview Example

// called by system when form loads

private void TreeViewDirectoryStructureTest_Load
(object sender, EventArgs e)
{
// add c:\ drive to directoryTreeView and
// insert its subfolders
directoryTreeView.Nodes.Add( "C:\\" );
PopulateTreeView("C:\\", directoryTreeView.Nodes[ 0 ] );
}

Visual Programming - Fall 2014

Instructor: Saima Jawad 18
 The Split Container
37

The Split Container

38

 A split container is an object made of two panels

separated by a bar.
 A control added to one of the panels would become a
child of that panel.

Visual Programming - Fall 2014

Instructor: Saima Jawad 19
 Properties of a Split Container
39

 The Background of a Split Container

 Back Color
 Background Image

 The Size of the Splitter

The dividing bar appears with a 4 pixel width. It can be made it larger by
the SplitterWidth property.

 The Orientation of the Splitter

 Vertical (Default)
 Horizontal

Properties of a Split Container

40

 Moving the Splitter

Controlled by the IsSplitterFixed Boolean property whose
default value is False.

While the user is moving the splitter, the split container fires a
SplitterMoving event.

To prevent the user from dragging the bar,

set the SplitContainer.IsSplitterFixed
property to True.

Visual Programming - Fall 2014

Instructor: Saima Jawad 20
 Split Container Example
41

The Split Container

42

Visual Programming - Fall 2014

Instructor: Saima Jawad 21
 The Progress Bar
43

 A progress bar is a control that displays (small)

rectangles that are each filled with a color.

 A numeric value specifies how many of these

(small) rectangles can display at one time.

Progress Bar Examples

44

Visual Programming - Fall 2014

Instructor: Saima Jawad 22
 Creating a Progress Bar
45

 To support progress bar, the .NET Framework

provides the ProgressBar class, which is
derived from the Control class.

 In the Toolbox, the progress bar is

represented by the ProgressBar control.

Creating a Progress Bar

46

 To programmatically get a progress bar,

declare a variable of type ProgressBar, use
the new operator to allocate memory for it,
and add it to the Controls property of its
container.

Visual Programming - Fall 2014

Instructor: Saima Jawad 23
 Creating a Progress Bar
47

public class Exercise : Form {

ProgressBar progress;

public Exercise() { InitializeComponent(); }

private void InitializeComponent()

{
Text = "Progressive Studies";
Size = new Size(240, 80);
progress = new ProgressBar ();
Controls.Add(progress);
}
}

Properties of Progress Bar

48

 Location, Size and the BackColor

progress.Location = new Point(12, 12);

progress.Width = 200;

Visual Programming - Fall 2014

Instructor: Saima Jawad 24
 The Minimum and Maximum
49

 A progress bar uses a range of values.

 This range is controlled by the Minimum and the

Maximum properties whose default values are 0 and
100 respectively.

progress.Minimum = 0;
progress.Maximum = 255;

The Value of a Progress Bar

50

 At one particular time, the right most rectangle of a

progress bar is referred to as its position and it is
represented by the Value property.

 At run time, assign the desired value to the Value

property.

progress.Minimum = 0;
progress.Maximum = 200;
progress.Value = 88;

Visual Programming - Fall 2014

Instructor: Saima Jawad 25
 Progress Bar Example
51

Progress Bar Example

52

private void btnCompute_Click(object sender, EventArgs e)

{
int num1 = Int32.Parse(txtnum1.Text);
int num2 = Int32.Parse(txtnum2.Text);
int sum = num1 + num2;
if (sum % 2 == 0 )
progressBar.Value = progressBar.Maximum;
else
{ progressBar.Value = sum;
MessageBox.Show("The sum is odd"); }
txtnum2.Clear();
txtnum1.Clear();
}

Visual Programming - Fall 2014

Instructor: Saima Jawad 26
 The Step Value of a Progress Bar
53

 The number of units that the object must increase its

value to is controlled by the Step property. By default, it
is set to 10.
 When the control draws one of its rectangles based on
the Step value, it calls the PerformStep()
public void PerformStep();
 If you want to increase the value of the control to a value
other than that of the Step property, you can call the
Increment() method:
public void Increment(int value);

Progress Bar Example

54

Visual Programming - Fall 2014

Instructor: Saima Jawad 27
 Progress Bar Example
55

// Call the function of tick event of the timer

// Set the timer Interval at 60
// Set the timer enabled "True" by the timer properties:

private void myTimer_Tick (object sender, EventArgs e)

{
progBar();
}

Progress Bar Example

56

//Create the function for progress bar

public void progBar()
{
progressBar.Increment(1);
label.Text = "Connecting to server_ " +
progressBar.Value.ToString() + "%";

if (progressBar.Value == progressBar.Maximum)
{
myTimer.Stop();
MessageBox.Show("Server has been connected");
this.Close();
}
}

Visual Programming - Fall 2014

Instructor: Saima Jawad 28
 The Status Bar
57

 A horizontal bar that displays in the bottom

section of a form or application.

 The original purpose was to display messages

to the user.

 Modern status bars have their roles expanded.

The Status Bar

58

 A status bar is a control container that is

usually made of sections.

 The sections of status bar are called panels.

 The roles of the panels are left to the

programmer.

Visual Programming - Fall 2014

Instructor: Saima Jawad 29
 Creating a Status Bar
59

 To support status bars, the .NET Framework

provides a class named StatusStrip.

 To visually create a status bar, the Toolbox

provides a StatusStrip button in its
Container section.

Properties of a Status Bar

60

 A status bar is an intermediary container, it

must be positioned on another container, which is
usually a form.
 A status bar can be made to display sunken or
raised bars to the bottom of a form:
 The default Dock value of a status bar is Bottom.

Visual Programming - Fall 2014

Instructor: Saima Jawad 30
 The Items on a Status Bar
61

 A status bar is primarily used to

display text.

 A label on a status bar is an object of

type ToolStripStatusLabel.

 Click an empty area on the status bar

to create a new button.
Click the arrow of the new button
and click StatusLabel

Status Label Properties

62

 The label of a status bar can be made to display text, an

icon, or both. This is handled by the DisplayStyle
property.

 The label of a status bar is highly configurable. It has the

ability to sink or raise its borders. If you want to control
the borders of a label, first use its BorderSides
property:

Visual Programming - Fall 2014

Instructor: Saima Jawad 31
 Status Label Properties
63

 After setting the BorderSides property,

select the type of border you want in the
BorderStyle property:

Status Bar Example

64

Visual Programming - Fall 2014

Instructor: Saima Jawad 32
 Status Bar Example
65

Status Bar Example

66

// Create a StatusBar
StatusBar mainStatusBar = new StatusBar();

A StatusBar is a combination of StatusBar panels.

StatusBarPanel class represents a StatusBar panel.

//Create two panels and adds them to the StatusBar.

private void InitializeStatusBarPanels() {

StatusBarPanel statusPanel = new StatusBarPanel();

StatusBarPanel datetimePanel = new StatusBarPanel();

Visual Programming - Fall 2014

Instructor: Saima Jawad 33
 Status Bar Example
67

// Set first panel properties and add to StatusBar

statusPanel.BorderStyle = StatusBarPanelBorderStyle.Sunken;
statusPanel.Text = "Application started. No action yet.";
statusPanel.ToolTipText = "Last Activity";
statusPanel.AutoSize = StatusBarPanelAutoSize.Spring;
mainStatusBar.Panels.Add(statusPanel);

// Set second panel properties and add to StatusBar

datetimePanel.BorderStyle = StatusBarPanelBorderStyle.Raised;
datetimePanel.ToolTipText = "DateTime: " +
System.DateTime.Today.ToString();
datetimePanel.Text = System.DateTime.Today.ToLongDateString();
datetimePanel.AutoSize = StatusBarPanelAutoSize.Contents;
mainStatusBar.Panels.Add(datetimePanel);

Status Bar Example

68

//set ShowPanels property as true.

mainStatusBar.ShowPanels = true;

//add StatusBar to the Form.

Controls.Add(mainStatusBar);

Visual Programming - Fall 2014

Instructor: Saima Jawad 34
 Status Bar Example
69

private void button_Click (object sender, EventArgs e)

{
statusPanel.Text = "Button Clicked.......";
}

private void checkBox_CheckedChanged(object sender, EventArgs e)

{
if (checkBox.Checked)
statusPanel.Text = "Check Box checked.......";
else
statusPanel.Text = "Check Box Unchecked.......";
}

Visual Programming - Fall 2014

Instructor: Saima Jawad 35