Introduction to Visual Basic List Controls

WEBINAR: On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >

There are numerous List controls in the .NET Framework, each with their own uniqueness and purpose. In this article, you will learn how to insert, add, and remove items from Listboxes, ComboBoxes, CheckedListBoxes, ListViews, and TreeViews.

This article will be mostly practical.

Create a new Visual Basic Windows Forms application. Once the project has finished loading, design your form to resemble Figure 1.

Finished design
Figure 1: Finished Design

ListBox

A list box is a control which enables the user to select one or more items from a list contained within a static, multiple-line text box. The user can click inside the box on an item to select it, or click in combination with the Shift or Ctrl keys to make multiple selections.

Designing a ListBox

To get items displayed inside the ListBox, you need to make use of the Items Property in the Properties Window, as shown next:

Items property
Figure 2: Items property

You will notice a tiny button with three dots. You need to click this button to add the items. Once clicked, a screen similar to the following will be displayed:

Add Items
Figure 3: Add Items

Coding a ListBox

Manipulating items inside a ListBox through code is very easy, as you will see! To Add Items to the ListBox, add the following code:

   Private Sub Button1_Click(sender As Object, e As EventArgs) _
         Handles Button1.Click

      'Add List'
      ListBox1.Items.Add("Item 6")

   End Sub

To insert items at a specific index, use the following code:

   Private Sub Button6_Click(sender As Object, e As EventArgs) _
         Handles Button6.Click

      'Insert List'
      ListBox1.Items.Insert(0, "Item 7")

   End Sub

To remove an item at a specific Index, and to Clear all the items from the ListBox, please add the following code:

   Private Sub Button11_Click(sender As Object, e As EventArgs) _
         Handles Button11.Click

      'Remove List'
      ListBox1.Items.RemoveAt(4)

   End Sub

   Private Sub Button16_Click(sender As Object, e As EventArgs) _
         Handles Button16.Click

      'Clear List'
      ListBox1.Items.Clear()

   End Sub

ComboBox

A combo box is a combination of a drop-down list or list box and a single-line textbox. This will allow the user to either type a value or select a value from the list.

Designing a ComboBox

To get items displayed inside the ListBox, you need to make use of the Items Property in the Properties Window, as shown in Figures 2 and 3. Once items have been added to a ComboBox, it will look similar to Figure 4.

ComboBox Items
Figure 4: ComboBox Items

Coding a ComboBox

Add the following code to add, insert, and remove items from a ComboBox:

   Private Sub Button2_Click(sender As Object, e As EventArgs) _
         Handles Button2.Click

      'Add Combo'
      ComboBox1.Items.Add("Item 6")

   End Sub

   Private Sub Button7_Click(sender As Object, e As EventArgs) _
         Handles Button7.Click

      'Insert Combo'
      ComboBox1.Items.Insert(0, "Item 7")

   End Sub

   Private Sub Button12_Click(sender As Object, e As EventArgs) _
         Handles Button12.Click

      'Remove Combo'
      ComboBox1.Items.RemoveAt(4)'

   End Sub

   Private Sub Button17_Click(sender As Object, e As EventArgs) _
         Handles Button17.Click

      'Clear Combo'
      ComboBox1.Items.Clear()

   End Sub

CheckedListBox

A CheckedListBox is a ListBox with a check box which is displayed to the left of each item.

Designing a CheckedListBox

To get items displayed inside the ListBox, you need to make use of the Items Property in the Properties Window, as shown in Figures 2 and 3. Once items have been added to a ComboBox, it will look similar to Figure 5.

CheckedListBox Items
Figure 5: CheckedListBox Items

Coding a CheckedListBox

Add the following code to add, insert, and remove items from a CheckedListBox:

   Private Sub Button3_Click(sender As Object, e As EventArgs) _
         Handles Button3.Click

      'Add Check'
      CheckedListBox1.Items.Add("Item 6")

   End Sub

   Private Sub Button8_Click(sender As Object, e As EventArgs) _
         Handles Button8.Click

      'Insert Check'
      CheckedListBox1.Items.Insert(4, "Item 7")

   End Sub

   Private Sub Button13_Click(sender As Object, e As EventArgs) _
         Handles Button13.Click

      'Remove Check'
      CheckedListBox1.Items.RemoveAt(4)

   End Sub

   Private Sub Button18_Click(sender As Object, e As EventArgs) _
         Handles Button18.Click

      'Clear Check'
      CheckedListBox1.Items.Clear()

   End Sub

Now it gets trickier.

ListView

A ListView displays a collection of items that can be displayed using one of four different views.

Designing a ListView

When you click the ellipses button on the Items Property of the ListView, you will be greeted with a totally different screen than the previous list controls you worked with earlier (see Figure 6).

ListView Items
Figure 6: ListView Items

Each item represents a separate column, depending on the ListView's View Property. To add items, click Add. To remove items, click Remove. You can manipulate and format each column individually. Once you have set up your item(s) to your specifications, click OK.

ListView Views

