Home

Windows Control: The List View

 

List View Fundamentals

 

Introduction

A list box is used to display a list of strings and all items of that control are primarily strings. To go a little further than a simple list of strings, the Microsoft Windows operating system provides the list view control. A list view is used to display a list of items to the user but it can be configured to change the type of display.

   

List View Creation

The list view control is made available in the .NET Framework through the ListView class that is represented in the Windows Forms section of the Toolbox by the list view button. To add a list view to your application, you can click list view in the Toolbox and click the form or another container.

To programmatically create a list view, you can declare a variable of type ListView, use the new operator to instantiate it and add it to its host's list of controls through a call to the Controls.Add() method. Here is an example:

Imports System.Drawing
Imports System.Windows.Forms

Module Exercise

    Public Class Starter
        Inherits Form

        Private lvwCountries As ListView

        Dim components As System.ComponentModel.Container

        Public Sub New()
            InitializeComponent()
        End Sub

        Public Sub InitializeComponent()

            Text = "Countries Statistics"
            Size = New Size(452, 218)

            lvwCountries = New ListView()

            lvwCountries.Location = New Point(12, 12)
            lvwCountries.Width = 420
            lvwCountries.Height = 160

            Controls.Add(lvwCountries)

        End Sub

    End Class

    Function Main() As Integer

        Dim frmStart As Starter = New Starter

        Application.Run(frmStart)

        Return 0
    End Function

End Module

Countries Statistics

After this declaration, an empty rectangular control is created and added to your application. You can then start populating it.

Practical LearningPractical Learning: Introducing the Tree View Control

  1. Start Microsoft Visual Basic
  2. Create a new Windows Application named DepartmentStore1
  3. In the Solution Explorer, right-click Form1.vb and click Rename
  4. Type DepartmentStore.vb and press Enter
  5. From the Common Controls section of the Toolbox, click ListView and click the form
  6. While the list view is still selected, in the Properties window, change the (Name) to lvwStoreItems
     
    Department Store
  7. Save the form

Visually Creating the Items of a List View

 

The Main Items of the List View

To create the items of a list view, you can use the ListViewItem Collection Editor of Microsoft Visual Studio. To access it, after adding a list view object to your application, you can click the ellipsis button of its Items field in the Properties window:

ListViewItem Collection Editor

At design time and in the ListViewItem Collection Editor, to create a new item, you can click the Add button.

Practical LearningPractical Learning: Visually Creating the Items of a List View

  1. On the form, click the list view.
    In the Properties window, click Items and click its ellipsis button
  2. In the ListViewItem Collection Editor, click Add
  3. Under ListViewItem {} Properties, click Text and type 883095
  4. Once again, click Add, click Text and type 602936
  5. Once again, click Add, click Text and type 935709
  6. Once again, click Add, click Text and type 200759
  7. Once again, click Add, click Text and type 735633
  8. Once again, click Add, click Text and type 492758
     
    ListViewItem Collection Editor
  9. Click OK

View Styles

To set it apart from the list box, a list view provides various options of displaying its items. To support this, the ListView class is equipped with the View property that is based on the View enumeration. Its members are:

  • LargeIcon: In this view, the control displays a list of items in the order they were added from left to right and from top to bottom. This means that items start displaying on the top left section of the control to right. When the first line is filled and there are still items, the list continues to the next line. Each item uses a square size corresponding to a 32x32 pixel
  • SmallIcon: Like the LargeIcon style, this view displays the list of items from the left to the right then to the next line if necessary. This time, each item uses a square region corresponding to a 16x16 pixel size
  • List: Like the SmallIcon option, each item uses a 16x16 pixel square to display. This time, the list is arranged in columns: the first item appears to the left side of the control. The next item (usually in alphabetical order) appears under it, and so on. If there are more items to fit in one column, the list continues with a new column to the right of the previous one. This continues until the list is complete
  • Details: This view clearly sets the list view apart from the list box. In this view, instead of showing just the string of the (main) item, each item can provide more detailed information in a column

As seen so far, you can use one of four different displays on a list view. Furthermore, you can give the user the ability to change views as needed. The different displays of the list view are controlled by the View property of the ListView class. To specify the type of view to use, assign the desired member of the View enumerator to the ListView.View property.

Practical LearningPractical Learning: Using View Styles

  1. To create an icon, on the main menu, click Project -> Add New Item...
  2. In the Templates list, click Icon File
  3. Save the Name to LargeIcon and click Add
  4. Right-click the white area and click Delete Image Type
  5. Design the 16x16 pixels version of the icon as follows:
     
  6. Save and close the icon
  7. On the main menu, click Project -> Add New Item...
  8. In the Templates list, click Icon File
  9. Save the Name to SmallIcon and click Add
  10. Right-click the white area and click Delete Image Type
  11. Design the 16x16 pixels version of the icon as follows:
     
  12. Save and close the icon
  13. On the main menu, click Project -> Add New Item...
  14. In the Templates list, click Icon File
  15. Save the Name to List and click Add
  16. Right-click the white area and click Delete Image Type
  17. Design the 16x16 version as follows:
     
  18. Save and close the icon
  19. On the main menu, click Project -> Add New Item...
  20. In the Templates list, click Icon File
  21. Save the Name to Details and click Add
  22. Right-click the white area and click Delete Image Type
  23. Design the 16x16 version as follows:
     
  24. Save and close the icon
  25. Change the design of the form as follows:
     
    Department Store
    Control Name Appearance Checked Image AutoSize
    Label   Store Items      
    RadioButton btnLargeIcon Button   LargeIcon.ico False
    RadioButton btnSmallIcon Button   SmallIcon.ico False
    RadioButton btnList Button   List.ico False
    RadioButton btnDetails Button True Details.ico False
    Button btnClose Close      
  26. Double-click the left button and implement its event as follows:
     
    Private Sub btnLargeIcon_CheckedChanged(ByVal sender As System.Object, _
                                            ByVal e As System.EventArgs) _
                                        Handles btnLargeIcon.CheckedChanged
            lvwStoreItems.View = View.LargeIcon
    End Sub
  27. In the Class Name combo box, select btnSmallIcon
  28. In the Method Name combo box, select CheckedChanged and implement the event as follows:
     
    Private Sub btnSmallIcon_CheckedChanged(ByVal sender As Object, _
                                            ByVal e As System.EventArgs) _
                                        Handles btnSmallIcon.CheckedChanged
            lvwStoreItems.View = View.SmallIcon
    End Sub
  29. In the Class Name combo box, select btnList
  30. In the Method Name combo box, select CheckedChanged and implement the event as follows:
     
    Private Sub btnList_CheckedChanged(ByVal sender As Object, _
                                           ByVal e As System.EventArgs) _
                                           Handles btnList.CheckedChanged
            lvwStoreItems.View = View.List
    End Sub
  31. In the Class Name combo box, select btnDetails
  32. In the Method Name combo box, select CheckedChanged and implement the event as follows:
     
    Private Sub btnDetails_CheckedChanged(ByVal sender As Object, _
                                          ByVal e As System.EventArgs) _
                                      Handles btnDetails.CheckedChanged
            lvwStoreItems.View = View.Details
    End Sub
  33. In the Class Name combo box, select btnClose
  34. In the Method Name combo box, select Click and implement the event as follows:
     
    Private Sub btnClose_Click(ByVal sender As Object, _
                                   ByVal e As System.EventArgs) _
                                   Handles btnClose.Click
            End
    End Sub
  35. Execute the application and click the buttons on the form
  36. Close the form and return to your programming environment

List View Items and their Icons

