Show Images in WPF ListBox

Question

Hi All,

I'm trying to display images stored in MSSql Db as varbinary, when execute my code it just hangs itself

Code is as follows...

XAML

<Window x:Class="ImageList.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:ImageList"
    Title="Window1" Height="331" Width="575">
    <Window.Resources>
        <local:BinaryImageConverter x:Key="imgConverter" />
    </Window.Resources>
    <StackPanel>
        <ListBox Name="lstImages" ItemsSource="{Binding}" >
            <ListBox.Resources>
                <DataTemplate x:Key="data">
                    <Image Source="{Binding Path=ImageData, Converter={StaticResource imgConverter}}"/>
                </DataTemplate>
            </ListBox.Resources>
        </ListBox>        
        <Button  Height="25" Name="button1" Click="button1_Click">Button</Button>
        <Button  Height="25" Name="button2" Click="button2_Click">Load Images</Button>
    </StackPanel>
</Window>

C#

{
       private void button2_Click(object sender, RoutedEventArgs e)
        {
            ImageDataContext db = new ImageDataContext();
            var data = db.ImageDetails.Select(p => p.ImageData).ToList();
            lstImages.ItemsSource = data;
        }

    }

    public class BinaryImageConverter : IValueConverter
    {
        object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value != null && value is byte[])
            {
                byte[] ByteArray = value as byte[];
                BitmapImage bmp = new BitmapImage();
                bmp.BeginInit();
                bmp.StreamSource = new MemoryStream(ByteArray);
                bmp.EndInit();
                return bmp;
            }
            return null;
        }

        object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new Exception("The method or operation is not implemented.");
        }
    }

Answer 1

I'll take a stab at this.

Each item in your ListBox is binding to a property called "ImageData":

<Image Source="{Binding Path=ImageData, Converter={StaticResource imgConverter}}"/>

... but when you set up the list that you're binding your ListBox to, you're just selecting the ImageData properties into a list:

var data = db.ImageDetails.Select(p => p.ImageData).ToList();
lstImages.ItemsSource = data;

So what you'll end up with here is a List<byte[]> or something, rather than a list of objects with an ImageData property.

If my guess is right, you have two options:

1. Change the binding to bind directly to the image:

<Image Source="{Binding Converter={StaticResource imgConverter}}"/>

2. Change the linq query to create objects with an ImageData property:

var data = db.ImageDetails.Select(p => new { ImageData = p.ImageData.ToArray() }).ToList();
lstImages.ItemsSource = data;

Edit Added the ToArray() call to the linq query to reflect Prashant's findings.