Question

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.

Figure: ListBox

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

A 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 ColumnHeader s 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.

Figure: ListView

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.

Figure: TreeView

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