Question

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.