Binding image in Isolated Storage

Question

Hey. I have a list of items that the user can search. The search results are displayed in a listbox. Each animal object has a path to an image in Isolated Storage. What's the quickest way to bind my Image control inside the listboxitem to the image in the isolated storage? Examples I've seen tend to display images from the internet rather than Isolated Storage. If I have around 10 images, it seems to take up all the memory and crash. thanks

EDIT:

I'm using this in my BitmapConverter class (inherits IValueConverter)

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value !=null)
            {
                BitmapImage bitmapImage = new BitmapImage();
                bitmapImage.SetSource(new MemoryStream((Byte[]) value));
                return bitmapImage;
            }
            else
            {
                return null;
            }
        }

I have this at the top of my AppResource.xaml file:

    <ImageApp_Converter:BitmapConverter x:Key="bmpConverter" />    

In my style, within the AppResource.xaml file:

<Image  HorizontalAlignment="Left" Margin="8,8,0,4" Width="160" Height="120" Source="{Binding Converter={StaticResource bmpConverter}}"   />

I set a breakpoint in my BitmapConverter, but it's never called. I've never used IValueConverter before, so any help would be great. Thanks

Answer 1

There are a few problems in the code shown. Some may just be missing from your example:

Firstly, your binding to the converter does not specify what to bind to to get its value, so it is never called. At a minimum it needs a Path= (or simply a property name as short-cut) or the converter will not be called. Where are you setting the ItemSource of your list?

Secondly, the values getting passed are string file names. Your converter needs to use them as filenames and open a stream based on that name. At the moment it is trying to use the names as byte arrays.

Finally, if the images are a fixed set, it would make more sense to store them in an images folder under ClientBin and simply refer to them with the following path syntax "/images/imagename.jpg" etc. This will involve the browser's caching automatically. You do not need a converter for that. (The key is the leading "/". Without that Silverlight assumes the images are in the current module instead)

Below is a complete example using the images shown in the ClientBin/images folder that looks like this when run:

Sample Xaml file:

<UserControl x:Class="SilverlightApplication1.IsoImages"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:ImageApp_Converter="clr-namespace:SilverlightApplication1" mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <ListBox x:Name="ImageList">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal" Background="AliceBlue">
                        <Image HorizontalAlignment="Left" Margin="8,8,0,4" Width="160" Height="120" Source="{Binding Path=Filename}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>

The sample code behind is:

using System.Collections.Generic;
using System.Windows.Controls;

namespace SilverlightApplication1
{
    public partial class IsoImages : UserControl
    {
        public IsoImages()
        {
            InitializeComponent();
            List<ImageItem> images = new List<ImageItem>()
                                         {
                                             new ImageItem("/images/Image1.jpg"), 
                                             new ImageItem("/images/Image2.jpg"),
                                             new ImageItem("/images/Image3.jpg"),
                                             new ImageItem("/images/Image4.jpg")
                                         };
            this.ImageList.ItemsSource = images;
        }
    }

    public class ImageItem
    {
        public string Filename{ get; set; }
        public ImageItem( string filename )
        {
            Filename = filename;
        }
    }
}

Answer 2

You are probably running out of memory because you are repeatedly loading the same file into new BitmapSource objects. You should create only "around 10" BitmapSource objects one for each file. Then re-use those BitmapSource instances by assigning them to Image.Source properties.

One way to do that is to use an implementation of IValueConverter that maintains a static dictionary of file path to BitmapSource key value pairs.