UI Controls

Overview

Image Resources The ToolStrip control The StatusStrip control The TreeView control The ListView control

Image Resources (Introduction)

Note that the ImageList control is used for some controls

Others are obtained from resource files This implementation is new to Visual

Studio 2005 Images are typically bitmaps or icon

files

Image Resources (Implementation)

Use the Select Resource dialog box to select an image

Images can be used by The form The entire project

Images are stored in a resource file having a suffix of .resx

Note that resources have many other purposes too They can store just about anything

The ImageList Control (Introduction)

Like resource files, it stores images It’s used with the TreeView and ListView

control Use the Image Collection Editor to assign

images to the control All images in a control instance must have

the same size If images of multiple sizes are necessary,

create multiple control instances

The Image Collection Editor (Illustration)

The ImageList Control (Properties)

The Images collection store a reference to the images

Use the Add method to add new images programmatically Optional argument contains a string key used

to reference the image Reference in image

By index By string key Calling the IndexOfKey method

The ToolStrip Control (Introduction)

It replaces the ToolBar control found in previous versions

It is considered a container control meaning that it sites other controls Clickable buttons on the toolbar, for

example Events fire as the user interacts with

these buttons The implementation is similar to a menu

The ToolStrip Control (Properties)

The Dock property is typically set to Top to tock the toolbar across the top of the form

The Items property is a collection It contains the items that will appear on

the toolbar It works like any other collection

The Items Collection (Introduction)

The Items collection is the container for the control instances appearing on the toolbar

Use the Items Collection Editor to create these control instances ToolStripButton, Label, DropDownButton, ComboBox, TextBox, ProgressBar

The Items Collection Editor (Illustration)

The ToolStripButton Class

It’s a button appearing on the ToolStrip

Many properties are the same as those used by the Button class

Handle the Click event for the ToolStripButton as you would an ordinary button

The ToolStripButton Class (Members)

Set the Image property to the image that will appear on the button Images appear in the folder

Use Checked and CheckOnClick to create a checked button

Use DisplayStyle to display text, images, or both

The ToolStripDropDownButton Class

Use this to create a drop-down button that works similar to a combo box

The DropDownItems collection contains the items that will drop down Each item has a data type of ToolStripMenuItem

Handle the Click event just like any other menu item

Introduction toDrill-Down Interfaces

A drill-down interface is one in which the user navigates through hierarchical data from the most general data to the most specific data

VB .NET uses two different controls to create the two parts of a drill-down interface TreeView control creates the hierarchical part of

the user interface, which appears in the left pane of Windows Explorer

ListView control appears in the right pane of Windows Explorer and displays detailed information about the selected item(s) appearing in the TreeView

Drill-Down Interface

TreeView utilizes a drill down interface to

display file hierarchy

ListView displays files and

associated icons

TreeView Control Relationships

Top-level node is a root node Root node has no parent node

Nodes have one or more children Children having the same parent are

siblings One sibling is designated as the first

sibling and another as the last sibling The terms grandchildren and great

grandchildren further describe relationships

Hierarchical Relationships Between TreeNodes

The TreeView Control (Properties 1)

The CheckBoxes property can be set to True or False If set to True, check boxes appear to the left of

each TreeNode If set to False, they do not

ImageIndex property contains the numeric index of the image from an associated ImageList control instance

ImageList property contains a reference to an instance of the ImageList control

TreeView Control(Properties 2)

LabelEdit property (Boolean) defines whether or not the user can edit the textual contents of each TreeNodeNodes property references a collection of TreeNode objects Note that this collection is hierarchical

Scrollable property (Boolean) defines whether or not scroll bars will appear when the TreeNodes will not fit within the visible region of the control instance

TreeView Control (Properties 3)

PathSeparator property defines the character that separates the TreeNodes appearing in the hierarchy of a TreeView control instance

The SelectedImageIndex property contains the numeric index of an image appearing in the associated ImageList control instance

The SelectedNode property gets the selected TreeNode or selects a TreeNode

The ShowLines property (Boolean) defines whether or not lines connect the visible TreeNodes

TreeView Control (Properties 4)

If the ShowRootLines property is True, then child TreeNodes appear connected to the root TreeNode

If the ShowPlusMinus property is True, then a plus sign appears to the left of TreeNode’s text if the TreeNode is collapsed, and a minus sign appears if the TreeNode is expanded

The Sorted property, if True, causes the TreeNode objects to be sorted in alphabetical order

TreeView Control (Methods 1)

The BeginUpdate and EndUpdate methods suppress painting of the TreeView control instance while TreeNodes are being added or removed Use to reduce display flicker and improve

efficiency The CollapseAll method collapses all TreeNode objects in the hierarchy, such that only the root-level node(s) are visible

The ExpandAll method expands all of the TreeNode objects in the hierarchy

The GetNodeAt method is typically used with a mouse event to get a TreeNode at a particular point or x,y coordinate pair