One of the fundamental differences between a list box and a list view is that this one has a built-in capability to display icons but this is only an option. The list view uses two sets of pictures. This means that two icons would be associated to each item. One of the icons should have a 32x32 pixels size and the other should have a 16x16 pixels size. The set of 32x32 pixels list is referred to as large icons. The other set is referred to as small icons. Before using the pictures, you should first store them in image lists. Each set must be stored in its own ImageList object.

To support the various sets of icons, the ListView class is equipped with a property named LargeImageList for the 32x32 icons and another property named SmallImageList for the 16x16 icons. After creating both ImageList objects, you can assign each to the appropriate property.

After assigning the icons to the list view items, each view style can use the appropriate item to display:

  • LargeIcon: In this view, each item is displayed with its assigned 32x32 pixels icon. The string of the item displays under its corresponding icon:
     
    List View: Large Icons
  • List: Each item appears with the 16x16 pixels small icon to its left:
     
    List View: List
  • SmallIcon: Like the List option, each item appears with the 16x16 pixels icon:
      
    List View Style: Small Icons
  • Details: Each item uses the 16x16 pixels icon

Practical LearningPractical Learning: Associating Icons With Nodes

  1. To create an icon, on the main menu, click Project -> Add New Item...
  2. In the Templates list, click Icon File
  3. Set the Name to Babies and click Add
  4. Design the icon as follows:
     
  5. Right-click a white area in the main window -> Current Image Type -> 16x16, 16 colors
  6. Design the icon as follows:
     
  7. On the main menu, click File -> Save Babies.ico
  8. On the main menu, click File -> Close
  9. On the main menu, click Project -> Add New Item...
  10. In the Templates list, click Icon File
  11. Set the Name to Teens and click Add
  12. Design the icon as follows:
     
  13. As done above, display the 16x16, 16 colors version of the icon and design the icon as follows:
     
  14. On the main menu, click File -> Save Teens.ico
  15. On the main menu, click File -> Close
  16. On the main menu, click Project -> Add New Item...
  17. In the Templates list, click Icon File
  18. Set the Name to Women and click Add
  19. Design it as follows:
     
  20. Display its 16x16, 16 colors version and design it as follows:
     
  21. On the main menu, click File -> Save Women.ico
  22. On the main menu, click File -> Close
  23. On the main menu, click Project -> Add New Item...
  24. In the Templates list, click Icon File
  25. Set the Name to Men and click Add
  26. Design the icon as follows:
     
  27. Access its 16x16, 16 colors version and design it as follows:
     
  28. On the main menu, click File -> Save Men.ico
  29. On the main menu, click File -> Close
  30. On the main menu, click Project -> Add New Item...
  31. In the Templates list, click Icon File
  32. Set the Name to Miscellaneous and click Add
  33. Design the icon as follows:
     
  34. Display its 16x16, 16 colors version and design it as follows:
     
  35. On the main menu, click File -> Save Men.ico
  36. On the main menu, click File -> Close
  37. Display the form
  38. In the Toolbox, click ImageList and click the form
  39. In the Properties window, change its name to LargeImages
  40. Change the ImageSize to 32, 32
  41. Click the ellipsis button of the Images field
  42. In Image Collection Editor, click Add
  43. Locate the folder that contains the current project and display it in the Look In combo box
  44. Select Babies.ico and click Open
  45. In the same way, add the other pictures in the following order: Teens.ico, Women.ico, Men.ico, and Misc.ico
  46. Click OK
  47. In the Toolbox, click ImageList and click the form
  48. In the Properties window, change its name to SmallImages
  49. In the Properties window, click the ellipsis button of the Images field
  50. In Image Collection Editor, click Add
  51. Select Babies.ico, Teens.ico, Women.ico, Men.ico, and Misc.ico
  52. Click OK
  53. On the form, click the list view
  54. In the Properties window, Set LargeImageList to LargeImages
  55. Set the SmallImageList property to SmallImages
  56. Click Items and click its ellipsis button
  57. On the Members list, click the first item.
    In the right list, click ImageIndex, then click the arrow of its combo box and select 0
  58. In the same way, assign the image indexes as follows:
     
    Members ImageIndex
    ListViewItem: {883095} 0
    ListViewItem: {602936} 1
    ListViewItem: {935709} 2
    ListViewItem: {200759} 3
    ListViewItem: {735633} 2
    ListViewItem: {492758} 4
  59. Click OK
     
    Department Store
  60. Execute the application to test it
  61. Close the form and return to your programming environment

The Columns of a List View

 

Introduction

One of the characteristics that set the list view apart from the list box is that the former can provide more information about each item of its list. Based on this, each type of item can be equipped with its own list of sub-items. The view would appear as follows:

List View Style: Details

Visually Creating Columns

Before creating the sub-items of a list view, you may need to plan it first to identify the types of information you want to provide. To guide the user with the type of information that each item would display, you can create a column for each type. To support columns, the ListView class is equipped with the Columns property. The Columns property is an object of type ListView.ColumnHeaderCollection. As its name indicates, the Columns property represents a list of columns. Each column is based on the ColumnHeader class.

At design time, to create the columns, access the Properties window for the list view and click the ellipsis button of the Columns field. This would open the ColumnHeader Collection Editor. To create a column, you can click Add. In the right Properties list, you can click Text and type the string that would display on the column header.

Programmatically Creating Columns

To programmatically create a column, you can call the ColumnHeaderCollection.Add() method that is overloaded with two versions. One of the versions of this method uses the following syntax:

Public Overridable Function Add ( _
	text As String, _
	width As Integer, _
	textAlign As HorizontalAlignment _
) As ColumnHeader

The first argument of this method is referred to as the column's caption. It is text that would display in the column header. The second argument is a natural number that represents the distance from the left to the right borders of the column. The last argument specifies how the caption of the column would be aligned. The options are the same as those of the text box: Left, Center, or Right. The default value is Left.

Here is an example of creating a column by calling this method:

Public Sub InitializeComponent()

            Text = "Countries Statistics"
            Size = New Size(452, 218)

            lvwCountries = New ListView()
            lvwCountries.Location = New Point(12, 12)
            lvwCountries.Width = 420
            lvwCountries.Height = 160

            Controls.Add(lvwCountries)

            lvwCountries.View = View.Details
            lvwCountries.Columns.Add("Name", 120, HorizontalAlignment.Left)

End Sub

This would produce:

As mentioned earlier, a column is in fact an object of type ColumnHeader. This class is equipped with all the necessary characteristics that define a column header:

  • Caption: The Text property holds the string that displays on top of the column
  • Width: This property represents the width of the column
  • Text Alignment: The TextAlign property specifies the horizontal alignment of its string. This property uses a value of type HorizontalAlignment, which is the same as that of the text box
  • Index: Since the columns are stored in a collection, this property allows you to get the index of this column in the collection it belongs to
  • The Parent List View: If you want to know what list view the current column header belongs to, you can access its ColumnHeader.ListView property

Instead of defining a column in the Add() method, you can first create an object based on the ColumnHeader class and then pass it to the following version of the ColumnHeaderCollection.Add() method:

Public Overridable Function Add(value As ColumnHeader) As Integer

This method takes as argument a ColumnHeader object. Here is an example:

Public Sub InitializeComponent()

            Text = "Countries Statistics"
            Size = New Size(452, 218)

            lvwCountries = New ListView()
            lvwCountries.Location = New Point(12, 12)
            lvwCountries.Width = 420
            lvwCountries.Height = 160

            Controls.Add(lvwCountries)

            lvwCountries.View = View.Details
            lvwCountries.Columns.Add("Name", 120, HorizontalAlignment.Left)

            Dim colArea As ColumnHeader = New ColumnHeader()
            colArea.Text = "Area"
            colArea.Width = 80
            colArea.TextAlign = HorizontalAlignment.Right
            lvwCountries.Columns.Add(colArea)

