none
Add images to Listview control in C#.net with 3.5 frame work. RRS feed

  • Question

  • Hi,
       I am using C#.net with 3.5 frame work. I have a form having a listview and imagelist controls. i want to add images from a folder to listview. How can i do this with these controls.

    Regards,
    Sujith.
    Tuesday, May 13, 2008 11:10 AM

Answers

  • Hi, Sujith

    Thanks for your post.

    If you want to do this in the designer, you can take the following steps to add the images to the ListView control:

    1. Switch to the designer, click on the ImageList component on the Component Tray, there will be a smart tag appear on the top-right corner of the ImageList.
    2. Click the smart tag, and click "Choose Images" on the pane.
    3. On the pop-up Image Collection Editor dialog, choose the images from the folder your want.
    4. Click OK to finish adding images to the ImageList.
    5. Click the ListView on the form, there will be a smart tag appear on the top-right corner.
    6. Click the smart tag, you will find there're three ComboBoxes there, choose a ImageList from the list as you want.
    7. Click the "Add items" option on the smart tag, a ListViewItem Collection Editor will appear, you can add items to the ListView, it's important here to set the ImageIndex or ImageKey property, or the image won't appear.
    8. Click OK to finish item editing, now you'll find the images are displayed on the ListView.

    If you want to add the images to the ListView by code, you can do something like this

    Code Snippet

    private void Form10_Load(object sender, EventArgs e)

            {

                DirectoryInfo dir = new DirectoryInfo(@"c:\pic");

                foreach (FileInfo file in dir.GetFiles())

                {

                    try

                    {

                        this.imageList1.Images.Add(Image.FromFile(file.FullName));

                    }

                    catch{

                        Console.WriteLine("This is not an image file");

                    }

                }

                this.listView1.View = View.LargeIcon;

                this.imageList1.ImageSize = new Size(32, 32);

                this.listView1.LargeImageList = this.imageList1;

                //or

                //this.listView1.View = View.SmallIcon;

                //this.listView1.SmallImageList = this.imageList1;

     

                for (int j = 0; j < this.imageList1.Images.Count; j++)

                {

                    ListViewItem item = new ListViewItem();

                    item.ImageIndex = j;

                    this.listView1.Items.Add(item);

                }

            }

     

     



    Hope this helps.

    Windows Forms Forum Support Team
    Windows Forms General FAQ
    DataBinding and Data Controls FAQ

    Best Regards
    Zhi-xin Ye

    Friday, May 16, 2008 10:14 AM

