Home  Contents

Advanced controls

In this part of the Visual Basic Winforms tutorial, we introduce some more advanced controls. Namely the ListBox, the ListView and the TreeView control.

ListBox Control

The ListBox control is used to display a list of items. Users can select one or more items by clicking on them.

' ZetCode Mono Visual Basic Winforms tutorial
'
' This program shows how to use
' the ListBox control. Item selected from 
' the ListBox is shown in the statusbar.
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
    Inherits Form

    Private sb As StatusBar 

    Public Sub New

       Me.Text = "ListBox"
       Me.Size = New Size(210, 210)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
    
        Dim lb As New ListBox
        lb.Parent = Me
        lb.Items.Add("Jessica")
        lb.Items.Add("Rachel")
        lb.Items.Add("Angelina")
        lb.Items.Add("Amy")
        lb.Items.Add("Jennifer")
        lb.Items.Add("Scarlett")

        lb.Dock = DockStyle.Fill
        
        sb = New StatusBar
        sb.Parent = Me

        AddHandler lb.SelectedIndexChanged, AddressOf Me.OnChanged
        
    End Sub

    Private Sub OnChanged(ByVal sender As Object, ByVal e As EventArgs)
        sb.Text = sender.SelectedItem
    End Sub


    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class

Our example shows a listbox with six names. The selected item is shown in the statusbar.

 Dim lb As New ListBox
 lb.Parent = Me

ListBox control is created.

 lb.Items.Add("Jessica")

This is how we add a new item to the ListBox control. The control has the Items property. The property is a reference to the list of items in a listbox. Using this reference, we can add, remove or get count of items of the listbox.

 AddHandler lb.SelectedIndexChanged, AddressOf Me.OnChanged

SelectedIndexChanged event is triggered, when we select an item.

 sb.Text = sender.SelectedItem

Inside the OnChanged method, we set the selected text to the statusbar.

ListView

ListView control is used to display collections of items. It is a more sophisticated control than the ListBox control. It can display data in various views is mostly used to display data in multicolumn views.

' ZetCode Mono Visual Basic Winforms tutorial
'
' This program shows how to use
' the ListView control. Item selected from 
' the ListView is shown in the statusbar.
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing
Imports System.Collections.Generic


Public Class Actress

    Public Dim m_name As String
    Public Dim m_year As Integer
 
    Public Sub New(ByVal name As String, ByVal year As Integer)
        Me.m_name = name
        Me.m_year = year
    End Sub
 
End Class



Public Class WinVBApp
    Inherits Form

    Private Dim sb As StatusBar 
    Private Dim lv As ListView

    Public Sub New

       Me.Text = "ListView"
       Me.Size = New Size(350, 300)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
    
        Dim actresses As New List(Of Actress)

        actresses.Add(New Actress("Jessica Alba", 1981))
        actresses.Add(New Actress("Angelina Jolie", 1975))
        actresses.Add(New Actress("Natalie Portman", 1981))
        actresses.Add(New Actress("Rachel Weiss", 1971))
        actresses.Add(New Actress("Scarlett Johansson", 1984))


        Dim name As New ColumnHeader
        name.Text = "Name"
        name.Width = -1
        Dim year As New ColumnHeader
        year.Text = "Year"

        Me.SuspendLayout

        lv = New ListView
        lv.Parent = Me
        lv.FullRowSelect = True
        lv.GridLines = True
        lv.AllowColumnReorder = True
        lv.Sorting = SortOrder.Ascending
        lv.Columns.AddRange(New ColumnHeader() {name, year})
        
        For Each act As Actress In actresses
            Dim item As New ListViewItem
            item.Text = act.m_name
            item.SubItems.Add(act.m_year.ToString())
            lv.Items.Add(item)
        Next

        lv.Dock = DockStyle.Fill

        sb = New StatusBar
        sb.Parent = Me
        lv.View = View.Details

        Me.ResumeLayout

        AddHandler lv.Click, AddressOf Me.OnChanged
        AddHandler lv.ColumnClick, AddressOf Me.OnColumnClick
        
    End Sub

    Private Sub OnChanged(ByVal sender As Object, ByVal e As EventArgs)

        Dim name As String = lv.SelectedItems(0).SubItems(0).Text
        Dim born As String = lv.SelectedItems(0).SubItems(1).Text
        sb.Text = name & ", " & born

    End Sub
    
    Private Sub OnColumnClick(ByVal sender As Object, _
                    ByVal e As ColumnClickEventArgs)
    
        If sender.Sorting = SortOrder.Ascending
            sender.Sorting = SortOrder.Descending
        Else 
            sender.Sorting = SortOrder.Ascending
        End If
        
    End Sub

    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class