End Sub

This would produce:

Countries Statistics

Instead of adding one column at a time as we have done above, you can first create an array of ColumnHeader objects and pass it to the ListView.ColumnHeaderCollection.AddRange() method. Its syntax is:

Public Overridable Sub AddRange(values As ColumnHeader())

Here is an example of using it:

Public Sub InitializeComponent()

            Text = "Countries Statistics"
            Size = New Size(452, 218)

            lvwCountries = New ListView()
            lvwCountries.Location = New Point(12, 12)
            lvwCountries.Width = 420
            lvwCountries.Height = 160

            Controls.Add(lvwCountries)

            lvwCountries.View = View.Details
            lvwCountries.Columns.Add("Name", 120, HorizontalAlignment.Left)

            Dim colArea As ColumnHeader = New ColumnHeader()
            colArea.Text = "Area"
            colArea.Width = 80
            colArea.TextAlign = HorizontalAlignment.Right
            lvwCountries.Columns.Add(colArea)


            Dim colPopulation As ColumnHeader = New ColumnHeader()
            colPopulation.Text = "Population"
            colPopulation.Width = 78
            colPopulation.TextAlign = HorizontalAlignment.Right

            Dim colCapital As ColumnHeader = New ColumnHeader()
            colCapital.Text = "Capital"
            colCapital.Width = 96
            colCapital.TextAlign = HorizontalAlignment.Left

            Dim colCode As ColumnHeader = New ColumnHeader()
            colCode.Text = "Code"
            colCode.Width = 40
            colCode.TextAlign = HorizontalAlignment.Center

            Dim cols() As ColumnHeader = {colPopulation, colCapital, colCode}
            lvwCountries.Columns.AddRange(cols)
        End Sub

End Class

This would produce:

Countries Statistics

Practical LearningPractical Learning: Creating Columns

  1. On the form, click the list view
  2. In the Properties window, click Columns and click its ellipsis button
  3. In the ColumnHeader Collection Editor, click Add
  4. In the columnHeader1 properties list, change the following properties
    (Name): colItemNumber
    Text: Item #
    Width: 70
  5. Click Add again and set the new column as follows:
    (Name): colCategory
    Text: Category
    Width: 70
  6. Click Add again and set the new column as follows:
    (Name): colItemName
    Text: Item Name
    Width: 180
  7. Click Add again and set the new column as follows:
    (Name): colItemSize
    Text: Size
    Width: 80
  8. Click Add again and set the new column as follows:
    (Name): colUnitPrice
    Text: Unit Price
    TextAlign: Right
  9. Click Add again and set the new column as follows:
    (Name): colQuantity
    Text: Qty
    TextAlign: Right
    Width: 40
  10. Click OK
  11. While the list view is still selected in the form, change its View property to Details
      
    Department Store
  12. Execute the application to test it
  13. After viewing the form, close it and return to your programming environment

Column Insertion

If you call the AddRange() method, its list of columns is created at the end of any existing column, unless there was no other column. If you call the Add() method to create a column, the new column is added at the end of the existing columns, unless it is the first column. If you don't want the new column to simply be created at the end of the other column(s), if any, you can call the ColumnHeaderCollection.Insert() method. It is overloaded with two versions and their syntaxes are:

Public Sub Insert ( _
	index As Integer, _
	value As ColumnHeader _
)

Public Sub Insert ( _
	index As Integer, _
	text As String, _
	width As Integer, _
	textAlign As HorizontalAlignment _
)

In both versions, the first argument specifies the index where the new column will be created inside the Columns collection.

Practical Learning Practical Learning: Using a List View

  1. To add a new project, in the Solution Explorer, right-click the top node (DepartmentStore1) -> Add -> New Project...
  2. In the Templates list, make sure Windows Application, set the Name to AltairRealtors1 and click OK
  3. In the Solution Explorer, under AltairRealtors1, right-click Form1.vb and click Rename
  4. Type AltairRealtors.vb and press Enter
  5. Design the form as follows:
     
    Altair Realtors - Properties Listing
    Control Text Name Other Properties
    Label Label Altair Realtors - Properties Listing   BorderStyle: FixedSingle
    Font: Times New Roman, 21.75pt, style=Bold
    AutoSize: False
    TextAlign: MiddleCenter
    ListView ListView   lvwProperties  
    Columns (Name) Text TextAlign Width
    colPropertyNumber Prop #   50
    colPropertyType Property Type   78
    colAddress Address   130
    colCity City   80
    colState State   40
    colZIPCode ZIP Code Center 58
    colBedrooms Beds Right 40
    colBathrooms Baths Right 40
    colMarketValue Market Value Right 75
    Button Button New Property... btnNewProperty  
    Button Button Close btnClose  
  6. Save the form

The Number of Columns of a List View

As reviewed above, the columns of a list view are stored in a collection. To know the number of columns of a list view, you can check its ColumnHeaderCollection.Count property.

Locating Columns

To find out if a certain column is part of a list view, you can call the ColumnHeaderCollection.Contains() method. Its syntax is:

Public Function Contains(value As ColumnHeader) As Boolean

This method takes as argument a defined ColumnHeader object and scans the list of columns looking for it. If it finds it, it returns true. If it doesn't find a column that matches this object, it returns false. As opposed to looking for a column, you can perform two searches in one by calling the ColumnHeaderCollection.IndexOf() method. Its syntax is:

Public Function IndexOf(value As ColumnHeader) As Integer

This method looks for the value ColumnHeader. If it finds it, it returns the column's index from the collection. If the method doesn't find it, it returns -1.

Deleting Columns

If you don't need a column any more, you can delete it. In the same way, you can delete all columns of a list view. To delete a ColumnHeader object, you can call the ColumnHeaderCollection.Remove() method. Its syntax is:

Public Overridable Sub Remove(column As ColumnHeader)

To delete a column based on its position in the collection, you can call the ColumnHeaderCollection.RemoveAt() method. Its syntax is:

Public Overridable Sub RemoveAt(index As Integer)

To delete all columns of a list view, you can call the ListView.ColumnHeaderCollection.Clear() method. Its syntax is:

Public Overridable Sub Clear

The Items of a List View

 

Adding an Item to the List View 

In the previous sections, we saw how to visually create the items of a list view using the ListViewItem Collection Editor. The items of a list view are stored in a property called Items. The Items property is based on the ListView.ListViewItemCollection class. The nested ListViewItemCollection class implements the IList, the ICollection, and the IEnumerable interfaces.

To create a new list view item, the ListViewItemCollection class is equipped with the Add() method which is overloaded with three versions. One of the versions of this method uses the following syntax:

public virtual ListViewItem Add(string text)

This method expects a string that will display as the new item. Here is an example:

Public Sub InitializeComponent()

            Text = "Countries Statistics"
            Size = New Size(452, 218)

            lvwCountries = New ListView()
            lvwCountries.Location = New Point(12, 12)
            lvwCountries.Width = 420
            lvwCountries.Height = 160

            Controls.Add(lvwCountries)

            lvwCountries.Items.Add("Egypt")
End Sub

This would produce:

Countries Statistics

As the Items property is in fact a list, each item of this collection is represented by the Item property of the ListViewItemCollection class. This Item property is based on the ListViewItem class. The ListViewItem class is equipped with various constructors, the default of which allows you to instantiate an item without giving much details.

Instead of directly passing a string to the ListViewItemCollection.Add() method, you can first create a ListViewItem object and pass it to the following version of the ListViewItemCollection.Add() method:

Public Overridable Function Add(value As ListViewItem) As ListViewItem

