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.
System.Windows.Forms.ImageList myImageList1 = new ImageList();
Set the image size of the images to be displayed in the ListView.
myImageList1.ImageSize = new Size(64, 64);
Now add the images into the ImageList.
Code
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\01.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\02.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\03.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\04.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\05.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\06.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\07.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\08.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\09.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\10.PNG"));
Take another ImageList to also display in the ListView.
System.Windows.Forms.ImageList myImageList2 = new ImageList();
Set the image size smaller than the first ImageList.
myImageList2.ImageSize = new Size(32, 32);
Add images into the second ImageList.
Code
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\01.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\02.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\03.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\04.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\05.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\06.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\07.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\08.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\09.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\10.PNG"));
Now assign the first ImageList as LargeImageList to the ListView.
myListView.LargeImageList = myImageList1;
Assign the second ImageList as SmallImageList to the ListView.
myListView.SmallImageList = myImageList2;
Then add the items to the ListView & also assign the image index to that item.
Code
myListView.Items.Add("Item 1", 0);
myListView.Items.Add("Item 2", 1);
myListView.Items.Add("Item 3", 2);
myListView.Items.Add("Item 4", 3);
myListView.Items.Add("Item 5", 4);
myListView.Items.Add("Item 6", 5);
myListView.Items.Add("Item 7", 6);
myListView.Items.Add("Item 8", 7);
myListView.Items.Add("Item 9", 8);
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
ListViewGroup myLVGroup1 = new ListViewGroup("First Five Group", HorizontalAlignment.Left);
ListViewGroup myLVGroup2 = new ListViewGroup("Last Five Group", HorizontalAlignment.Left);
After creating the ListViewGroup as you want, add that group to the ListView:
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
myListView.Items[0].Group = myListView.Groups[0];
myListView.Items[1].Group = myListView.Groups[0];
myListView.Items[2].Group = myListView.Groups[0];
myListView.Items[3].Group = myListView.Groups[0];
myListView.Items[4].Group = myListView.Groups[0];
The last five items will be in the second group.
Code
myListView.Items[5].Group = myListView.Groups[1];
myListView.Items[6].Group = myListView.Groups[1];
myListView.Items[7].Group = myListView.Groups[1];
myListView.Items[8].Group = myListView.Groups[1];
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
private void rbLargeIcon_CheckedChanged(object sender, EventArgs e)
{
if (rbLargeIcon.Checked == true)
{
myListView.View = View.LargeIcon;
}
}
The same way for other radio buttons but depending on the selected radio button it will change the view of the ListView.
Code
myListView.View = View.List;
myListView.View = View.SmallIcon;
myListView.View = View.Tile;
Finally it will display the selected item message box when the user selects a particular item from the ListView.
Code
foreach (ListViewItem item in myListView.SelectedItems)
{
MessageBox.Show(item.Text.ToString());
}
The whole code looks like below.
Code
using System;
using System.Drawing;
using System.Windows.Forms;
namespace Article
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
System.Windows.Forms.ImageList myImageList1 = new ImageList();
myImageList1.ImageSize = new Size(64, 64);
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\01.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\02.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\03.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\04.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\05.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\06.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\07.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\08.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\09.PNG"));
myImageList1.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\10.PNG"));
System.Windows.Forms.ImageList myImageList2 = new ImageList();
myImageList2.ImageSize = new Size(32, 32);
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\01.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\02.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\03.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\04.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\05.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\06.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\07.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\08.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\09.PNG"));
myImageList2.Images.Add(Image.FromFile(@"C:\Users\Indus_User\Desktop\Icons\W\10.PNG"));
myListView.LargeImageList = myImageList1;
myListView.SmallImageList = myImageList2;
myListView.Items.Add("Item 1", 0);
myListView.Items.Add("Item 2", 1);
myListView.Items.Add("Item 3", 2);
myListView.Items.Add("Item 4", 3);
myListView.Items.Add("Item 5", 4);
myListView.Items.Add("Item 6", 5);
myListView.Items.Add("Item 7", 6);
myListView.Items.Add("Item 8", 7);
myListView.Items.Add("Item 9", 8);
myListView.Items.Add("Item 10", 9);
ListViewGroup myLVGroup1 = new ListViewGroup("First Five Group", HorizontalAlignment.Left);
ListViewGroup myLVGroup2 = new ListViewGroup("Last Five Group", HorizontalAlignment.Left);
myListView.Groups.AddRange(new ListViewGroup[] { myLVGroup1, myLVGroup2 });
myListView.Items[0].Group = myListView.Groups[0];
myListView.Items[1].Group = myListView.Groups[0];
myListView.Items[2].Group = myListView.Groups[0];
myListView.Items[3].Group = myListView.Groups[0];
myListView.Items[4].Group = myListView.Groups[0];
myListView.Items[5].Group = myListView.Groups[1];
myListView.Items[6].Group = myListView.Groups[1];
myListView.Items[7].Group = myListView.Groups[1];
myListView.Items[8].Group = myListView.Groups[1];
myListView.Items[9].Group = myListView.Groups[1];
}
private void rbLargeIcon_CheckedChanged(object sender, EventArgs e)
{
if (rbLargeIcon.Checked == true)
{
myListView.View = View.LargeIcon;
}
}
private void rbList_CheckedChanged(object sender, EventArgs e)
{
if (rbList.Checked == true)
{
myListView.View = View.List;
}
}
private void rbSmallIcon_CheckedChanged(object sender, EventArgs e)
{
if (rbSmallIcon.Checked == true)
{
myListView.View = View.SmallIcon;
}
}
private void rbTile_CheckedChanged(object sender, EventArgs e)
{
if (rbTile.Checked == true)
{
myListView.View = View.Tile;
}
}
private void myListView_SelectedIndexChanged(object sender, EventArgs e)
{
foreach (ListViewItem item in myListView.SelectedItems)
{
MessageBox.Show(item.Text.ToString());
}
}
}
}
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]()