[RESOLVED] WPF: Render an Image in a ListView

[abhijit]

I am trying to bind an image in a listview control. What I have got working so far has been copied from the tutorial in the Utility Bank section of this site.

Is there way to add an Image in this list? How would I go about binding an image to this listview?

[dee-u]

Put a background image in the listview or show an image per row of the listview?

[abhijit]

This is what I have currently.

                <GridView>
                    <GridViewColumn Header="First Name" DisplayMemberBinding="{Binding FirstName}"/>
                    <GridViewColumn Header="Last Name" DisplayMemberBinding="{Binding Surname}"/>
                    <GridViewColumn Header="Date Of Birth" DisplayMemberBinding="{Binding DateOfBirth}"/>
                    <GridViewColumn Header="Photo" DisplayMemberBinding="{Binding IdPic}"/>
                    <GridViewColumn x:Name="Image">
                        <Image Source="{Binding Path=/}" Height="75" Width="75"></Image>
                    </GridViewColumn>
                </GridView>

How do I display an image from a file in the grid?

[dee-u]

You have to make changes to the CellTemplate in order to display an image.

<GridViewColumn Header="First Name" DisplayMemberBinding="{Binding FirstName}" />
<GridViewColumn Header="Last Name" DisplayMemberBinding="{Binding LastName}" />
<GridViewColumn Width="100">
    <GridViewColumn.CellTemplate>
        <DataTemplate>
            <Border CornerRadius="2,2,2,2" Width="40" Height="40" Background="#FFFFC934" BorderBrush="#FF000000" Margin="3,3,3,3">
                <Image HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" Source="{Binding Path=ImagePath}" Stretch="Fill" Margin="2,2,2,2"/>
            </Border>
        </DataTemplate>
    </GridViewColumn.CellTemplate>
</GridViewColumn>

Here's how I specified the images.

_personCollection.Add(new Person("FirstName1", "LastName1",@"C:\image1.bmp"));
_personCollection.Add(new Person("FirstName2", "LastName2",@"C:\image2.bmp"));

And here is the class:

namespace WpfApplication1
{
    public class Person
    {
        public Person(string firstName, string lastName, string imagePath)
        {
            FirstName = firstName;
            LastName = lastName;
            ImagePath = imagePath;
        }

        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string ImagePath { get; set; }
    }
}

Its all in C# but it can easily converted to VB.Net.

[abhijit]

dee-u,
I noticed that you're using a string for the imagepath. If you were to substitute this with a bitmap instead of a string, how would you do it?

[dee-u]

Where are you going to get the bitmap?

[abhijit]

Where are you going to get the bitmap?

Right now, I plan to go to the file system. Later it will be fetched from a database.

[dee-u]

Ok, here are the changes I made.

Template:

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="316" Width="440" Loaded="Window_Loaded">
    <Grid>
        <ListView Margin="24,46,46,77" Name="listView1">
            <ListView.View>
                <GridView>
                <GridViewColumn Header="First Name" DisplayMemberBinding="{Binding FirstName}" />
                <GridViewColumn Header="Last Name" DisplayMemberBinding="{Binding LastName}" />
                <GridViewColumn Width="100">
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Border CornerRadius="2,2,2,2" Width="40" Height="40" Background="#FFFFC934" BorderBrush="#FF000000" Margin="3,3,3,3">
                                <Image HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" Source="{Binding Image}" Stretch="Fill" Margin="2,2,2,2"/>
                            </Border>
                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

Sample usage:

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    BitmapImage image1 = new BitmapImage(new Uri(@"C:\PIS\rmr.bmp"));
    BitmapImage image2 = new BitmapImage(new Uri(@"C:\PIS\ping.jpg"));

    //_person.Add(new Person("FirstName1", "LastName1",@"C:\image1.bmp"));
    //_person.Add(new Person("FirstName2", "LastName2",@"C:\image2.bmp"));

    _person.Add(new Person("FirstName1", "LastName1", image1));
    _person.Add(new Person("FirstName2", "LastName2", image2));
    listView1.ItemsSource = personCollection;
}

class:

