Windows Phone 8 - Load byte[] array into XAML image with Binding

Question

I am storing images as byte[] arrays because I can't store them as BitmapImage. The ShotItem class will be stored in IsolatedStorage in an observableCollection.

namespace MyProject.Model
{
    public class ShotItem : INotifyPropertyChanged, INotifyPropertyChanging
    {
        private byte[] _shotImageSource;
        public byte[] ShotImageSource
        {
            get
            {
                return _shotImageSource;
            }
            set
            {
                NotifyPropertyChanging("ShotImageSource");

                _shotImageSource = value;
                NotifyPropertyChanged("ShotImageSource");
            }
        }
        ...
    }
}

In my xaml file I have the following:

<Image Source="{Binding ShotImageSource}" Width="210" Height="158" Margin="12,0,235,0" VerticalAlignment="Top" />

Unfortunately I can't load the image as a byte straight into the Image container in the xaml. I somehow need to convert the ShotImageSource byte[] to BitmapImage. I am loading quite a few images so would this have to also be done asynchronously.

I tried to use a converter binding, but I wasn't sure on how to get it to work. Any help would be greatly appreciated :).

You need to have a binding converter that creates a BitmapSource from the byte array. In case the byte array contains an encoded image (PNG or JPEG) you could create a stream from it and call `BitmapSource.SetSourceAsync`. If the byte array is a raw pixel buffer, you may create a WriteableBitmap and copy the pixels into its `PixelBuffer`. — Clemens, Oct 08 '13 at 22:52

score 8 · Answer 1 · answered Oct 09 '13 at 07:13

Here is the code for a Converter that will convert your byte[] into a BitmapImage:

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

            image.SetSource(stream);

            return image;
        }

        return null;

    }

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

In addition to this converter you should specify it in XAML: — Anthony, Apr 04 '14 at 14:13
If you're using win8.1, its all going asynchronous, so the memorystream stuff no longer applies. Solution is here http://www.chrispeerman.info/loading-images-from-byte-arrays-in-windows-8-store-apps-winrt/ — Nick Wright, Dec 12 '14 at 14:49

Windows Phone 8 - Load byte[] array into XAML image with Binding

1 Answers1

Linked