Advance GUI Controls

Week 11

Instructor: Jawad Shaukat

 Outline
1. Tab Control
2. List View
3. Tree View
4. The Splitter
5. Progress Bar
 TAB Control – Property Pages

 As application becomes crowded with various controls, we may find

its form running out of space. To solve such a problem, we can
create many controls on a form or container and display some of
them only in response to some action from the user. The
alternative is to group controls in various containers and specify
when the controls hosted by a particular container must be
displayed. This is the idea behind the concept of Tab Control. A
Tab Control is a control container that appears as a form or a
frame. We can add TAB PAGES in tab Control.
 In most other cases, a tab page appears in a group with other pages
in TAB Control.
TAB Control – Property Pages

 It functions like a group of pieces of paper placed on top of each other. Each
piece is represented by a tab that allows the user to identify it
 Creates a Tabbed Window
 Contains TabPage objects
 TabPages can have controls
 Tabpages have Click event
TAB Control with TAB Pages

 To use a property page, the user clicks

the header, also called tab, of the
desired page. This brings that page up
and sends the other(s) in the
background.
 If the user needs access to another
page, he or she can click the desired
tab, which would bring that page in
front and send the previously selected
page to the back.
 The major idea of using a Tab Pages is
its ability to have many controls
available in a relatively smaller area.
Tab Control Properties and Events
Add TAB Control and TAB Pages.

1. Add Tab Control from Tool Box.

2. Add tab pages by two ways:
1. Right Click on tab control and add click on tab page option.
2. In properties of tab control -> Tap Page Collection -> Add/Remove Tab Pages.
3. Add Controls to each tab.
Example.

 Add 3 Tabs.
 In first Tab give options for Colors..
 In Second Tab give options for font size.
 In third tab different messages selection.
 Add label for message and editing above properties.
ListView

 A list of items with multiple options.

 The items appear as a large icon and a label

 The items can appear as a small icon and a label

List View

 The items can be made to show some

details (related-information) each.

 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.
 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.
ListView

 To visually add list view columns, ColumnHeader

Collection

 To visually create the items of a list view, we can

use the ListViewItem Collection Editor.
Using List View

 Add List View from Tool Box.

 Add Columns in LIST View and change its property View = Details.
 Add list items in the List view -> List Items Collections.
 Add Subitems in each list for one row and its columns data.
Example

 Set Properties of List View.

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

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 = "";}
Example (Cont..)
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();
}

private void search_Click(object sender, EventArgs e)

{
foreach(ListViewItem item in listView1.Items)
if(item.SubItems[0].Text==textBox1.Text)
{
MessageBox.Show("Item Found:" + textBox1.Text, "Result"); } }
Tree View

 A tree view is a control that resembles an upside down tree and displays a
hierarchical list of items.
 a tree view is only made of branches and each branch is called a node.
 Displays nodes hierarchically
 Parent nodes have children
 The first parent node is called the Root
 Use Add() method to add nodes
TreeView
TreeView
TreeView – Using GUI
 Add TreeView Control from toolbox.
 Right Click on TreeView to open properties -> Nodes
-> Collection -> Add Root or Child.
 Populating Listview Programmatically.

TreeNode nodRoot = new TreeNode();

private void button1_Click(object sender, EventArgs e)
{
nodRoot = treeView1.Nodes.Add(textBox1.Text);
}
private void button2_Click(object sender, EventArgs e)
{
nodRoot.Nodes.Add(textBox1.Text);
}
private void button3_Click(object sender, EventArgs e)
{
nodRoot.Nodes.Remove(treeView1.SelectedNode);
}
TreeView Populating using Listview

 for(int i=0;i<listView1.Items.Count;i++)
 treeView1.Nodes.Add(listView1.Items[i].ToString());
Split Container

 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.
Properties of Split Container
 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
 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.
Progress Bar

 A progress bar is used to visualize the progression of an extended computer

operation, such as a download, file transfer, or installation.
 A numeric value specifies how many of these (small) rectangles can display
at one time.
Creating a Progress Bar

 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.
 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.
Properties of Progress Bar

 Location, Size and the BackColor

 progress.Location = new Point(12, 12);
 progress.Width = 200;

 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;
Progress Bar
Value of Progress Bar
 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
Step Value
 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

 Add timer in Form.

 Set Interval=60, Enabled=false;
 Write Tick event.
 Add progress Bar in Form.
 Call progress bar.increment(1) method.
 Add label in Form.
 Progress Bar Example
// 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();
}

//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();}}