Virtual Developer Workshop: Containerized Development with Docker
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.
Figure 1: Finished Design
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:
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:
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
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.
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
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.
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.
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).
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.
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.
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
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:
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.
List Controls are very easy to use and manage. Good luck in all your endeavors with them.