none
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?
    Saturday, February 09, 2008 10:27 PM

Answers

  • 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();
            }
        }
    Sunday, February 10, 2008 10:08 PM

All replies

  • 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
    Sunday, February 10, 2008 9:40 AM
  • 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();
            }
        }
    Sunday, February 10, 2008 10:08 PM
  • Thank you, that helped me a lot to get my feets on the ground!
    Cheers
      Matze
    Saturday, March 22, 2008 2:34 PM
  • How do you do this strictly in code (no XAML)? I am adding data items that are dynamicaly generated and can't be bound.
    Saturday, May 16, 2009 9:03 AM
  • 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
    Thursday, February 04, 2010 10:34 AM