All replies

  • Off-topic in the VSTO forum. VSTO is a set of tools for extending the UI of some Office 2003 and 2007 applications. WinForms questions are not supported here. I'm moving your question to a forum supporting Windows Forms.

     

    Tuesday, May 13, 2008 3:30 PM
  • Hi, Sujith

    Thanks for your post.

    If you want to do this in the designer, you can take the following steps to add the images to the ListView control:

    1. Switch to the designer, click on the ImageList component on the Component Tray, there will be a smart tag appear on the top-right corner of the ImageList.
    2. Click the smart tag, and click "Choose Images" on the pane.
    3. On the pop-up Image Collection Editor dialog, choose the images from the folder your want.
    4. Click OK to finish adding images to the ImageList.
    5. Click the ListView on the form, there will be a smart tag appear on the top-right corner.
    6. Click the smart tag, you will find there're three ComboBoxes there, choose a ImageList from the list as you want.
    7. Click the "Add items" option on the smart tag, a ListViewItem Collection Editor will appear, you can add items to the ListView, it's important here to set the ImageIndex or ImageKey property, or the image won't appear.
    8. Click OK to finish item editing, now you'll find the images are displayed on the ListView.

    If you want to add the images to the ListView by code, you can do something like this

    Code Snippet

    private void Form10_Load(object sender, EventArgs e)

            {

                DirectoryInfo dir = new DirectoryInfo(@"c:\pic");

                foreach (FileInfo file in dir.GetFiles())

                {

                    try

                    {

                        this.imageList1.Images.Add(Image.FromFile(file.FullName));

                    }

                    catch{

                        Console.WriteLine("This is not an image file");

                    }

                }

                this.listView1.View = View.LargeIcon;

                this.imageList1.ImageSize = new Size(32, 32);

                this.listView1.LargeImageList = this.imageList1;

                //or

                //this.listView1.View = View.SmallIcon;

                //this.listView1.SmallImageList = this.imageList1;

     

                for (int j = 0; j < this.imageList1.Images.Count; j++)

                {

                    ListViewItem item = new ListViewItem();

                    item.ImageIndex = j;

                    this.listView1.Items.Add(item);

                }

            }

     

     



    Hope this helps.

    Windows Forms Forum Support Team
    Windows Forms General FAQ
    DataBinding and Data Controls FAQ

    Best Regards
    Zhi-xin Ye

    Friday, May 16, 2008 10:14 AM
  • Hi,
       Thanks for your reply.

    Regards,
    Sujith
    Monday, May 26, 2008 10:31 AM
  • hi,
    this is very useful and its working fine. I am using listview in WPF in this i dont see any such properties like  this.listView1.LargeImageList = this.imageList1; i want to show images in WPF Listview. How to approch this. Please help me out.

    Thank You,
    Sarada
    Tuesday, May 5, 2009 8:35 AM
  • Hi,

    Thanks a lot for the perfect solution for this problem......


    Tuesday, December 22, 2009 9:43 AM
  • Hi,

    Thanks a lot for the perfect solution for this problem......

    Now i want to get the name of the selected image name in the list view on click Event. How i do that ?....

    kindly guide me asap.


    Tuesday, December 22, 2009 10:42 AM
  • Hi, Sujith

    Thanks for your post.

    If you want to do this in the designer, you can take the following steps to add the images to the ListView control:

    1. Switch to the designer, click on the ImageList component on the Component Tray, there will be a smart tag appear on the top-right corner of the ImageList.
    2. Click the smart tag, and click "Choose Images" on the pane.
    3. On the pop-up Image Collection Editor dialog, choose the images from the folder your want.
    4. Click OK to finish adding images to the ImageList.
    5. Click the ListView on the form, there will be a smart tag appear on the top-right corner.
    6. Click the smart tag, you will find there're three ComboBoxes there, choose a ImageList from the list as you want.
    7. Click the "Add items" option on the smart tag, a ListViewItem Collection Editor will appear, you can add items to the ListView, it's important here to set the ImageIndex or ImageKey property, or the image won't appear.
    8. Click OK to finish item editing, now you'll find the images are displayed on the ListView.

    If you want to add the images to the ListView by code, you can do something like this

    Code Snippet

    private void Form10_Load(object sender, EventArgs e)

            {

                DirectoryInfo dir = new DirectoryInfo(@"c:\pic");

                foreach (FileInfo file in dir.GetFiles())

                {

                    try

                    {

                        this.imageList1.Images.Add(Image.FromFile(file.FullName));

                    }

                    catch{

                        Console.WriteLine("This is not an image file");

                    }

                }

                this.listView1.View = View.LargeIcon;

                this.imageList1.ImageSize = new Size(32, 32);

                this.listView1.LargeImageList = this.imageList1;

                //or

                //this.listView1.View = View.SmallIcon;

                //this.listView1.SmallImageList = this.imageList1;

     

                for (int j = 0; j < this.imageList1.Images.Count; j++)

                {

                    ListViewItem item = new ListViewItem();

                    item.ImageIndex = j;

                    this.listView1.Items.Add(item);

                }

            }

     

     

     



    Hope this helps.

    Windows Forms Forum Support Team
    Windows Forms General FAQ
    DataBinding and Data Controls FAQ

    Best Regards
    Zhi-xin Ye

     

     

    Hi Zhi-Xin Ye,
    Thank you very much. I was wondering why the images are not displayed when the application is executed. Now after reading the article posted by you I unerstood that I have to Image index property. I was searchin for a solution from almost a day, finally its working now. However the image is displayed with a white square box around it. now have to search how to make it transparent or to have it the back color of the listview.

    thank you again,
    have a nice time
    Friday, January 1, 2010 6:16 PM
  • very helpful post solved my problem thnx..
    Saturday, January 2, 2010 3:14 PM
  • How many icon images should I put in  c:\pic. Is there any process to load windows default Icon for each file.
    pawan kumar saw
    Wednesday, December 1, 2010 7:56 AM
  • Zhi-xin Ye ....Thanks for "The best" solution!!!
    Sunday, July 24, 2011 9:04 PM
  • I can easily tell from the response that will quite work well (for the problem posted). I was particularly looking for something different: displaying images in a dataGrid combo column that I believe are read from an ImageList:  perhaps same problem except that I'm interested when using a dataGrid combo box column...thanks (chagbert).
    Thursday, May 10, 2012 3:10 PM
  • if i set  the   listviewl.view  = view.details;

    and also want to show an icon  at the fisrt column   how can  I  do it  in code  Thx.


    Thx

    Thursday, November 22, 2012 8:58 AM