How to show image in WPF ListView Control from SQL DataBase

Question

Hi,

I am storing Images in SQL Server 2005 in Binary format. I am retrieving these information from database and binding to List View Control.
But Images are not showing.

XAML Code:
=======
<ListView x:Name='lstMenus' HorizontalAlignment="Left" VerticalAlignment="Top"
                                  SelectionChanged="mySelectionChanged"
                                  SelectionMode="Multiple"
                                  sdk:GridViewSort.Command="{Binding SortCommand}"
                                  sdk:GridViewSort.AutoSort="True"
                              GridViewColumnHeader.Click="GridViewColumnHeaderClickedHandler">

                            <ListView.View>
                                <GridView x:Name="menuGrid" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto">
                                    <GridViewColumn x:Name="menuId" Header="MenuId" Width="0"/>
                                    <GridViewColumn x:Name="chkMenu" CellTemplate="{StaticResource FirstCell}" Width="25"/>
                                    <GridViewColumn x:Name="projectName" Header="ProjectName" Width="100"/>
                                    <GridViewColumn x:Name="menuName" Header="MenuName" Width="100" />
                                    <GridViewColumn x:Name="parentMenu" Header="ParentMenu" Width="100" />
                                    <GridViewColumn x:Name="menuImage" CellTemplate="{StaticResource PhotoTemplate}" Header="MenuImage" Width="0"/>
                                    <GridViewColumn x:Name="menuDescription" Header="MenuDescription" Width="100"/>
                                </GridView>
                            </ListView.View>
                        </ListView>

In codebehind:
=========

DataTable dtAllMenus = new DataTable();
            try
            {
                dtAllMenus = menuManager.GetAllMenus().Tables[0];
                if (dtAllMenus.Rows.Count > 0)
                {
                    lstMenus.ItemsSource = dtAllMenus.DefaultView;
                    menuId.DisplayMemberBinding = new Binding ("menuid");                   
                    menuName.DisplayMemberBinding = new Binding("menuname");
                    parentMenu.DisplayMemberBinding = new Binding("parentmenu");
                    projectName.DisplayMemberBinding = new Binding("projectname");
                    menuDescription.DisplayMemberBinding = new Binding("menudesc");
                    menuImage.DisplayMemberBinding = new Binding("menuimage");

                    Binding bind = new Binding();
                    lstMenus.DataContext = dtAllMenus;

                    lstMenus.SetBinding(ListView.ItemsSourceProperty, bind);  
                }
            }
            catch (Exception ex)
            {
                      throw ex;
            }

here the problem is i am storing Image in Binary format. How can i Bind the Image

Can any one please help me...

Answer 1

You haven't shown your "PhotoTemplate" but I'm assuming you're using an Image element.

The Image element needs an ImageSource as its Source.  You could use a converter on the Image's Source binding that converts the binary data to an ImageSource.

For example, if the binary data is in JPEG format, your converter could do something like this:

    byte[] binaryimagedata = ...binary database data...;
    Stream imageStreamSource = new MemoryStream(binaryimagedata, false);
    JpegBitmapDecoder decoder = new JpegBitmapDecoder(imageStreamSource, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.OnLoad);
    BitmapSource bitmapSource = decoder.Frames[0];
    imageStreamSource.Close();
    return bitmapSource;

---

Mark Salsbery Microsoft MVP - Visual C++

Answer 2

Here's a more complete example (untested :))

    [System.Windows.Data.ValueConversion(typeof(byte[]), typeof(ImageSource))]
    public class BinaryJPEGToImageSourceConverter : System.Windows.Data.IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            byte[] binaryimagedata = value as byte[];
            Stream imageStreamSource = new MemoryStream(binaryimagedata, false);
            JpegBitmapDecoder decoder = new JpegBitmapDecoder(imageStreamSource, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.OnLoad);
            BitmapSource bitmapSource = decoder.Frames[0];
            imageStreamSource.Close();
            return bitmapSource;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

---

Mark Salsbery Microsoft MVP - Visual C++

Answer 3

Very Interesting!

but how would the Image's Source binding which converts(calls the method)look like?

Thank you

---

More of myself: http://www.richter-web.info

Answer 4

>> how would the Image's Source binding which converts(calls the method)look like?

    <Window.Resources>
        <local:BinaryJPEGToImageSourceConverter x:Key="BinaryJPEGToImageSourceConverter" />
    </Window.Resources>

...

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

I just tested that with a dummy converter that makes a 100x100 pixel yellow square image:

    [System.Windows.Data.ValueConversion(typeof(byte[]), typeof(ImageSource))]
    public class BinaryJPEGToImageSourceConverter : System.Windows.Data.IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            UInt32[] binaryimagedata = new UInt32[100 * 100];
            for (long i = 0; i < 10000; i++)
                binaryimagedata[i] = 0xFFFFFF00;
            BitmapSource bitmapSource = BitmapSource.Create(100, 100, 96, 96, PixelFormats.Pbgra32, null, binaryimagedata, 400);
            return bitmapSource;
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

For actual use, to get an array passed to the converter, you'd need to set the binding path to bind to an array:

<Image Source="{Binding Path=somearrayproperty, Converter={StaticResource BinaryJPEGToImageSourceConverter}}" />

---

Mark Salsbery Microsoft MVP - Visual C++