The View property allows you to specify the type of display the ListView control should use to display its items. You can set the View property to display each item with large or small icons or display items in a vertical list.

  • LargeIcon: The ListView will display a list of items (32x32 pixels) in the order in which they were added from top to bottom and from left to right.
  • SmallIcon: Same as the LargeIcon style, but the size for each item is 16x16 pixels.
  • List: A normal list.
  • Details: In Details view, each item can provide more detailed information in a column. Set your ListView's view property to Details.

ListView Views
Figure 7: ListView Views

Coding a ListView

Add the following code to add Items and Sub items to your Listview:

   Private Sub Button4_Click(sender As Object, e As EventArgs) _
         Handles Button4.Click

      'Add ListView'
      ListView1.View = View.Details
      ListView1.Columns.Add("Column 1")
      ListView1.Columns.Add("Column 2")

      Dim Item1 As ListViewItem = ListView1.Items(0)
      Dim Item2 As ListViewItem = ListView1.Items(1)

      Item1.SubItems.Add("List Item ")
      Item2.SubItems.Add("List Item ")

   End Sub

In the preceding code, I added two columns (Items) and gave each a Sub Item. Add the following code to insert an item / sub item at a specific index:

   Private Sub Button9_Click(sender As Object, e As EventArgs) _
         Handles Button9.Click

      'Insert ListView'
      With ListView1.Items.Insert(0, "Item 1", 0)
         .SubItems.Add(2)
         .SubItems.Add(3)

      End With

   End Sub

This inserts Item 1 at the beginning of the list.

Add the following code to remove all selected Listview items, and to clear the ListView completely:

   Private Sub Button14_Click(sender As Object, e As EventArgs) _
         Handles Button14.Click

      'Remove ListView'
      Dim objListItem As ListViewItem

      For Each objListItem In ListView1.SelectedItems
         objListItem.Remove()
      Next objListItem

   End Sub

   Private Sub Button19_Click(sender As Object, e As EventArgs) _
         Handles Button19.Click

      'Clear ListView'
      ListView1.Items.Clear()

   End Sub

TreeView

A TreeView or outline view is a control that presents a hierarchical view of information. Each item (called a node or a branch) can have a number of subitems.

Designing a TreeView

To add Nodes to your TreeView, you need to make use of the Nodes Property, as shown in Figure 8:

TreeView Nodes
Figure 8: TreeView Nodes

You start by adding a Root. After adding a Root, you add the Root's Children, as shown above.

Coding a Treeview

Add the following code to add and insert items into your TreeView:

   Private Sub AddNode(tnRoot As TreeNode, tnNew As TreeNode)

      Dim tnCurrent As TreeNode = Nothing

      Dim tnPrev As TreeNode = tnRoot

      Dim i As Integer

      For i = 0 To tnRoot.Nodes.Count - 1

         tnCurrent = tnRoot.Nodes(i)

         If tnCurrent.Text > tnNew.Text Then Exit For

         tnPrev = tnCurrent

      Next

      tnRoot.Nodes.Insert(i, tnNew)

   End Sub

   Private Sub Button5_Click(sender As Object, e As EventArgs) _
         Handles Button5.Click

      'Add TreeView'
      Dim ListItem As New TreeNode
      ListItem.Text = "List Item"
      AddNode(TreeView1.Nodes(0), ListItem)


      ListItem.Nodes.Add("child")
   End Sub

   Private Sub Button10_Click(sender As Object, e As EventArgs) _
         Handles Button10.Click

      'Insert TreeView'
      TreeView1.Nodes.Insert(0, "Inserted Item")

   End Sub

In the AddNode sub, I determined whether there are current nodes and child nodes. Then, I appended the node I need at the back. The next event simply inserts a node at the beginning of the list.

Add the next code to remove selected nodes with the use of the mouse and to clear the TreeView:

   Private Sub Button20_Click(sender As Object, e As EventArgs) _
         Handles Button20.Click

      'Clear TreeView'
      For Each t As TreeNode In TreeView1.Nodes

         t.Nodes.Clear()

      Next

   End Sub

   Private Sub TreeView1_MouseDown(sender As Object, _
         e As MouseEventArgs) Handles TreeView1.MouseDown
      Select Case e.Button
         Case MouseButtons.Right
            TreeView1.GetNodeAt(e.X, e.Y).Remove()

      End Select
   End Sub

Please feel free to download and use the code you'll find at the bottom of this article. It will help you get started.

Conclusion

List Controls are very easy to use and manage. Good luck in all your endeavors with them.



About the Author

Hannes DuPreez

Hannes du Preez is an ex MVP for Visual Basic from 2008 to 2017. He loves technology and loves Visual Basic and C#. He loves writing articles and proving that Visual Basic is more powerful than what most believe. You are most welcome to reach him at: ojdupreez1978[at]gmail[dot]com

Related Articles

Downloads

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • As all sorts of data becomes available for storage, analysis and retrieval - so called 'Big Data' - there are potentially huge benefits, but equally huge challenges...
  • The agile organization needs knowledge to act on, quickly and effectively. Though many organizations are clamouring for "Big Data", not nearly as many know what to do with it...
  • Cloud-based integration solutions can be confusing. Adding to the confusion are the multiple ways IT departments can deliver such integration...

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date