This method expects a ListViewItem value. One way you can use it consists of providing the string the item would display. To do this, you can use the following constructor of the ListViewItem class:

Public Sub New(text As String)

This constructor expects as argument the text that the new item will display. Here is an example:

Public Sub InitializeComponent()

            Text = "Countries Statistics"
            Size = New Size(452, 218)

            lvwCountries = New ListView()
            lvwCountries.Location = New Point(12, 12)
            lvwCountries.Width = 420
            lvwCountries.Height = 160

            Controls.Add(lvwCountries)

            lvwCountries.Items.Add("Egypt")

            Dim lviPortugal As ListViewItem = New ListViewItem("Portugal")
            lvwCountries.Items.Add(lviPortugal)
End Sub

Countries Statistics

Practical Learning Practical Learning: Creating List View Items

  1. In the Solution Explorer, right-click AltairRealtors1 -> Add -> Windows Form...
  2. Set the Name to AvailableProperty and click Add
  3. Design the form as follows:
     
    Altair Realtors
    Control Text Name Other Properties
    Label Label Property #:    
    TextBox TextBox   txtPropertyNumber Enabled: False
    Modifiers: Public
    Button Button OK btnOK DialogResult: OK
    Button Button Cancel btnCancel DialogResult: Cancel
    Form
    FormBorderStyle: FixedDialog
    Text: Altair Realtors - Available Property
    StartPosition: CenterScreen
    AcceptButton: btnOK
    CancelButton: btnCancel
    MaximizeBox: False
    MinimizeBox: False
    ShowInTaskBar: False
  4. In the Solution Explorer, under AltairRealtor1, right-click AltairRealtors.vb and click View Code
  5. In the Class Name combo box, select btnNewProperty
  6. In the Method Name combo box, select Click and implement the event as follows:
     
    Private Sub btnNewProperty_Click(ByVal sender As Object, _
                                         ByVal e As System.EventArgs) _
                                         Handles btnNewProperty.Click
            Dim rndNumber As Random
            Dim lviProperty As ListViewItem
            Dim dlgProperty As AvailableProperty
    
            dlgProperty = New AvailableProperty()
            rndNumber = New Random(DateTime.Now.Millisecond)
    
            Dim number1 As Integer = rndNumber.Next(100, 999)
            Dim number2 As Integer = rndNumber.Next(100, 999)
            Dim propNumber As String = number1 & "-" & number2
    
            dlgProperty.txtPropertyNumber.Text = propNumber
            dlgProperty.Text = "Altair Realtors - New Property"
    
            If dlgProperty.ShowDialog() = Windows.Forms.DialogResult.OK Then
                lviProperty = New ListViewItem(dlgProperty.txtPropertyNumber.Text)
                lvwProperties.Items.Add(lviProperty)
            End If
    End Sub
  7. Execute the application to test it
  8. When the form displays, click the New Property button and, when the dialog box comes up, click OK
  9. Do this five times to create five items
     
  10. Close the form and return to your programming environment

Adding an Array of Items

You can use any of these techniques to create as many items as necessary. Alternatively, if you have many items to create, you can first store them in an array of ListViewItem values, then call the AddRange() method. The syntax of this method is:

Public Sub AddRange(items As ListViewItem())

This method takes as argument an array of ListViewItem objects. Here is an example:

Public Sub InitializeComponent()

            Text = "Countries Statistics"
            Size = New Size(452, 218)

            lvwCountries = New ListView()
            lvwCountries.Location = New Point(12, 12)
            lvwCountries.Width = 420
            lvwCountries.Height = 160

            Controls.Add(lvwCountries)

            lvwCountries.Items.Add("Egypt")

            Dim lviPortugal As ListViewItem = New ListViewItem("Portugal")
            lvwCountries.Items.Add(lviPortugal)

            Dim lviCountries() As ListViewItem = _
                   { _
                       New ListViewItem("Australia"), _
                       New ListViewItem("Mali"), _
                       New ListViewItem("Sweden"), _
                       New ListViewItem("Venezuela") _
                   }

            lvwCountries.Items.AddRange(lviCountries)
End Sub

Countries Statistics

Alternatively, you can create an array of strings and pass it to the following constructor of the ListView class:

Public Sub New(items As String())

Using a List View

 

Selecting an Item

As mentioned previously, a list view is made of a list of items. An item can be identified by its index:

  • On a large image or a small image style, the item on the top-left side has an index of 0. The second item from the left has an index of 1, and so on, up to the subsequent lines, if any
  • On a list style, the top item on the left column has an index of 0. The second item from top on the left column has an index of 1, and so on, up to the subsequent columns, if any
  • On a details style, the most top item has an index of 0. The second item from the top has an index of 1, and so on 

When a list view comes up, it displays its list of items. To use an item, the user can click it. When an item has been clicked, the control fires a SelectedIndexChanged event. The SelectedIndexChanged event is of type EventArgs, which means it does not carry any significant information except to let you know that an item has been clicked. Worse, this event does not even let you know the index of the item that was clicked. This means that you must work on your own to identify the item that was clicked.

When the user clicks an item, you can use a technique to identify the item that was selected, when another item gets selected, the the item that was previously selected fires an ItemSelectionChanged event.

Editing a Label

Clicking an item once allows the user to select it. You may create an application that allows the user to edit an item, that is, to change the string that the item displays. To edit an item, the user can click (once) an item, then click (once) the item again. This puts it into edit mode. The user can then use the keyboard to change the string of the item:

To support the ability to let the user edit an item, the ListView class is equipped with the LabelEdit Boolean property. The default value of this property is false, which would prevent the user from editing the item in the list view. If you set this property to true, the user can click, then click the item to edit it.

When the user starts editing, the control fires a BeforeLabelEdit event. This event allows you to take care of some early processing, such as checking what the user is doing or canceling the editing.

If you allow the user to edit the item, after the user has edited it, the control fires an AfterLabelEdit event. 

Both the BeforeLabelEdit and the AfterLabelEdit events are of type LabelEditEventArgs. One of the pieces of information that this class provides is the index of the item that is being edited. This index is held by the Item property of the LabelEditEventArgs class. To get the string resulting from the user editing, the LabelEditEventArgs class is equipped with the Label property. When the control fires a BeforeLabelEdit or the a AfterLabelEdit event, to help you decide whether to accept or reject the change, the LabelEditEventArgs class is equipped with the CancelEdit Boolean property.

Activating an Item

When an item has been selected, it becomes highlighted. If you use the LabelEdit property to allow the user to edit an item, this is a local edition. In the next sections, we will learn how to add sub-items to a list view item. When an item is equipped with sub-items, you may want your application to allow the user to change the item, one of its sub-items, or everything. Before doing anything, an item must be activated. There are three ways an item has been activated.

The technique used to activate an item is supported by the Activation property. The Activation property is based on the ItemActivation enumeration that has three members:

  • Standard: When the Activation property is set to Standard, to activate an item, the user must double-click the item
  • OneClick: With this option, the user would click an item once to active it
  • TwoClick: If you set the Activation property to this member, the user would have to click the item, then click it again to activate it (clicking once and clicking again once is not the same as double-clicking)

When an item has been activated, the control fires an ItemActivate event. You can use either this or the SelectedIndexChanged event to process the item.

