Introduction

First look at the form.

You can see that items are displayed in dependent groups.

bh1.gif

Now for the code.

Code

Crete an ImageList for storing images in the ListView.

  1. System.Windows.Forms.ImageList myImageList1 = new ImageList();

Set the image size of the images to be displayed in the ListView.
  1. myImageList1.ImageSize = new Size(64, 64);
Now add the images into the ImageList.

Code

  1. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\01.PNG"));
  2. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\02.PNG"));
  3. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\03.PNG"));
  4. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\04.PNG"));
  5. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\05.PNG"));
  6. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\06.PNG"));
  7. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\07.PNG"));
  8. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\08.PNG"));
  9. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\09.PNG"));
  10. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\10.PNG"));
Take another ImageList to also display in the ListView.
  1. System.Windows.Forms.ImageList myImageList2 = new ImageList();
Set the image size smaller than the first ImageList.
  1. myImageList2.ImageSize = new Size(32, 32);
Add images into the second ImageList.
Code
  1. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\01.PNG"));
  2. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\02.PNG"));
  3. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\03.PNG"));
  4. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\04.PNG"));
  5. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\05.PNG"));
  6. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\06.PNG"));
  7. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\07.PNG"));
  8. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\08.PNG"));
  9. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\09.PNG"));
  10. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\10.PNG"));
Now assign the first ImageList as LargeImageList to the ListView.
  1. myListView.LargeImageList = myImageList1;
Assign the second ImageList as SmallImageList to the ListView.
  1. myListView.SmallImageList = myImageList2;
Then add the items to the ListView & also assign the image index to that item. Code
  1. myListView.Items.Add("Item 1", 0);
  2. myListView.Items.Add("Item 2", 1);
  3. myListView.Items.Add("Item 3", 2);
  4. myListView.Items.Add("Item 4", 3);
  5. myListView.Items.Add("Item 5", 4);
  6. myListView.Items.Add("Item 6", 5);
  7. myListView.Items.Add("Item 7", 6);
  8. myListView.Items.Add("Item 8", 7);
  9. myListView.Items.Add("Item 9", 8);
  10. myListView.Items.Add("Item 10", 9);

You can also create Groups in the ListView. If you want to add the Groups in the ListView then the following code will be helpful for you.

In the following code I have created two ListViewGroups with its name & its alignment in the ListView.

Code

  1. ListViewGroup myLVGroup1 = new ListViewGroup("First Five Group", HorizontalAlignment.Left);
  2. ListViewGroup myLVGroup2 = new ListViewGroup("Last Five Group", HorizontalAlignment.Left);
After creating the ListViewGroup as you want, add that group to the ListView:
  1. myListView.Groups.AddRange(new ListViewGroup[] { myLVGroup1, myLVGroup2 });
Finally assign each item to a group.
In the following code the first five items will be in the First group.

Code

  1. myListView.Items[0].Group = myListView.Groups[0];
  2. myListView.Items[1].Group = myListView.Groups[0];
  3. myListView.Items[2].Group = myListView.Groups[0];
  4. myListView.Items[3].Group = myListView.Groups[0];
  5. myListView.Items[4].Group = myListView.Groups[0];
The last five items will be in the second group.

Code

  1. myListView.Items[5].Group = myListView.Groups[1];
  2. myListView.Items[6].Group = myListView.Groups[1];
  3. myListView.Items[7].Group = myListView.Groups[1];
  4. myListView.Items[8].Group = myListView.Groups[1];
  5. myListView.Items[9].Group = myListView.Groups[1];
When the user selects the "Large Icon" RadioButton, it will display items using the Large Icon view.

Code

  1. private void rbLargeIcon_CheckedChanged(object sender, EventArgs e)
  2. {
  3. if (rbLargeIcon.Checked == true)
  4. {
  5. myListView.View = View.LargeIcon;
  6. }
  7. }
The same way for other radio buttons but depending on the selected radio button it will change the view of the ListView.

Code

  1. myListView.View = View.List;
  2. myListView.View = View.SmallIcon;
  3. myListView.View = View.Tile;
Finally it will display the selected item message box when the user selects a particular item from the ListView.

Code

  1. foreach (ListViewItem item in myListView.SelectedItems)
  2. {
  3. MessageBox.Show(item.Text.ToString());
  4. }
The whole code looks like below.