In our example, we have a listview with two columns. In the first column, we display the name of the actress. In the second one their date of birth. The data is store in a List collection. By selecting a row, the data in a row is displayed in the statusbar. Also, by clicking on the column header, the data is sorted.

 Public Class Actress
     ...
 End Class

We use the Actress class to store our data.

 Dim actresses As New List(Of Actress)

 actresses.Add(New Actress("Jessica Alba", 1981))
 actresses.Add(New Actress("Angelina Jolie", 1975))
 ...

We create and fill our collection with items.

 Dim name As New ColumnHeader
 name.Text = "Name"
 name.Width = -1

For each column in a listview, we create a ColumnHeader. By setting the Width to -1, the width of the column is equal to the longest item in the column.

 lv = New ListView
 lv.Parent = Me

ListView control is created.

 lv.FullRowSelect = True
 lv.GridLines = True
 lv.AllowColumnReorder = True
 lv.Sorting = SortOrder.Ascending

Here we set four properties of the control. This code lines enable full row selection, show grid lines, allow column reordering by dragging the columns and sort the data in ascending order.

 lv.Columns.AddRange(New ColumnHeader() {name, year})

Here we add two ColumnHeaders to the ListView control.

 For Each act As Actress In actresses
     Dim item As New ListViewItem
     item.Text = act.m_name
     item.SubItems.Add(act.m_year.ToString())
     lv.Items.Add(item)
 Next

This cycle populates the listview control. Each row is added to the listview as a ListViewItem class.

 lv.View = View.Details

The ListView control can have different views. Different views display data differently.

 Dim name As String = lv.SelectedItems(0).SubItems(0).Text
 Dim born As String = lv.SelectedItems(0).SubItems(1).Text 
 sb.Text = name & ", " & born

Inside the OnChanged method, we get the data from the selected row and show it on the statusbar.

 If sender.Sorting = SortOrder.Ascending
     sender.Sorting = SortOrder.Descending
 Else 
     sender.Sorting = SortOrder.Ascending
 End If

Here we toggle the sorting order of the column.

TreeView

TreeView control displays hierarchical collection of items. Each item in this control is represented by a TreeNode object.

' ZetCode Mono Visual Basic Winforms tutorial
'
' This program shows how to use
' the ListBox control. Item selected from 
' the ListBox is shown in the statusbar.
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
    Inherits Form

    Private Dim sb As StatusBar 
    Private Dim WithEvents tv As TreeView

    Public Sub New

       Me.Text = "TreeView"
       Me.Size = New Size(250, 250)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
    
        tv = New TreeView

        Dim root As New TreeNode
        root.Text = "Languages"

        Dim child1 As New TreeNode
        child1.Text = "Python"

        Dim child2 As New TreeNode
        child2.Text = "Ruby"

        Dim child3 As New TreeNode
        child3.Text = "Java"

        root.Nodes.AddRange(New TreeNode() {child1, child2, child3})

        tv.Parent = Me
        tv.Nodes.Add(root)
        tv.Dock = DockStyle.Fill

        sb = New StatusBar
        sb.Parent = Me

        
    End Sub

    Private Sub OnSelected(ByVal sender As Object, _
            ByVal e As TreeViewEventArgs) Handles tv.AfterSelect
        sb.Text = e.Node.Text
    End Sub


    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class

This is a very simple demonstration of the TreeView control. We have one root item and three children.

 tv = New TreeView

We create the TreeView control.

 Dim root As New TreeNode
 root.Text = "Languages"
 ...
 tv.Nodes.Add(root)

Here we create a root node.

 Dim child1 As New TreeNode
 child1.Text = "Python"

Child node is created in a similar way.

 root.Nodes.AddRange(New TreeNode() {child1, child2, child3})

Child nodes are plugged into the Nodes property of the root node.

 Private Sub OnSelected(ByVal sender As Object, _
         ByVal e As TreeViewEventArgs) Handles tv.AfterSelect
     sb.Text = e.Node.Text
 End Sub

Another way to work with the events is to use the Handles keyword.

---

In this part of the Visual Basic Winforms tutorial, we covered three advanced controls available in Winforms library.