Practical Learning Practical Learning: Using a List View

  1. Click the AltairRealtor.vb [Design] tab and, on the form, click the list view
  2. In the Properties section of the Properties window, click Activation and make sure it is set to Standard.
    Click the Events button Events and double-click DoubleClick
  3. Implement its event as follows:
     
    Private Sub lvwProperties_DoubleClick(ByVal sender As System.Object, _
                                              ByVal e As System.EventArgs) _
                                              Handles lvwProperties.DoubleClick
            ' Prepare to open the AvailableProperties dialog box
            Dim dlgProperty As AvailableProperty = New AvailableProperty()
    
            ' Make sure an item, and only one, is selected
            If (lvwProperties.SelectedItems.Count = 0) Or _
                    (lvwProperties.SelectedItems.Count > 1) Then
                Exit Sub
            End If
    
            ' Identify the item that is currently selected
            Dim lviCurrent As ListViewItem = lvwProperties.SelectedItems(0)
    
            ' Display the ItemDetails dialog box with the item number
            dlgProperty.txtPropertyNumber.Text = lviCurrent.Text
            dlgProperty.ShowDialog()
    End Sub
  4. Execute the application to test it
  5. Click the New Item button followed by the OK button a few times
  6. Then double-click a number in the list view
  7. Close the form and return to your programming environment

Using Columns

Besides the items, the user can also use the columns. For example, you can allow the user to re-arrange or sort the list of items with the user clicks a column. When the user a column header, the control fires a ColumnClick event. The ColumnClick event is of type ColumnClickEventArgs. The ColumnClickEventArgs class is equipped with the Column integer property that allows you to identify the index of the column that was clicked.

Besides clicking a column header, the user can also resize a column by dragging the line separator between two columns. If the user decides to resize a column and starts dragging the line separator, the control fires ColumnWidthChanging event. After the user has resized a column, the control fires a ColumnWidthChanged event.

Identifying an Item

The only actual property that the nested ListViewItemCollection class is equipped with is the default Item property. This property allows you to identify an item. There are two versions of the Item property. You can identify an item using its index, which is its zero-based position. As an alternative, you can identify an item using its string.

The Sub Items of an Item

 

Introduction

The idea of having columns is to provide more information about each item of a list view instead of a simple string for each. Consider the following example:

Public Sub InitializeComponent()

            lvwCountries = New ListView()
            lvwCountries.Location = New Point(12, 12)
            lvwCountries.Width = 420
            lvwCountries.Height = 100
            Controls.Add(lvwCountries)

            lvwCountries.View = View.Details

            lvwCountries.Columns.Add("Name", 120, HorizontalAlignment.Left)
            Dim colArea As ColumnHeader = New ColumnHeader()
            colArea.Text = "Area"
            colArea.Width = 80
            colArea.TextAlign = HorizontalAlignment.Right
            lvwCountries.Columns.Add(colArea)

            Dim colPopulation As ColumnHeader = New ColumnHeader()
            colPopulation.Text = "Population"
            colPopulation.Width = 78
            colPopulation.TextAlign = HorizontalAlignment.Right

            Dim colCapital As ColumnHeader = New ColumnHeader()
            colCapital.Text = "Capital"
            colCapital.Width = 96
            colCapital.TextAlign = HorizontalAlignment.Left

            Dim colCode As ColumnHeader = New ColumnHeader()
            colCode.Text = "Code"
            colCode.Width = 40
            colCode.TextAlign = HorizontalAlignment.Center

            Dim cols() As ColumnHeader = {colPopulation, colCapital, colCode}
            lvwCountries.Columns.AddRange(cols)

            lvwCountries.Items.Add("Egypt")

            Dim lviPortugal As ListViewItem = New ListViewItem("Portugal")
            lvwCountries.Items.Add(lviPortugal)

            Dim lviCountry As ListViewItem = New ListViewItem("Australia")
            lvwCountries.Items.Add(lviCountry)
            lviCountry = New ListViewItem("Mali")
            lvwCountries.Items.Add(lviCountry)
            lviCountry = New ListViewItem("Sweden")
            lvwCountries.Items.Add(lviCountry)
End Sub

This would produce:

Countries Statistics

Visually Creating Sub Items

To visually create the sub-items, you must use the ListViewSubItem Collection Editor. To get it, first access the Properties window of the list view and click the ellipsis button of the Items field. As mentioned previously, this would open the ListView Collection Editor. From that dialog box, you can click the ellipsis button of the SubItems field.

When the ListViewSubItem Collection Editor comes up, to create a sub-item of the current item, you can click Add. Then, on the right side, define the characteristics of the sub-items. You can continue this until you have created all necessary sub-items.

Practical Learning Practical Learning: Visually Creating Sub Items

  1. In the Solution Explorer, under DepartmentStore1, double-click DepartmentStore.vb
  2. On the form, click the list view
  3. In the Properties window, click Items and click its ellipsis button
  4. In the ListView Collection Editor, as the first item is selected, on the right side, click SubItems and click its ellipsis button
  5. In the ListViewSubItem Collection Editor, click Add
  6. On the right side, click Text and type Babies
  7. Click Add again
  8. On the right side, click Text and type Newborn Girl's Dress Set
  9. Click Add again
  10. On the right side, click Text and type 6 Months
  11. Click Add again
  12. On the right side, click Text and type 19.95
  13. Click Add again
  14. On the right side, click Text and type 12
     
  15. Click OK
  16. Click each item and complete its sub-items with the following:
      
    Category Item Name Size Unit Price Qty
    Teens Girls Classy Handbag One Size 95.95 4
    Women Cashmere Lined Glove 8 115.95 12
    Men Trendy Jacket Medium 45.85 8
    Women Stretch Flare Jeans Petite 27.75 6
    Miscellaneous Chocolate Gift Box Medium 45.00 5
  17. In the Solution Explorer, right-click DepartmentStore1 and click Build
     
    Department Store
  18. Close the form and return to your programming environment

Programmatically Creating Sub Items

To support sub-items, the ListViewItem class is equipped with a property called SubItems. This property is of type ListViewSubItemCollection. To create a sub-item, you can directly specify its text by passing a string to the ListViewSubItemCollection.Add() method. The ListViewSubItemCollection.Add() method is overloaded with three versions. The version referred to in this case uses the following syntax:

public ListViewSubItem Add(string text)

To identify each piece of information concerning a sub-item, the ListViewSubItemCollection class is equipped with a property called Item, which in turn is based on the ListViewSubItem class. As you can see, the above Add() method returns a ListViewSubItem value.

Here are two examples of calling the above Add() method:

Public Sub InitializeComponent()

            lvwCountries = New ListView()
            lvwCountries.Location = New Point(12, 12)
            lvwCountries.Width = 420
            lvwCountries.Height = 100
            Controls.Add(lvwCountries)

            lvwCountries.View = View.Details

            lvwCountries.Columns.Add("Name", 120, HorizontalAlignment.Left)
            Dim colArea As ColumnHeader = New ColumnHeader()
            colArea.Text = "Area"
            colArea.Width = 80
            colArea.TextAlign = HorizontalAlignment.Right
            lvwCountries.Columns.Add(colArea)

            Dim colPopulation As ColumnHeader = New ColumnHeader()
            colPopulation.Text = "Population"
            colPopulation.Width = 78
            colPopulation.TextAlign = HorizontalAlignment.Right

            Dim colCapital As ColumnHeader = New ColumnHeader()
            colCapital.Text = "Capital"
            colCapital.Width = 96
            colCapital.TextAlign = HorizontalAlignment.Left

            Dim colCode As ColumnHeader = New ColumnHeader()
            colCode.Text = "Code"
            colCode.Width = 40
            colCode.TextAlign = HorizontalAlignment.Center

            Dim cols() As ColumnHeader = {colPopulation, colCapital, colCode}
            lvwCountries.Columns.AddRange(cols)

            Dim lviEgypt As ListViewItem = lvwCountries.Items.Add("Egypt")
            lviEgypt.SubItems.Add("1,001,450")
            lviEgypt.SubItems.Add("74,718,797")
            lviEgypt.SubItems.Add("Cairo")
            lviEgypt.SubItems.Add("eg")

            Dim lviPortugal As ListViewItem = New ListViewItem("Portugal")
            lviPortugal.SubItems.Add("92,391")
            lviPortugal.SubItems.Add("10,102,022")
            lviPortugal.SubItems.Add("Lisbon")
            lviPortugal.SubItems.Add("pt")
            lvwCountries.Items.Add(lviPortugal)

            Dim lviCountry As ListViewItem = New ListViewItem("Australia")
            lvwCountries.Items.Add(lviCountry)
            lviCountry = New ListViewItem("Mali")
            lvwCountries.Items.Add(lviCountry)
            lviCountry = New ListViewItem("Sweden")
            lvwCountries.Items.Add(lviCountry)
