Images in ListView

Question

Hello,

I want to display images within a ListView control. The image data is retrieved from a database table. I don't have any ideas of how to make the images show up.

All the examples I found on the web showed how to display images that are loaded from a file.

Can somebody help me here?

Answer 1

Hi,

Displaying the image in the ListView is the main part from the WPF perspective. Where you get the image from usually is not that important. What format are you using for the images in your database? Are these JPEGs, BMPs, ...?

John

Answer 2

I think I figured it out. I use a CellTemplate and a value converter to display the images. Here is an example of how to display the images from the Employees table of the Northwind database:

        <DataTemplate x:Key="PhotoTemplate">
            <Image Source="{Binding Photo, Converter={StaticResource converter}}" Width="48" Height="48"/>
        </DataTemplate>

...

        <ListView ItemsSource="{Binding}">
            <ListView.View>
                <GridView>
                    <GridViewColumn DisplayMemberBinding="{Binding FirstName}" Header="First Name" Width="100"/>
                    <GridViewColumn DisplayMemberBinding="{Binding LastName}" Header="Last Name" Width="100"/>
                    <GridViewColumn Header="Photo" CellTemplate="{StaticResource PhotoTemplate}"/>
                </GridView>
            </ListView.View>
        </ListView>


    public class ImageConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            byte[] photo = ((Binary)value).ToArray();

            MemoryStream ms = new MemoryStream(photo, 78, photo.Length - 78);

            BitmapImage myBitmapImage = new BitmapImage();

            myBitmapImage.BeginInit();
            myBitmapImage.StreamSource = ms;
            myBitmapImage.DecodePixelWidth = 200;
            myBitmapImage.EndInit();

            return myBitmapImage;
        }

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

Answer 3

Thank you, that helped me a lot to get my feets on the ground!
Cheers
  Matze

Answer 4

How do you do this strictly in code (no XAML)? I am adding data items that are dynamicaly generated and can't be bound.

Answer 5

I get the error: "Error 2 StaticResource reference 'converter' was not found."

Following is my XAML. Can you give pointers on what is wrong? 

<Window.Resources>
<DataTemplate x:Key="PhotoTemplate">
<DockPanel>
<Image Source="{Binding Default, Converter={StaticResource converter}}" Width="48" Height="48"/>
</DockPanel>
</DataTemplate>
<pb:ImageConverter x:Key="converter" />
</Window.Resources> 
:
:
:
<StackPanel Margin="0,10,0,0" Orientation="Horizontal">
<ListView x:Name="listviewPrinters"
Margin="5,0,5,0" 
HorizontalAlignment="Center" 
VerticalAlignment="Center" 
Height="300" 
Width="780"
AlternationCount="2" 
MouseDoubleClick="listviewPrinters_MouseDoubleClick" 
FontSize="12">
<ListView.View>
<GridView>
<GridViewColumn CellTemplate="{StaticResource PhotoTemplate}" Header="Default" Width="80"/>
<GridViewColumn DisplayMemberBinding="{Binding Path=Name}" Header="Name" Width="100"/>
</GridView>
</ListView.View>
</ListView>
</StackPanel>

---

Kannan