How do I bind a WPF Image element to a PNG on the local hard drive using a relative filepath derived from a DB?

Question

I've got a folder on the local hard drive with several images in it. The image names/paths are stored in a local SQLCE database. In a WPF application I'm trying to bind those images to an Image element (which eventually goes into a listbox). I've got the application to run and compile and the listbox shows up but there is no image where it is supposed to be.

This is the XAML that defines the data template that the listbox uses...

<Window.Resources>
    <DataTemplate x:Key="assetLBTemplate">
        <StackPanel Orientation="Horizontal">
            <Image Height="32" Width="32" Source="{Binding imageFileName}" />
            <TextBlock Text="{Binding imageFileName}" />
            <TextBlock Text="{Binding assetName}" />
        </StackPanel>
    </DataTemplate>
</Window.Resources>

The XAML for the listbox...

<ListBox x:Name="lbAssetsLiquid"
    ItemsSource="{Binding Tables[0]}"
    ItemTemplate="{StaticResource assetLBTemplate}"
    BorderThickness="1, 1, 1, 1" Grid.Column="0" Grid.Row="1" />

The code that I run on Window_Loaded:

    private void BindLiquidAssetsListBoxData()
    {
        SqlCeConnection connection;
        SqlCeCommand command;
        string sql = "SELECT tblLiquidAssets.assetName, tblLiquidAssets.assetQuantity, tblLiquidAssets.assetValueGP, tblLiquidAssets.assetDescription, tblImages.imageFileName FROM tblLiquidAssets INNER JOIN tblImages ON tblLiquidAssets.assetImageIndex=tblImages.imageID;";
        string connectionString = "Data Source=sharecalc_db.sdf;Persist Security Info=False;";
        DataSet dtSet = new DataSet();

        try
        {
            using (connection = new SqlCeConnection(connectionString))
            {
                command = new SqlCeCommand(sql, connection);
                SqlCeDataAdapter adapter = new SqlCeDataAdapter();
                connection.Open();
                adapter.SelectCommand = command;
                adapter.Fill(dtSet, "tblLiquidAssets");
                lbAssetsLiquid.DataContext = dtSet;
                connection.Close();
            }
        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.Message);
        }
    }

The result from the SQL Query is...

Again...the program loads with the listbox but no images get loaded.

I get this in the output window, which makes me I think I am missing something important here...

converter failed to convert value 'gold64.png' (type 'String')

When I add the images to the project itself in Solution Explorer it seems to work (the images appear where they are supposed to be)...but it does not work otherwise. Can someone shove me in the right direction?

Answer 1

You need to use custom value converter to convert strings to images if you want to load files from the file system. Image.Source, when a string is passed, expects a file name from resources. You can find implementation of a such converter here: Display an image in WPF without holding the file open.

Answer 2

Thank you Athari, you got me on the right path!

Revised chunk of XAML...

<Window x:Class="pf_sharecalc.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Share Calculator" WindowStyle="ThreeDBorderWindow" Loaded="Window_Loaded"
    xmlns:local="clr-namespace:pf_sharecalc">

<Window.Resources>
    <local:PathToImageConverter x:Key="PathToIMageConverter"/>
    <DataTemplate x:Key="assetLBTemplate">
        <StackPanel Orientation="Horizontal">
            <Image Height="32" Width="32" Source="{Binding imageFileName, Converter={StaticResource PathToIMageConverter}}" />
            <TextBlock Text="{Binding imageFileName}" />
            <TextBlock Text="{Binding assetName}" />
        </StackPanel>
    </DataTemplate>
</Window.Resources>

And I added this code...

public class PathToImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string path = value as string;
        if (path != null)
        {
            BitmapImage image = new BitmapImage();
            using (FileStream stream = File.OpenRead(path))
            {
                image.BeginInit();
                image.StreamSource = stream;
                image.CacheOption = BitmapCacheOption.OnLoad;
                image.EndInit(); // load the image from the stream
            } // close the stream
            return image;
        }
        else
            return null;
    }
    public object ConvertBack(object value, Type targetType,
                              object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

I'll have to do some fine tuning to get exactly what I want, but I've passed the road-block.