Binding an Image to a byte[] property on a model

... is there any guidance on how to achieve this?

Answers

  • InquisitorJaxInquisitorJax USMember

    Found this thread:

    ... busy implementing in xaml

  • KeesAlderliestenKeesAlderliesten NLMember ✭✭

    Yes, i'm interested :-)
    Only, i can't get it to work. I'm confused about this part:

    Where does the 'conv' come form?

  • KeesAlderliestenKeesAlderliesten NLMember ✭✭

    Nevermind, found it!
    Needed the xmlns:conv="clr-namespace etc...
    Working perfect now! Thanx.

  • NestorLedonNestorLedon USMember ✭✭

    Thanks a ton guys. This worked out for me.

  • Does this also work for images in Listviews?

  • PankajGPankajG USMember ✭✭

    Yes, It works for List

    Converter Code:
    public class ByteToImageFieldConverter : IValueConverter
    {
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
    ImageSource retSource = null;
    if (value != null)
    {
    byte[] imageAsBytes = (byte[])value;
    retSource = ImageSource.FromStream(() => new MemoryStream(imageAsBytes));
    }
    return retSource;
    }
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
    throw new NotImplementedException();
    }
    }

    Thanks Malcolm!

  • CasperNybroeCasperNybroe USMember
    edited June 2016

    I have tried to use this code, and I am getting the following errors:
    Android: Java.Lang.OutOfMemoryError
    WindowsPhone: The component cannot be found. (Exception from HRESULT: 0x88982F50)
    iOS: None, but the image is not displayed.

    My converter

    public class ByteArrayToImageSourceConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { ImageSource retSource = null; if (value != null) { byte[] imageAsBytes = (byte[])value; retSource = ImageSource.FromStream(() => new MemoryStream(imageAsBytes)); } return retSource; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); } }

    My XAML

    <ContentPage.Resources> <ResourceDictionary> <converters:ByteArrayToImageSourceConverter x:Key="ByteArrayToImage" /> </ResourceDictionary> </ContentPage.Resources>

    <Image Source="{Binding SelectedPollItem.Image, Converter={StaticResource ByteArrayToImage}}" />

    My SelectedPollItem Type

    public byte[] Image { get; set; }

    I am using Xamarin.Forms 2.2.0.45.

  • JasonMichasJasonMichas USMember ✭✭

    @CasperNybroe Are you sure that the Image property is bindable? You might try adding a simple string property to your SelectedPollItem and binding that to a label to make sure that the binding is working. You may have to either trigger the property changed event or look at changing your viewmodel so that INotifyPropertyChanged is implemented properly.

    Also, you should be able to set a breakpoint in the converter at if(value != null) to make sure that a) it is getting called and b) there is data. If it never gets hit its probably an issue with propertychanged not getting raised in the viewmodel.

  • CasperNybroeCasperNybroe USMember

    @JasonMichas Thanks for your reply!
    The bindings works since other properties of the SelectedPollItem shows just fine. Also I am hitting the converter and there is data.

  • CasperNybroeCasperNybroe USMember

    Please see the attached file for screenshot.

  • CasperNybroeCasperNybroe USMember

    @JasonMichas I figured out that my byte array was in a Base64 format. Therefore I had to decode it to solve the problem.
    I added the following to my converter.

    if (value != null) { byte[] imageAsBytes = (byte[])value; byte[] decodedByteArray = System.Convert.FromBase64String(Encoding.UTF8.GetString(imageAsBytes, 0, imageAsBytes.Length)); var stream = new MemoryStream(decodedByteArray); retSource = ImageSource.FromStream(() => stream); }

  • JasonMichasJasonMichas USMember ✭✭

    @CasperNybroe Cool! Im glad you got it worked out, it had to be something goofy like that :wink:

  • parth7676parth7676 USMember ✭✭

    @PankajG,@InquisitorJax this converter works quite well. Does this is the efficient way to load images or load images from directory is more efficient???

  • rxamarxama USMember ✭✭

    Thank You so much!!!!

  • MarkBartoloMarkBartolo USMember
    edited October 2016

    Thanks for your post. After setting:

    Part 1:

    `<ContentPage xmlns:conv="MyApp.Converters.MyByteToImageSourceConverter">
    </ContentPage>`
    

    ... together with setting up the MyByteToImageSourceConverter class

    Part 2:
    ContentPage.Resources> <ResourceDictionary> <conv:MyByteToImageSourceConverter x:Key="bic" /> </ResourceDictionary> </ContentPage.Resources>

    Part 3:
    <ContentView> <Image Source="{Binding MyStream, Converter={StaticResource bic}}"/> </ContentView>

    where MyStream is a get;set; byte array property

    I'm receiving:

    System.ArgumentException: Object of type 'System.String' cannot be converted to type 'Xamarin.Forms.View'.

    What can be the issue please?

  • AlejandroRmzAlejandroRmz USUniversity ✭✭

    I get no errors of any sort but the image won't display.

    I have tried setting my VM property as byte[] and as ImageSource and neither works.

    In my code I am downloading images from a Web Service and getting them back as a byte[], which I am trying to convert via the Converter.

    I have tried the route of not using a Converter and the app crashes when Binding the converted byte[] to ImageSource.

    Help!

  • AlejandroRmzAlejandroRmz USUniversity ✭✭

    Ha, found the culprit. Bad VM implementation, nevermind.

  • MalcolmJackMalcolmJack USMember ✭✭

    ... seems this is still valuable. For those interested, I maintain a nuget package that contains this converter and some other common ones:
    https://www.nuget.org/packages/Wibcisoft.Xamarin.Forms.Converters/
    ... and the source code:
    https://github.com/InquisitorJax/Wibci.Xamarin.Forms.Converters

Sign In or Register to comment.