How to Add Icons for Items in a ListBox

[Behseini]

Hi Everone,

Can You please let me know how I can add icon(image) before items in a listbox.I have a simple code for listing database elements in a listbox and I would like to add icon for each element.For example a table icon before tables(like MS Access Table List or Ms SQL Server Object Explorer).
I am not sure if this possible but I realy apreciate your time if you can help me on this?

regards,

[Mitja Bonca]

Iam affraid you cannot put images into a listBox (without any additional hacking of the code).
I would better suggest you to use ListView, which is meant for it.8df

Images to lsitview:

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

        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);
            }
        }

[ntnptl0]

How to add imagename? above code shows only icons in listview .

[Fenrir()]

I have a simple code for listing database elements in a listbox and I would like to add icon for each element

Just to explain this abit simpler seeing as you already have your database elements.

I have an ImageList with 3 images inside (Excel Document,PDF,Word)
I have 3 lines in want to add to my ListView (Document.xls,Document.pdf,Document.doc)

So when populating the ListView i want it do display as followed

Excel Document(Image) -> Document.xls
PDF(Image) -> Document.pdf
Word(Image) -> Document.doc

so i would write a simple switch statement to determine which item gets what icon depending on the extension when i create my ListViewItem "lvi"

switch (item.Substring(item.IndexOf(".")+1))
{
  case "xls":
    lvi.ImageIndex = 0; //The Index of the Excel Document Icon in my image list
  break;
  case "doc":
    lvi.ImageIndex = 1; // The Index of my Word Document Icon in my image list
  break;
  case "pdf":
    lvi.ImageIndex = 2; // The Index of my Pdf Document Icon in my image list
  break;
 }

[macgurl70]

Try using a DataTemplate for the ListBoxItems - this will allow you to format how you want each of the items to appear in the ListBox.

For this example I will make the following assumptions - you can correct if necessary (which it probably will be since I don't know the data base :) )

the item's text or name is under "Name" in the database and the information for the location of the image is under "Image" in the database.The steps are based off of this Basic Tutorial for applying a DataTemplate to a ListBox.

My steps would be:

1. Create a ResourceDictionary for the template and name it BasicTemplatesStyles.xaml. I usually create a new folder called "Styles" - this way as I keep all of my defined styles and templates in one area. If I am working on a large project, I will usually separate styles depending on how or where they are used and this helps me keep them organized.

   <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
   </ResourceDictionary>
   

2. Create the DataTemplate for the ListBoxItem

   <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
   
   <DataTemplate x:Key="myListBoxItem">
       <Grid>
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="20"/>
               <ColumnDefinition />
           </Grid.ColumnDefinitions>
           <Image Grid.Column="0" Width="16" HorizontalAlignment="Center"
                   VerticalAlignment="Center" Source="{Binding Path=Image}"/>
           <TextBlock Text="{Binding Path=Name}"/>
       </Grid>
   </DataTemplate>
   
   </ResourceDictionary>
   

3. This step is to make sure that your ListBox can locate this DataTemplate. Open your App.xaml file. You will insert the location of this file in the Application.Resources.

   <Application x:Class="MyApplication.App"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
       <Application.Resources>
           <ResourceDictionary>
               <ResourceDictionary.MergedDictionaries>
                   <ResourceDictionary Source="Styles/BasicTemplatesStyles.xaml"/>
               </ResourceDictionary.MergedDictionaries>
           </ResourceDictionary>
       </Application.Resources>
   
   </Application>
   

4. Define the ItemTemplate where you are placing your ListBox.

Hope this helps you a bit,or leads you in the direction you need for the solution.