Add image to listbox

Question

I have a few images with some text, I need to show the image with the relevant text in a listbox.

Browsing google I came across this sample class,

public class Customer
{

    public string Fname;

    public string Lname;

public Customer(string firstName, string lastName)
{
    Fname = firstName;
    Lname = lastName;
}

public override string ToString()
{
    return Fname + " " + Lname;
}
}

lstCustomers.Items.Add(new Customer("Foo","Bar"));

The above code works fine as it only returns string, how do I return an image and a string together so that it gets added to the listbox?

Best Regards

@nand

Answer 1

Just use a DataTemplate to display your objects in the ListBox.

Create a data object that contains string properties and an Image property:

public class Img
{
    public Img(string value, Image img) { Str = value; Image = img; }
    public string Str { get; set; }
    public Image Image { get; set; }
}

Create a DataTemplate to display this:

<ListBox x:Name="lstBox">
    <ListBox.ItemTemplate>
        <DataTemplate DataType="{x:Type local:Img}">
            <StackPanel>
                <TextBlock Margin="3" Text="{Binding Str}"/>
                <ContentControl Margin="3" Content="{Binding Image}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Now add the Img items (or your data objects) to the ListBox like so:

lstBox.Items.Add(new Img("Value", myImage));

Answer 2

first put in ValueMemeber Image property (in here is String property too) and DrawMode to OwnerDrawVariable and redefine DrawItem

listbox1.DrawItem += new DrawItemEventHandler(listbox1_DrawItem);
listbox1.ItemHeight = 16;

private void listbox1_DrawItem(object sender, DrawItemEventArgs e)
       { 
e.DrawBackground();
        e.DrawFocusRectangle();
        Rectangle bounds = e.Bounds;
        Size imageSize = new Size(16, 16);
        Bitmap b;
        StringFormat sf = new StringFormat();
        sf.Alignment = StringAlignment.Far;
        Rectangle rc = new Rectangle(e.Bounds.X + 1, e.Bounds.Y + 1, e.Bounds.Width - 5, e.Bounds.Height - 3);
         UseObject s ;
         if (e.Index >= 0)
         {
             s = (UseObject)listbox1.Items[e.Index];

             b = new Bitmap(s.Img, imageSize);
             e.Graphics.DrawImage(b, e.Bounds.X, e.Bounds.Y);
             e.Graphics.DrawString(s.Str, new Font("Verdana", 10, FontStyle.Bold), new SolidBrush(Color.Black), rc, sf);
         }
        }

Answer 3

You can add bitmapsource objects to a listboxitem and add it to listbox. Check this thread. http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/f6b7f985-f11b-4d7f-845a-44851360ee1f/

Answer 4

You can't (without hacking around) put images in ListBoxes.

You can put them in ListViews.

You need to put your image(s) in an ImageList component, then attach the ImageList to your listview. Of course, you can encapsulate your image in your class by adding an Image property and adding that to the ImageList.Items collection.

Then for each ListViewItem in the List, set the ImageIndex property to the index of the image in the listview.

All this can be done using the designer.

Answer 5

In reply to the question from Abbassi - but I got an error "local" is an undeclared namespace

Refer the following:

Add "local" namespace in Window tag.

<Window x:Class="MyApp.MyWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MyWindow" Height="400" Width="600"
    xmlns:local="clr-namespace:MyApp">