End Sub

This would produce:

Countries Statistics

As mentioned above, each sub-item is of type ListViewSubItem. The ListViewSubItem class is equipped with three constructors. The default constructor allows you to create an empty sub-item. After declaring a sub-item, you can specify its text by assigning the desired string to the ListViewSubItem.Text property. Instead of directly passing the text of a sub-item to the ListViewSubItemCollection.Add() method as done above, you can first define a ListViewSubItem object using the following constructor of the ListViewSubItem class:

Public Sub New(owner As ListViewItem, text As String)

The first argument of this constructor specifies the ListViewItem object that this sub-item will belong to. The second argument is simply the string that this sub-item will display. After defining a ListViewSubItem object, you can pass it to the following version of the ListViewSubItemCollection.Add() method:

Public Function Add(item As ListViewSubItem) As ListViewSubItem

Here are three examples of using it:

Public Sub InitializeComponent()

            lvwCountries = New ListView()
            lvwCountries.Location = New Point(12, 12)
            lvwCountries.Width = 420
            lvwCountries.Height = 100
            Controls.Add(lvwCountries)

            lvwCountries.View = View.Details

            lvwCountries.Columns.Add("Name", 120, HorizontalAlignment.Left)
            Dim colArea As ColumnHeader = New ColumnHeader()
            colArea.Text = "Area"
            colArea.Width = 80
            colArea.TextAlign = HorizontalAlignment.Right
            lvwCountries.Columns.Add(colArea)

            Dim colPopulation As ColumnHeader = New ColumnHeader()
            colPopulation.Text = "Population"
            colPopulation.Width = 78
            colPopulation.TextAlign = HorizontalAlignment.Right

            Dim colCapital As ColumnHeader = New ColumnHeader()
            colCapital.Text = "Capital"
            colCapital.Width = 96
            colCapital.TextAlign = HorizontalAlignment.Left

            Dim colCode As ColumnHeader = New ColumnHeader()
            colCode.Text = "Code"
            colCode.Width = 40
            colCode.TextAlign = HorizontalAlignment.Center

            Dim cols() As ColumnHeader = {colPopulation, colCapital, colCode}
            lvwCountries.Columns.AddRange(cols)

            Dim lviEgypt As ListViewItem = lvwCountries.Items.Add("Egypt")
            lviEgypt.SubItems.Add("1,001,450")
            lviEgypt.SubItems.Add("74,718,797")
            lviEgypt.SubItems.Add("Cairo")
            lviEgypt.SubItems.Add("eg")

            Dim lviPortugal As ListViewItem = New ListViewItem("Portugal")
            lviPortugal.SubItems.Add("92,391")
            lviPortugal.SubItems.Add("10,102,022")
            lviPortugal.SubItems.Add("Lisbon")
            lviPortugal.SubItems.Add("pt")
            lvwCountries.Items.Add(lviPortugal)

            Dim lviAustralia As ListViewItem = New ListViewItem("Australia")
            Dim subAustralia As ListViewItem.ListViewSubItem = _
                New ListViewItem.ListViewSubItem(lviAustralia, "7,686,850")
            lviAustralia.SubItems.Add(subAustralia)
            subAustralia = _
                New ListViewItem.ListViewSubItem(lviAustralia, "19,731,984")
            lviAustralia.SubItems.Add(subAustralia)
            subAustralia = _
                New ListViewItem.ListViewSubItem(lviAustralia, "Canberra")
            lviAustralia.SubItems.Add(subAustralia)
            subAustralia = New ListViewItem.ListViewSubItem(lviAustralia, "au")
            lviAustralia.SubItems.Add(subAustralia)
            lvwCountries.Items.Add(lviAustralia)

            Dim lviMali As ListViewItem = New ListViewItem("Mali")
            Dim subMali As ListViewItem.ListViewSubItem = _
                      New ListViewItem.ListViewSubItem(lviMali, "1.24 million")
            lviMali.SubItems.Add(subMali)
            subMali = New ListViewItem.ListViewSubItem(lviMali, "11,626219")
            lviMali.SubItems.Add(subMali)
            subMali = New ListViewItem.ListViewSubItem(lviMali, "Bamako")
            lviMali.SubItems.Add(subMali)
            subMali = New ListViewItem.ListViewSubItem(lviMali, "ml")
            lviMali.SubItems.Add(subMali)
            lvwCountries.Items.Add(lviMali)

            Dim lviSweden As ListViewItem = New ListViewItem("Sweden")
            Dim subSweden As ListViewItem.ListViewSubItem = _
                      New ListViewItem.ListViewSubItem(lviSweden, "449,964")
            lviSweden.SubItems.Add(subSweden)
            subSweden = New ListViewItem.ListViewSubItem(lviSweden, "8,878,085")
            lviSweden.SubItems.Add(subSweden)
            subSweden = New ListViewItem.ListViewSubItem(lviSweden, "Stockholm")
            lviSweden.SubItems.Add(subSweden)
            subSweden = New ListViewItem.ListViewSubItem(lviSweden, "se")
            lviSweden.SubItems.Add(subSweden)
            lvwCountries.Items.Add(lviSweden)
End Sub

This would produce:

Countries Statistics

If you call the ListViewSubItemCollection.Add() method to create a sub-item, the new sub-item would be added to end of the list. If you want, you can insert the new sub-item somewhere inside the collection. To do this, you would call the ListViewSubItemCollection.Insert() method. Its syntax is:

Public Sub Insert(index As Integer, item As ListViewSubItem)

The first argument is the index that the new sub-item will occupy after being inserted. The second argument is the sub-item to create.

