How to insert an image from a local folder where filename match item from a CollectionViewSource

Question

I'm building my first application in WPF, and I'm trying to add an image from a local folder to the listview. The folder has images where the filename consist of 10 digits (e.g 1234567890.jpg).

The problem is that an image (1234567890.jpg), should match an employee from a database with the EmployeeID 1234567890. So I have 2 different sources.

I'm new to programming, and I have spend 2 days with Google now, trying to find a solution to this, but without any luck. I have tried merging into CompositeCollection. I have tried creating a List with images. I think I have tried everything.

Here is what I have so far:

<Window.Resources>
        <DataTemplate x:Key="EmployeeTemplate">
            <Grid MaxWidth="500" Margin="3">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>

                <Image Name="employeeImage" Grid.Column="0" Width="50" 
                       Source=""/>

                <StackPanel Grid.Column="1">
                    <StackPanel Margin="3,0" Orientation="Horizontal">
                        <TextBlock Text="{Binding LastName}"/>
                        <TextBlock Text=", "/>
                        <TextBlock Text="{Binding FirstName}"/>
                    </StackPanel>
                    <TextBlock Name="EmployeeIDTextBlock" Margin="3,0" Text="{Binding EmployeeID}"/>
                    <TextBlock Margin="3,0" Text="{Binding Department.DepartmentName}"/>
                </StackPanel>
            </Grid>
        </DataTemplate>

        <CollectionViewSource x:Key="employeeViewSource" d:DesignSource="{d:DesignInstance {x:Type local:Employee}, CreateList=True}"/>

    </Window.Resources>



<Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <ListView x:Name="grid1" Grid.Column="0" 
                                ItemTemplate="{StaticResource EmployeeTemplate}"
                                ItemsSource="{Binding Source={StaticResource employeeViewSource}}"/>

                </Grid>

What I would like is for the pictures to show in front of each employee in the list.

I do apologies if I have asked this question wrong or left out something, but this is also my first question in here.

I hope you can help.

Answer 1

If i've understood well what you need, you could use a converter that, using the "EmployeeID" will give you back an ImageSource:

class Imageconverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value == null)
                return null;
            string imgDir = @"\Imgs\";
            string fileName = System.IO.Path.Combine(imgDir,String.Format("{0}.jpg", value.ToString()));


            if (!System.IO.File.Exists(fileName))
                return null;


            BitmapImage src = new BitmapImage(new Uri(fileName, UriKind.Absolute));

            return src;
        }

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

Create a resource for the converter:

<local:Imageconverter x:key="ImgConverter/>

And use it:

<Image Name="employeeImage" Grid.Column="0" Width="50" 
                       Source="{Binding EmployeeID, Converter={StaticResource ImgConverter}}"/>