WPF Listbox Images from a database

Question

Hi guys!

(How long have we been using OpenIDs? I don't seem to have one connected to any provider and no FAQ on the planet seems to tell you what to do when you lose your OpenID. I've had to create a new account. Argh!)

I'm trying to fill a (carousel) listbox from a database, but I can't get the images to display. Every single example on the net assumes you have two or three jpegs in a folder instead of in memory :(

My item class is:

public class PicCollection : ObservableCollection<CarouselItem>
{
    public PicCollection()
    {

    }
}
public class CarouselItem
{
    public int ItemID { get; set; }
    public string ItemName { get; set; }
    public string ItemDesc { get; set; }
    public Image ItemImage { get; set; }

    public CarouselItem(int NewItemID, string NewItemName, string NewItemDesc, Image newItemImage)
    {
        this.ItemID = NewItemID;
        this.ItemName = NewItemName;
        this.ItemDesc = NewItemDesc;
        this.ItemImage = newItemImage;
    }
}

I fill a PicCollection successfully from the db(using a byte array for the image), and try to display the name and image with

    <DataTemplate x:Key="TestDataTemplate2"  >
        <StackPanel Orientation="Horizontal">
            <TextBlock x:Name="CarName" 
                           Text="{Binding ItemName}"  
                           Padding="15,15"
                           Foreground="Yellow" />
            <Image Source="{Binding Source=ItemImage}"
       Stretch="Fill" />
            </StackPanel>
    </DataTemplate>

Listbox is simply:

< ListBox Name="lstTest" ItemsSource="{StaticResource TestDataSource}" ItemTemplate="{StaticResource TestDataTemplate2}">

ItemName displays ok, ItemImage does not. I've tried "{Binding ItemImage}" as well. Most examples use "{Binding Path=ItemImage}" but that's where the ItemImage would be a string containing the path, not the actual image itself.

I'm pulling my hair out. Nothing I do makes the images appear. If I create an image control and manually assign the contents of an ItemImage, however, it displays fine. What am I doing wrong?

Answer 1

Since your "ItemImage" property is already an image, you might be able to get away with just using a ContentControl to display the image directly:

<ContentControl Content="{Binding Image}" />

Answer 2

Your ItemImage property is an Image (control). Make it an ImageSource, such as a System.Windows.Media.Imaging.BitmapImage. Then you can bind <Image Source="{Binding ItemImage}" />.