Code

  1. using System;
  2. using System.Drawing;
  3. using System.Windows.Forms;
  4. namespace Article
  5. {
  6. public partial class Form1 : Form
  7. {
  8. public Form1()
  9. {
  10. InitializeComponent();
  11. System.Windows.Forms.ImageList myImageList1 = new ImageList();
  12. myImageList1.ImageSize = new Size(64, 64);
  13. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\01.PNG"));
  14. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\02.PNG"));
  15. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\03.PNG"));
  16. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\04.PNG"));
  17. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\05.PNG"));
  18. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\06.PNG"));
  19. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\07.PNG"));
  20. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\08.PNG"));
  21. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\09.PNG"));
  22. myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\10.PNG"));
  23. System.Windows.Forms.ImageList myImageList2 = new ImageList();
  24. myImageList2.ImageSize = new Size(32, 32);
  25. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\01.PNG"));
  26. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\02.PNG"));
  27. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\03.PNG"));
  28. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\04.PNG"));
  29. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\05.PNG"));
  30. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\06.PNG"));
  31. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\07.PNG"));
  32. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\08.PNG"));
  33. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\09.PNG"));
  34. myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\10.PNG"));
  35. myListView.LargeImageList = myImageList1;
  36. myListView.SmallImageList = myImageList2;
  37. myListView.Items.Add("Item 1", 0);
  38. myListView.Items.Add("Item 2", 1);
  39. myListView.Items.Add("Item 3", 2);
  40. myListView.Items.Add("Item 4", 3);
  41. myListView.Items.Add("Item 5", 4);
  42. myListView.Items.Add("Item 6", 5);
  43. myListView.Items.Add("Item 7", 6);
  44. myListView.Items.Add("Item 8", 7);
  45. myListView.Items.Add("Item 9", 8);
  46. myListView.Items.Add("Item 10", 9);
  47. ListViewGroup myLVGroup1 = new ListViewGroup("First Five Group", HorizontalAlignment.Left);
  48. ListViewGroup myLVGroup2 = new ListViewGroup("Last Five Group", HorizontalAlignment.Left);
  49. myListView.Groups.AddRange(new ListViewGroup[] { myLVGroup1, myLVGroup2 });
  50. myListView.Items[0].Group = myListView.Groups[0];
  51. myListView.Items[1].Group = myListView.Groups[0];
  52. myListView.Items[2].Group = myListView.Groups[0];
  53. myListView.Items[3].Group = myListView.Groups[0];
  54. myListView.Items[4].Group = myListView.Groups[0];
  55. myListView.Items[5].Group = myListView.Groups[1];
  56. myListView.Items[6].Group = myListView.Groups[1];
  57. myListView.Items[7].Group = myListView.Groups[1];
  58. myListView.Items[8].Group = myListView.Groups[1];
  59. myListView.Items[9].Group = myListView.Groups[1];
  61. }
  62. private void rbLargeIcon_CheckedChanged(object sender, EventArgs e)
  63. {
  64. if (rbLargeIcon.Checked == true)
  65. {
  66. myListView.View = View.LargeIcon;
  67. }
  68. }
  69. private void rbList_CheckedChanged(object sender, EventArgs e)
  70. {
  71. if (rbList.Checked == true)
  72. {
  73. myListView.View = View.List;
  74. }
  75. }
  76. private void rbSmallIcon_CheckedChanged(object sender, EventArgs e)
  77. {
  78. if (rbSmallIcon.Checked == true)
  79. {
  80. myListView.View = View.SmallIcon;
  81. }
  82. }
  83. private void rbTile_CheckedChanged(object sender, EventArgs e)
  84. {
  85. if (rbTile.Checked == true)
  86. {
  87. myListView.View = View.Tile;
  88. }
  89. }
  90. private void myListView_SelectedIndexChanged(object sender, EventArgs e)
  91. {
  92. foreach (ListViewItem item in myListView.SelectedItems)
  93. {
  94. MessageBox.Show(item.Text.ToString());
  95. }
  96. }
  97. }
  98. }
See the following images for all kinds of output.

bh2.gif

bh3.gif

bh4.gif

When the user clicks on a particular item then it will display the messagebox with that item name.

Depending on this kind of code you will write your own logic. The code is written in the above part in the "myListView_SelectedIndexChanged" event.

bh5.gif

In the following image you can see the selected item in the red rectangle.

bh6.gif

Next >> ListView in C#