TreeView Control (Methods 2)

GetNodeCount method accepts one Boolean argument If the argument is False, then GetNodeCount returns the number of immediate children of the specified TreeNode

If the argument’s value is True, then the method returns the count of all of the child TreeNodes in the TreeView control instance

TreeView Control (Events 1)

AfterCheck event only fires when the CheckBoxes property is set to True The event fires just after a TreeNode is

checked or unchecked BeforeExpand and AfterExpand events fire

just before and just after a TreeNode is being expanded, respectively

BeforeCollapse and AfterCollapse events fire just before and just after a TreeNode is collapsed, respectively

TreeView Control (Events 2)

AfterSelect event fires after a TreeNode is selected in the control instance Data type of the second argument is TreeViewEventArgs

BeforeSelect event fires just before a TreeNode is selected Data type of the second argument is TreeViewCancelEventArgs

The TreeNode Object (Properties 1)

Checked property, if True, indicates that the TreeNode is checked If the TreeNode is not checked, then the Checked

property has a value of False ImageIndex property contains the numeric index of

the image appearing in the corresponding ImageList control instance

SelectedImageIndex property contains the numeric index of an image appearing in the corresponding ImageList control instance

Tag property has the same meaning as the Tag property of other control instances

Text property stores the text appearing in the TreeNode

TreeNode Object (Properties 2)

Boolean properties IsVisible property returns True if the TreeNode is visible

IsSelected property returns True if the TreeNode is selected

IsExpanded property returns True if the TreeNode is expanded

The TreeNode Object (Properties 3)

Properties used to locate sibling TreeNodes FirstNode property gets the first sibling

TreeNode of the current TreeNode PreviousNode and NextNode properties

get the previous and next sibling, respectively

LastNode property gets the last sibling

TreeNode Object (Methods 1)

Collapse method collapses the child TreeNodes of the current TreeNode

Expand method expands the child TreeNodes of the current TreeNode

Toggle property collapses expanded nodes or expands collapsed nodes depending on the current state of the TreeNode

BeginEdit and EndEdit methods enable and disable editing of the current TreeNode, respectively

TreeNode Object (Methods 2)

Remove method removes the current TreeNode

EnsureVisible method makes the TreeNode visible, expanding or collapsing other TreeNodes as necessary

GetNodeCount method returns the number of child TreeNodes of the current TreeNode

The TreeNode Editor

TreeNode Editor allows you to create the root TreeNode, child TreeNodes, and sibling TreeNodes using the following buttons The Add Root button is the only enabled button

when the TreeView control instance contains no TreeNodes

To add a child TreeNode, select an existing TreeNode, and then click the Add Child button

The new TreeNode will be created as a child of the selected TreeNode

To delete a TreeNode, select the TreeNode to be deleted, and then click the Delete button

TreeNode Editor (Illustration)

Adding a TreeNode Programmatically (1)

The overloaded Add method adds a new TreeNode object to the Nodes collection

SyntaxOverridable Overloads Public Function Add

(ByVal text As String) As TreeNode

Overridable Overloads Public Function Add(ByVal node As TreeNode) As TreeNode

Adding a TreeNode Programmatically (2)

In the first overloaded method, the Add method creates a new instance of the TreeNode class Method accepts one argument, the text string

stored in the TreeNode Method returns the instance of the TreeNode that

was added In the second overloaded method, the Add

method accepts one argument An existing TreeNode object Method returns the index of the node in the Nodes

collection

Adding a TreeNode Programmatically (3)

Add a root-level node to the TreeView control instance named tvwMain

tvwMain.Nodes.Add("First Node")

Dim CurrentNode As New TreeNode()

CurrentNode.Text = "Second Node"

tvwMain.Nodes.Add(CurrentNode)

Creating Child Nodes

Node collections are hierarchical Each TreeNode object contains

its own Nodes collectionNote the TreeView control contains

a Nodes collection too This Nodes collection stores the

immediate children of the current TreeNode

Creating Child Nodes (Example)

Create a root-level nodeDim RootNode As TreeNode

Dim ChildNode As TreeNode

RootNode = tvwMain.Nodes.Add("Root Node")

Create child nodes of the root-level nodeChildNode = tvwMain.Nodes(0).Nodes.Add( _

"First Child")

ChildNode = tvwMain.Nodes(0).Nodes.Add( _

"Second Child")

Iterating Through TreeNodes

A recursive procedure is a procedure that calls itself

They are typically used with hierarchical data structures such as a TreeView

A condition must occur causing the procedure to stop calling itself The result is infinite recursive descent

Calling a Recursive Procedure

Calling a Recursive Procedure (Example)

Call CheckChildren(e.Node, True)

Private Sub CheckChildren( _ ByVal tnCurrent As _

TreeNode, ByVal pblnChecked As Boolean)Dim tnLocal As TreeNodeFor Each tnLocal In tnCurrent.Nodes

