Home

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 LgIcon 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 SmIcon 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 btnLargeIcons Button   LrgIcons.ico False
    RadioButton btnSmallIcons Button   SmIcons.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 void btnLargeIcons_CheckedChanged(object sender, EventArgs e)
{
            lvwStoreItems.View = View.LargeIcon;
}
  27. Return to the form
  28. Double-click the second button from left and implement its event as follows:
      
    private void btnSmallIcons_CheckedChanged(object sender, EventArgs e)
{
            lvwStoreItems.View = View.SmallIcon;
}
  29. Return to the form
  30. Double-click the third button from left and implement its event as follows:
      
    private void btnList_CheckedChanged(object sender, EventArgs e)
{
            lvwStoreItems.View = View.List;
}
  31. Return to the form
  32. Double-click the second button from right and implement its event as follows:
      
    private void btnDetails_CheckedChanged(object sender, EventArgs e)
{
            lvwStoreItems.View = View.Details;
}
  33. Return to the form
  34. Double-click the Close button and implement its Click events as follows:
      
    private void btnClose_Click(object sender, EventArgs e)
{
            Close();
}
  35. Return to the form
  36. Execute the application and click the buttons on the form
  37. 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 Misc 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. In the Toolbox, click ImageList and click the form
  38. In the Properties window, change its name to imgLarge
  39. Change the ImageSize to 32, 32
  40. Click the ellipsis button of the Images field
  41. In Image Collection Editor, click Add
  42. Locate the folder that contains the current project and display it in the Look In combo box
  43. Select Babies.ico and click Open
  44. In the same way, add the other pictures in the following order: Teens.ico, Women.ico, Men.ico, and Misc.ico
  45. Click OK
  46. In the Toolbox, click ImageList and click the form
  47. In the Properties window, change its name to imgSmall
  48. In the Properties window, click the ellipsis button of the Images field
  49. In Image Collection Editor, click Add
  50. Select Babies.ico, Teens.ico, Women.ico, Men.ico, and Misc.ico
  51. Click OK
  52. On the form, click the list view
  53. In the Properties window, Set LargeImageList to imgLarge
  54. Set the SmallImageList property to imgSmall
  55. Click Items and click its ellipsis button
  56. 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
  57. 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
  58. Click OK
     
    Department Store
  59. Execute the application to test it
  60. Close the form and return to your programming environment
 
Previous Copyright © 2007 FunctionX, Inc. Next