namespace WpfApplication1
{
    public class Person
    {
        public Person(string firstName, string lastName, BitmapImage image)
        {
            FirstName = firstName;
            LastName = lastName;
            Image = image;
        }

        public string FirstName { get; set; }
        public string LastName { get; set; }
        public BitmapImage Image { get; set; }
    }
}

[abhijit]

The above code does not display an image for me. There's no error, but the image displayed in the grid is a blank. I have attached a screen shot.

Ignore the image in the lower left corner of the frame.

[abhijit]

Here's my code. It is in VB.NET

Private Sub MainWindow_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
        Dim image1 As New BitmapImage(New Uri("d:\user\Supes.jpg"))
        Dim image2 As New BitmapImage(New Uri("d:\user\ab_face.jpg"))
 
        'xImage = New BitmapImage
        'xImage.BeginInit()
        'xImage.UriSource = New Uri("d:\user\Supes.jpg", UriKind.RelativeOrAbsolute)
        'xImage.EndInit()
        'imgPic.Source = xImage
 
        _EmployeeCollection.Add(New Employee("Bruce", "Wayne", "25-DEC-1900", image1))
        _EmployeeCollection.Add(New Employee("Clark", "Kent", "15-JAN-1901", image2))
    End Sub
  Private Sub OnButtonClick(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        ListView1.ItemsSource = _EmployeeCollection
    End Sub
 
    Public ReadOnly Property EmployeeCollection() As ObservableCollection(Of Employee)
        Get
            Return _EmployeeCollection
        End Get
    End Property

Imports System.Collections.ObjectModel
Public Class Employee
    Private _FirstName As String
    Private _Surname As String
    Private _DateOfBirth As Date
    Private _IDPic As BitmapImage
    Public ReadOnly Property IdPic() As BitmapImage
        Get
            Return _IDPic
        End Get
    End Property
 
    Public ReadOnly Property FirstName() As String
        Get
            Return _FirstName
        End Get
    End Property
    Public ReadOnly Property DateOfBirth() As Date
        Get
            Return _DateOfBirth
        End Get
    End Property
    Public ReadOnly Property Surname() As String
        Get
            Return _Surname
        End Get
    End Property
 
    Public Sub New(ByVal FN As String, ByVal SN As String, ByVal DOB As Date, ByVal IdPic As BitmapImage)
        _FirstName = FN
        _Surname = SN
        _DateOfBirth = DOB
        _IDPic = IdPic
    End Sub
End Class

[dee-u]

Did you change the template?

[abhijit]

I have changed my XAML code. This is how it looks.

    <Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Learning Curve" Height="350" Width="525">
    <Grid>
        <Button Content="Click Me" Click="OnButtonClick" Margin="393,262,12,12">
            <Button.Background>
                <LinearGradientBrush>
                    <GradientStop Color="Yellow" Offset="0" />
                    <GradientStop Color="Green" Offset="1" />
                </LinearGradientBrush>
            </Button.Background>
        </Button>
        <ListView Margin="15,38,12,56" Name="ListView1" Background="#FF90865C" Foreground="Black">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="First Name" DisplayMemberBinding="{Binding FirstName}"/>
                    <GridViewColumn Header="Last Name" DisplayMemberBinding="{Binding Surname}"/>
                    <GridViewColumn Header="Date Of Birth" DisplayMemberBinding="{Binding DateOfBirth}"/>
                    <GridViewColumn Header="Photo" Width="100">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Border CornerRadius="2,2,2,2" Width="40" Height="40" Background="#FFFFC934" BorderBrush="#FF000000" Margin="3,3,3,3">
                                    <Image HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Height="Auto" Source="{Binding Image}" Stretch="Fill" Margin="2,2,2,2"/>
                                </Border>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
        <Image Height="34" HorizontalAlignment="Left" Margin="33,269,0,0" Name="imgPic" Stretch="Fill" VerticalAlignment="Top" Width="42" Source="/DataBrowser;component/Images/smoking_av.jpg" />
    </Grid>
 </Window>

[dee-u]

Instead of this

Source="{Binding Image}"

you should pass the property where you are storing the BitmapImage.

Source="{Binding IdPic}"

[abhijit]

Thanks. That worked.

[dee-u]

No problem.