How can I databind an image? - xamarin.forms

Question

How can I databind an image using XAML?
Specifically, I have a stream object that I would like to convert into an image.
However, I just cannot find a basic example of how to do this.
1. What does the viewmodel property look like?
Do I use an ImageSource?
Do I need a value converter?
2. What does the XAML look like?

Answer 1

Forms has a StreamImageSource you can use to do this. However, I don't think you can use it in XAML without writing a custom converter. To use it in code, you would do something like this:
image1.Source = ImageSource.FromStream(() =>
{
// whatever you need to do to create your stream
return stream;
});

Answer 2

The demo illustrates the binding via code. For a XAML implementation you need something along the lines of:-
<Image Source="{Binding MyImageAsBytes, Converter={StaticResource MyByteToImageSourceConverter}}" />
Once you have your byte[] in your ViewModel, you will need a converter to convert this byte array, that contains the image, to a Xamarin.Forms ImageSource.
The converter, takes the byte[] array and converts to an ImageSource via:-
objImageSource = ImageSource.FromStream(() => new MemoryStream(bytImageData));
Example:-
StackLayout objStackLayout = new StackLayout();
byte[] bytImage = { your image as a byte collection }
this.BindingContext = new MyImageViewModel()
{
MyImageAsBytes = bytImage
};
Image objImage = new Image();
objImage.SetBinding(Image.SourceProperty, "MyImageAsBytes", converter: new MyByteToImageSourceConverter());
objStackLayout.Children.Add(objImage);
ViewModel:-
public class MyImageViewModel
: Xamarin.Forms.View
{
public static readonly BindableProperty MyImageAsBytesProperty = BindableProperty.Create<MyImageViewModel, byte[]>(p => p.MyImageAsBytes, default(byte[]));
public byte[] MyImageAsBytes
{
get { return (byte[])GetValue(MyImageAsBytesProperty); }
set { SetValue(MyImageAsBytesProperty, value); }
}
}
Converter:-
public class MyByteToImageSourceConverter
: IValueConverter
{
public object Convert(object pobjValue, Type pobjTargetType, object pobjParameter, System.Globalization.CultureInfo pobjCulture)
{
ImageSource objImageSource;
//
if (pobjValue != null)
{
byte[] bytImageData = (byte[])pobjValue;
//
objImageSource = ImageSource.FromStream(() => new MemoryStream(bytImageData));
}
else
{
objImageSource = null;
}
//
return objImageSource;
}
public object ConvertBack(object pobjValue, Type pobjTargetType, object pobjParameter, System.Globalization.CultureInfo pobjCulture)
{
throw new NotImplementedException();
}
}