Practical LearningPractical Learning: Creating Sub-Items

 
  1. In the Solution Explorer, under AltairRealtors2, double-click AvailableProperty
  2. Change the design of the form as follows:
     
    Altair Realtors
    Control Text Name Other Properties
    Label Label Property #:    
    TextBox TextBox   txtPropertyNumber Modifiers: Public
    Label Label Property Type:    
    ComboBox ComboBox   cbxPropertyTypes Modifiers: Public
    Items:
    Unknown
    Single Family
    Townhouse
    Condominium
    Label Label Address:    
    TextBox TextBox   txtAddress Modifiers: Public
    Label Label City:    
    TextBox TextBox   txtCity Modifiers: Public
    Label Label State:    
    ComboBox TextBox   cbxStates Modifiers: Public
    Items:
    DC
    MD
    PA
    VA
    WV
    Label Label ZIP Code:    
    TextBox TextBox   txtZIPCode Modifiers: Public
    Label Label Bedrooms:    
    TextBox TextBox 0 txtBedrooms Modifiers: Public
    Label Label Bathrooms:    
    TextBox TextBox 1.0 txtBathrooms Modifiers: Public
    Label Label Market Value:    
    TextBox TextBox 0.00 txtMarketValue Modifiers: Public
    Button Button OK btnOK DialogResult: OK
    Button Button Cancel btnCancel DialogResult: Cancel
  3. In the Solution Explorer, under AltairRealtors1, right-click AltairRealtors.vb and click View Code
  4. Change the code of the Click event of the New Property button as follows:
     
    Private Sub btnNewProperty_Click(ByVal sender As Object, _
                                         ByVal e As System.EventArgs) _
                                         Handles btnNewProperty.Click
            Dim strPropertyNumber As String
            Dim strPropertyType As String
            Dim strAddress As String
            Dim strCity As String
            Dim strState As String
            Dim strZIPCde As String
            Dim strBedrooms As String
            Dim strBathrooms As String
            Dim strMarketValue As String
            Dim rndNumber As Random
            Dim lviProperty As ListViewItem
            Dim dlgProperty As AvailableProperty
    
            ' Get a reference to the Available Property dialog box
            dlgProperty = New AvailableProperty()
    
            ' Create a random number for a property
            rndNumber = New Random(DateTime.Now.Millisecond)
    
            Dim number1 As Integer = rndNumber.Next(100, 999)
            Dim number2 As Integer = rndNumber.Next(100, 999)
            strPropertyNumber = number1 & "-" & number2
    
            ' Prepare to display the property number in the dialog box
            dlgProperty.txtPropertyNumber.Text = strPropertyNumber
            dlgProperty.Text = "Altair Realtors - New Property"
    
            ' Display the Available Property dialog box and
            ' find out if the user clicked OK after using it
            If dlgProperty.ShowDialog() = Windows.Forms.DialogResult.OK Then
                ' After the user had used the Available Property dialog box
                ' and clicked OK, get each value that the user created
                strPropertyType = dlgProperty.cbxPropertyTypes.Text
                strAddress = dlgProperty.txtAddress.Text
                strCity = dlgProperty.txtCity.Text
                strState = dlgProperty.cbxStates.Text
                strZIPCde = dlgProperty.txtZIPCode.Text
                strBedrooms = dlgProperty.txtBedrooms.Text
                strBathrooms = dlgProperty.txtBathrooms.Text
                strMarketValue = dlgProperty.txtMarketValue.Text
    
                ' Display the values in the list view
                lviProperty = New ListViewItem(dlgProperty.txtPropertyNumber.Text)
                lviProperty.SubItems.Add(strPropertyType)
                lviProperty.SubItems.Add(strAddress)
                lviProperty.SubItems.Add(strCity)
                lviProperty.SubItems.Add(strState)
                lviProperty.SubItems.Add(strZIPCde)
                lviProperty.SubItems.Add(strBedrooms)
                lviProperty.SubItems.Add(strBathrooms)
                lviProperty.SubItems.Add(strMarketValue)
                lvwProperties.Items.Add(lviProperty)
            End If
    End Sub
  5. Execute the application and create a few properties as follows (the computer will generate the properties numbers)
     
    Altair Realtors
    Altair Realtors
  6. Close the form and return to your programming environment

Managing Sub Items

When you create a new sub-item, it uses a default font and a black color on a white background. If you want, you can change the way a sub-item aesthetically displays. To allow these changes, the ListViewItem class is equipped with the UseItemStyleForSubItems Boolean property, whose default value is true. When this property is set to true, the compiler refers to the item that "owns" the current sub-item to paint the sub-item, as we will see in the next section. If you plan to change these aspects, you must first set this property to false.

After setting the ListViewItem.UseItemStyleForSubItems property to false, you can set the following properties of the ListViewSubItem class as you wish:

  • Font: This allows you to apply a font of your choice for a particular sub-item. This would be done as follows:
     
    Dim lviSweden As ListViewItem = New ListViewItem("Sweden")
    lviSweden.UseItemStyleForSubItems = False
    Dim subSweden As ListViewItem.ListViewSubItem = _
                          New ListViewItem.ListViewSubItem(lviSweden, "449,964")
    . . .
    subSweden = New ListViewItem.ListViewSubItem(lviSweden, "Stockholm")
    subSweden.Font = New Font("Times New Roman", 14, FontStyle.Italic)
    . . .
    Countries Statistics
  • ForeColor: Instead writing a sub-item's text in black, you can assign the desired color to this property to use a different color. This would be done as follows:
     
    Dim subSweden As ListViewItem.ListViewSubItem = _
                          New ListViewItem.ListViewSubItem(lviSweden, "449,964")
    subSweden.ForeColor = Color.Red
    lviSweden.SubItems.Add(subSweden)
    Countries Statistics
  • BackColor: This property allows an individual sub-item to display on top of a specify color. This would be done as follows:
     
    subSweden = New ListViewItem.ListViewSubItem(lviSweden, "8,878,085")
    subSweden.BackColor = Color.Blue
    lviSweden.SubItems.Add(subSweden)
    Countries Statistics

To restore these settings on the sub-item, you can call the ListViewItem.ListViewSubItem.ResetStyle() method. Its syntax is:

Public Sub ResetStyle

When called, this method resets the font, the text color, and the background color.

Managing the Items of a List View

 

The Font, Text Color, and Background of an Item

After adding an item to a list view, the new item assumes some default styles involving the font, the color, and the background. To enhance the appearance of the items, you can change these characteristics that are primarily controlled by the ListViewItem.UseItemStyleForSubItems Boolean property. Its default value is true. You can use it to change the properties of an item as follows:

  • Font: If you assign a new font to the item, this property allows you to apply a font of your choice to a particular sub-item. This would be done as follows:
     
    . . .
    Dim lviAustralia As ListViewItem = New ListViewItem("Australia")
    lviAustralia.Font = New Font("Georgia", 8, FontStyle.Bold)
    Dim subAustralia As ListViewItem.ListViewSubItem = _
                    New ListViewItem.ListViewSubItem(lviAustralia, "7,686,850")
    . . .
    Countries Statistics
  • ForeColor: You can assign the desired color to ListViewItem.ForeColor property to paint the item with a color of your choice. This would be done as follows:
     
    Dim lviSweden As ListViewItem = New ListViewItem("Sweden")
    lviSweden.ForeColor = Color.Red
    Dim subSweden As ListViewItem.ListViewSubItem = _
                          New ListViewItem.ListViewSubItem(lviSweden, "449,964")
    . . .
    Countries Statistics
  • BackColor: The ListViewItem.BackColor property allows you to paint the background of an item with a color of your choice. This would be done as follows:
     
    Dim lviEgypt As ListViewItem = lvwCountries.Items.Add("Egypt")
    lviEgypt.BackColor = Color.Blue
    lviEgypt.SubItems.Add("1,001,450")
    Countries Statistics

