Windows Phone 7 Silverlight binding image from the IsolatedStorage

Question

I need to find the way to save images to the IsolatedStorage and show them I the Silverlight (XAML) Important: Silverlight have to take image “himself”, I cannot set the image from the code behind I have tried many solutions before. The very last solution is, to bind byte array and convert them to the Image XAML

StackPanel Orientation="Horizontal" Margin="0,0,0,20">
                                <Image  Width="110" CacheMode="BitmapCache" Source="{Binding ThumbLocal,Converter={StaticResource imgConverter}}"  
                                        Margin="12,0,9,0"/>
                                <StackPanel Width="311">

Code behind

public byte[] ThumbLocal
        {
            get;
            set;
        }


public class ByteImageConverter : IValueConverter
    {

           public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            MemoryStream memStream = new MemoryStream((byte[])value);
            memStream.Seek(0, SeekOrigin.Begin);
            BitmapImage thumbLocal = new BitmapImage();
            thumbLocal.SetSource(memStream);
            return thumbLocal;
        }
    }

Everything work till I save byte[] to the database and tried to retrieve. By now I can see the only option save image as file to the IsolatedStorage and then retrieve and covert to byte[]. Is this “smart ” solution?

Answer 1

First, create this converter:

public class BinaryToImageSourceConverter : IValueConverter
{

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if (value != null && value is byte[])
        {
            var bytes = value as byte[];
            var stream = new MemoryStream(bytes);
            var image = new BitmapImage();

            image.SetSource(stream);
            stream.Close();
            return image;
        }
        return null;
    }

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

Second, bind to Your byte[] using this converter, i.e. if you are using MVVM: View:

<Image Source="{Binding IsolatedStorageImage, Converter={StaticResource BinaryToImageSourceConverter}}" x:Name="ScanImage"/>

You can make property in contrlol (prop snippet) type byte[] and read image to byte array from isostorage, then set value of property to it. If You got more questions, feel free to ask me.