Windows Phone 8.1 ListBox ItemTemplate with a C# method for each item

Question

Currently I use the below code on a static page to load an image in the page.
The image is stored in isolated storage and in my database I store the image location.
The image is successfully read from isolated storage and displayed on my static page.

What I now want to do, is it to use this same image in a ListBox . but how can I bind the same code process to every ListBox item through the DataTemplate ?

This is the code that works on my static page.

private void ReadFromIsolatedStorage(string _filename)
{
    if (_filename != null)
    {
        WriteableBitmap bitmap = new WriteableBitmap(200, 200);
        using (IsolatedStorageFile myIsoStorage = IsolatedStorageFile.GetUserStoreForApplication())
        {
            using (IsolatedStorageFileStream fileStream = myIsoStorage.OpenFile(_filename, FileMode.Open, FileAccess.Read))
            {
                //StreamResourceInfo sri = Application.GetResourceStream(fileStream);
                bitmap = PictureDecoder.DecodeJpeg(fileStream);

                BinaryReader binary = new BinaryReader(fileStream);
                byte[] imgByteArray = binary.ReadBytes((int)(fileStream.Length));

                binary.Close();
                binary.Dispose();
                _imagearray = imgByteArray;
            }
        }
        this.imagebox1.Source = bitmap;

        //StreamResourceInfo sri = bitmap;

    }
}

This is the incomplete xaml for the ListBox that I need to somehow link to the above code.

<ListBox Name="List1" Height="463" SelectionChanged="List1_SelectionChanged">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <Grid >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="95" />
                        <ColumnDefinition Width="133" />
                        <ColumnDefinition Width="129" />
                        <ColumnDefinition Width="63" />
                    </Grid.ColumnDefinitions>
                    <Image Height="60" Width="60" Stretch="Uniform" Name="imageprofile" />

                    <TextBlock Grid.Column="1" Text="{Binding Type}" TextWrapping="Wrap"/>
                    <TextBlock Grid.Column="2" Text="{Binding One}" TextWrapping="Wrap"/>
                    <TextBlock Grid.Column="3" Text="{Binding two}" />
                </Grid>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer 1

What you need is an IValueConverter

Your page static resources:

<Page.Resources>
    <converters:FilenameToBitmapImageConverter x:Key="FilenameToBitmapImageConverter"/>
</Page.Resources>

in your item template:

<Image Source="{Binding FileName,Converter={StaticResource FilenameToBitmapImageConverter}}"/>

Your converter code:

public class FilenameToBitmapImageConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string fileName = value as string;
        if (fileName != null)
        {
            WriteableBitmap bitmap = new WriteableBitmap(200, 200);
            using (IsolatedStorageFile myIsoStorage = IsolatedStorageFile.GetUserStoreForApplication())
            {
                using (IsolatedStorageFileStream fileStream = myIsoStorage.OpenFile(fileName, FileMode.Open, FileAccess.Read))
                {
                    //StreamResourceInfo sri = Application.GetResourceStream(fileStream);
                    bitmap = PictureDecoder.DecodeJpeg(fileStream);
                }
            }
            return bitmap;
        }
        return null;
    }

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