Reader Level:
ARTICLE

ListView in C#

Posted by Ghanashyam Nayak Articles | ASP.NET Programming February 15, 2012
In this article you will learn how to use the ListView Control. You will also learn to add items into the ListView. Also how to assign images to each items. You will also know how to create the groups int a Listview & how to assign a group to each item to display items in the Groups view in a ListView.
  • 0
  • 0
  • 24363
Download Files:
 

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

COMMENT USING

Trending up