' StatementsCall CheckChildren(tnLocal, pblnChecked)Next

End Sub

The ListView Control

The ListView control displays data in the form of lists or organized into columns

The View defines how the data are displayed within the control instance 4 views are supported

ListView control is typically used with the TreeView control

ListView Control (Properties 1)

Alignment property defines the alignment of the icons within the visible region of the control instance

Boolean AllowColumnReorder property defines whether or not the user can reorder the columns using drag-and-drop

Boolean CheckBoxes property defines whether check boxes appear along with the list items

Columns property references a collection of type ColumnHeaderCollection

FullRowSelect property is only relevant while the ListView is in Details view

Boolean LabelEdit property defines whether or not the user can edit the text of an item

ListView Control (Properties 2)

Boolean MultiSelect property, if set to True, allows the user to select multiple items in the control instance

Boolean Scrollable property defines whether or not scroll bars appear in the control instance when the items will not fit within the visible region

Sorting property allows you to specify whether and how the items in the ListView will be sorted

View property defines which of the four supported views is the current view

ListView Control (Methods)

When adding or removing several items from the list, suspend repainting the control instance by calling the BeginUpdate method, performing the updates, and then calling the EndUpdate method

Clear method removes all of the items from the control instance

Sort method sorts the items in the control instance

ListView Control (Events)

The BeforeLabelEdit event fires just before the user begins editing the text in a label

AfterLabelEdit event fires just after the user finishes editing the text in a label

ItemCheck event fires when the user checks or unchecks an item

The View Property

The value of the View property can be changed at runtime or at design time

Four different views In LargeIcon view (default), items are

displayed with large (32 by 32) pixel icons In SmallIcon view, items are displayed with

small (16 by 16) pixel icons In List view, items are displayed in a list. Data

can be aligned in rows or columns In Detail view, items are displayed in multiple

columns having column headers

The ListViewItem Class

Each item appearing in a ListView control instance is a ListViewItem

ListViewItem contains aTextual descriptionOptional image

The ListViewItem Class (Properties)

ImageIndex property contains the index of the image associated with the ListViewItem

ImageList property returns the ImageList control instance associated with the ListViewItem

SubItems property references a collection of type ListViewSubItemCollection

Text property stores the text appearing in the visible region of the ListViewItem

ListViewItem Class (Methods)

BeginEdit method enables editing of the ListViewItem

EndEdit method disables editing

Adding a ListView Item

Call the Add method having the following syntaxOverridable Overloads Public Function Add(ByVal value As ListViewItem) As ListViewItem

Overridable Overloads Public Function Add(ByVal text As String) As ListViewItem

Overridable Overloads Public Function Add(ByVal text As String, ByVal imageIndex As Integer) As ListViewItem

Adding a ListView Item (cont.)

First overloaded method accepts one argument, an existing instance of the ListViewItem class The ListViewItem is added to the end of the list

The second overloaded method accepts one argument, a string The string appears in the visible region of the

control instance The third overloaded method accepts two

arguments The first contains the string appearing in the

visible region of the control instance The second contains the index of an image from

an instance of the ImageList control

ListViewItem Class (Example)

Add a ListViewItemlvwDemo.Items.Add("Item 1")

Dim lviDemo As New ListViewItem()

lviDemo.Text = "Item 2"

lvwDemo.ImageIndex = 1

lvwDemo.Items.Add(lviDemo)

lvwDemo.Items.Add("Item 3", 1)

The ListView Control (Details View)

Displays data in multiple columns ColumnHeaderCollection applies to

the ListView control itself and contains column headers

ListViewSubItemCollection applies to each ListItem

Using Details View (Illustration)

The ColumnHeaderCollection

The ColumnHeaderCollection contains one or more ColumnHeader objects representing each column

Properties Text property contains the text that

appears in the column header TextAlign property defines horizontal

alignment of the text within the column Width property defines the width of the

column This column width is measured in pixels

ColumnHeaderCollectionExample

Example Dim lvwchCurrent As New ColumnHeader()

lvwchCurrent.Text = "Column 1"

lvwchCurrent.Width = 72

lvwchCurrent.TextAlign = HorizontalAlignment.Center

lvwDemo.Columns.Add lvwchCurrent

lvwDemo.Columns.Add("Column 2", 72, _

HorizontalAlignment.Center)

ColumnHeaderCollectionExample (cont,)

Dissection The first block of statements

Creates a new instance of the ColumnHeader class

Then it configures the class instance by individually setting each property

Finally, it adds the ColumnHeader to the Columns collection

The final statement adds a new ColumnHeader

ListViewSubItems

ListViewSubItems do not respond to events

ListViewSubItems support only the BackColor and ForeColor properties that define the text color, and the Text property to define the text itself that appears in the sub item

ListViewSubItems (Illustration)