Practical LearningPractical Learning: Applying Aesthetic Effects

  1. To apply aesthetic effects, change the Click event of the New Property button as follows:
     
    Private Sub btnNewProperty_Click(ByVal sender As Object, _
                                         ByVal e As System.EventArgs) _
                                         Handles btnNewProperty.Click
            Dim strPropertyNumber As String
            Dim strPropertyType As String
            Dim strAddress As String
            Dim strCity As String
            Dim strState As String
            Dim strZIPCde As String
            Dim strBedrooms As String
            Dim strBathrooms As String
            Dim strMarketValue As String
            Dim rndNumber As Random
            Dim lviProperty As ListViewItem
            Dim dlgProperty As AvailableProperty
    
            ' Get a reference to the Available Property dialog box
            dlgProperty = New AvailableProperty()
    
            ' Create a random number for a property
            rndNumber = New Random(DateTime.Now.Millisecond)
    
            Dim number1 As Integer = rndNumber.Next(100, 999)
            Dim number2 As Integer = rndNumber.Next(100, 999)
            strPropertyNumber = number1 & "-" & number2
    
            ' Prepare to display the property number in the dialog box
            dlgProperty.txtPropertyNumber.Text = strPropertyNumber
            dlgProperty.Text = "Altair Realtors - New Property"
    
            ' Display the Available Property dialog box and
            ' find out if the user clicked OK after using it
            If dlgProperty.ShowDialog() = Windows.Forms.DialogResult.OK Then
                ' After the user had used the Available Property dialog box
                ' and clicked OK, get each value that the user created
                strPropertyType = dlgProperty.cbxPropertyTypes.Text
                strAddress = dlgProperty.txtAddress.Text
                strCity = dlgProperty.txtCity.Text
                strState = dlgProperty.cbxStates.Text
                strZIPCde = dlgProperty.txtZIPCode.Text
                strBedrooms = dlgProperty.txtBedrooms.Text
                strBathrooms = dlgProperty.txtBathrooms.Text
                strMarketValue = dlgProperty.txtMarketValue.Text
    
                ' Display the values in the list view
                lviProperty = New ListViewItem(dlgProperty.txtPropertyNumber.Text)
    
                ' If the house is a single family, paint its line in blue
                ' and paint its background in dark blue
                If strPropertyType = "Single Family" Then
                    lviProperty.BackColor = Color.Navy
                    lviProperty.ForeColor = Color.LightBlue
                    ' If it's a townhouse, paint it in white
                    ' with a dark red background
                ElseIf strPropertyType = "Townhouse" Then
                    lviProperty.BackColor = Color.Brown
                    lviProperty.ForeColor = Color.White
                Else
                    ' For a condo, paint the line in light green
                    ' and set its background to dark green
                    lviProperty.BackColor = Color.DarkGreen
                    lviProperty.ForeColor = Color.Lime
                End If
    
                ' Display the information about each property
                lviProperty.SubItems.Add(strPropertyType)
                lviProperty.SubItems.Add(strAddress)
                lviProperty.SubItems.Add(strCity)
                lviProperty.SubItems.Add(strState)
                lviProperty.SubItems.Add(strZIPCde)
                lviProperty.SubItems.Add(strBedrooms)
                lviProperty.SubItems.Add(strBathrooms)
                lviProperty.SubItems.Add(strMarketValue)
                lvwProperties.Items.Add(lviProperty)
            End If
    End Sub
  2. Execute the application and test the form by creating four different records
     
    Altair Realtors
  3. Close the form and return to your programming environment

Locating a List View Item

The items of a list view are stores in a collection represented by the ListView.Items property. To know the number of items in the list, you can retrieve the value of the ListViewItemCollection.Count property. Each member of this collection has an index represented by the ListViewItemCollection.Index property.

You can also locate an item using the coordinates of a point inside its bounding area. To use this technique, you can call the GetItemAt() method of the ListView class. Its syntax is:

Public Function GetItemAt(x As Integer, y As Integer) As ListViewItem

This method expects the coordinates (x, y) of a point. If an item is found at that point, this method returns it. If there is no item at that point, the method returns 0.

Deleting Items

To delete an item from a list view, you can call the ListViewItemCollection.Remove() method. Its syntax is:

Public Overridable Sub Remove(item As ListViewItem)

This method takes as argument the ListViewItem object to be deleted. If you are already positioned at that item, you can call its own ListViewItem.Remove() method. Its syntax is:

Public Overridable Sub Remove

To delete an item based on its index, you can call the ListViewItemCollection.RemoveAt() method whose syntax is:

Public Overridable Sub RemoveAt(index As Integer)

When calling this method, you must pass the index of the undesired item. If the item is found, it would be deleted. If you provide a negative index or one that is higher than the ListViewItemCollection.Count property, the compiler would throw an ArgumentOutOfRangeException exception.

To delete all items from a list view, you can call the ListViewItem.Clear() method. Its syntax is:

Public Overridable Sub Clear

When called, this method removes all items of the list view.

Characteristics of a List View

 

Column Header Style

If you create the columns of a list view, when the user displays the detail view, the column headers appear and behave like regular buttons. This also means that the user can click a column header and you can take action. If you don't want this appearance and this behavior, you can make the columns appear flat. This characteristics is controlled by the HeaderStyle property of the ListView class. This property is based on the ColumnHeaderStyle enumerator. Its members are:

  • Clickable: This is the default style. The columns headers appear and behave like buttons:
     
    lvwCountries.HeaderStyle = ColumnHeaderStyle.Clickable
    Countries Statistics
  • Nonclickable: The columns are flat and don't change their appearance when the user clicks one:
     
    lvwCountries.HeaderStyle = ColumnHeaderStyle.NonClickable
    Countries Statistics
  • None: No column header appears:
     
    lvwCountries.HeaderStyle = ColumnHeaderStyle.None
    Countries Statistics

Selecting Items in a List View

To select an item in the list, the user can click it. The selected item indicates this by being highlighted. To select another item, the user can click it and this automatically dismisses the previous selection. If you want, you can give the user the ability to select more than one item or you can prevent the user from selecting more than one item. This characteristic is controlled by the MultiSelect property of the ListView class. Its default value is true, which allows the user to select one or more items. If you set it to false, the user can select only one item at a time.

You can also allow the user to select an item by positioning the mouse over it. This characteristic is controlled by the HoverSelection property of the ListView class.

When an item has been selected or more than one item are selected, the selected items are stored in a list represented by the SelectedItems property of the ListView class. The ListView.SelectedItems property is an object based on the ListView.SelectedListViewItemCollection class. If the ListView.MultiSelect property is set to false, this collection would contain only one item.

The number of items selected in the control is known as the Count property of the SelectedListViewItemCollection class. Each item selected can be identified through the Item indexed property of the SelectedListViewItemCollection class.

The SelectedListViewItemCollection class holds a list of the objects that are selected and each is identified as a ListViewItem. If you are more interested in the positions of the items selected and not necessarily their objects, you can use the SelectedIndices property of the ListView class. Each item selected has its index stored in this list. The ListView.SelectedIndices property is based on the ListView.SelectedIndexCollection class.

After selecting an item, if the user clicks another control, the item that was selected would not be highlighted anymore. If you want the control to continue showing the current selection even when the list view loses focus, set the value of the HideSelection Boolean property of the ListView class accordingly.

Full Row Selection

By default, to select an item, the user must click the item itself and not one of its sub-items. If you want an item and its sub-items to be selected when the user clicks anything on their line, you can change the value of the ListView.FullRowSelect Boolean property. Its default value is set to false, which obliges the user to click the item itself. If you set this property to true, the whole row would be highlighted when either you or the user selects it.

Practical Learning Practical Learning: Allowing Full Row Selection

  1. Click the AltairRealtors.vb [Design] tab and click the list view
  2. In the Properties window, double-click FullRowSelect property to set its value to True

Grid Lines

When using the detail view, to make a list view more indicative, you can underline each row. This characteristic is controlled by the GridLines Boolean property of the ListView class. The default value of this property is false. If you set it to true, horizontal grid lines would appear among items throughout the list view, including empty rows:

lvwCountries.GridLines = True
Countries Statistics
 

Practical Learning Practical Learning: Writing Code For a Toolbar

  1. Double-click GridLines to set its value to True
  2. Execute the application and create the list of properties
  3. Close the form

List Items and Check Boxes

Besides, or instead of, icons, you can display check boxes with the items of a list view. This characteristic is controlled by the CheckBoxes property. Its default value is false, which omits displaying the check boxes. If you set it to true, a check box would appear on the left of each item of the list view:

lvwCountries.CheckBoxes = True
Countries Statistics
 
 

Home Copyright © 2008-2012 FunctionX