locked
Binding an Image to a byte[] property on a model RRS feed

  • Question

  • User39930 posted

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

    Monday, June 9, 2014 9:15 AM

All replies

  • User39930 posted

    Found this thread:

    ... busy implementing in xaml

    Monday, June 9, 2014 9:52 AM
  • User39930 posted

    for those interested, here's the xaml:

    <ContentPage.Resources> <ResourceDictionary> <conv:ByteArrayToImageSourceConverter x:Key="bic" /> </ResourceDictionary> </ContentPage.Resources> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="100"/> </Grid.RowDefinitions> <Image Source="{Binding Model.Picture, Converter={StaticResource bic}}"/> <StackLayout Grid.Row="1" Orientation="Horizontal"> <Button Text="Take" WidthRequest="100" Command="{Binding TakePictureCommand}" /> </StackLayout> </Grid> ... and here's the converter code: ` public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { ImageSource retSource = null;

            if (value != null)
            {
                byte[] imageAsBytes = (byte[]) value;
                retSource = ImageSource.FromStream(() => new MemoryStream(imageAsBytes));
            }
    
            return retSource;
        }`
    
    Monday, June 9, 2014 10:02 AM
  • User53841 posted

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

    Where does the 'conv' come form?

    Wednesday, July 16, 2014 12:04 PM
  • User53841 posted

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

    Wednesday, July 16, 2014 12:24 PM
  • User85851 posted

    Thanks a ton guys. This worked out for me.

    Wednesday, June 17, 2015 7:04 AM
  • User141699 posted

    Does this also work for images in Listviews?

    Wednesday, July 15, 2015 1:43 PM
  • User163400 posted

    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!

    Friday, December 18, 2015 4:26 AM
  • User203094 posted

    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.

    Tuesday, June 7, 2016 9:55 AM
  • User48786 posted

    @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.

    Tuesday, June 7, 2016 6:24 PM
  • User203094 posted

    @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.

    Wednesday, June 8, 2016 6:40 AM
  • User203094 posted

    Please see the attached file for screenshot.

    Wednesday, June 8, 2016 6:40 AM
  • User203094 posted

    @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); }

    Wednesday, June 8, 2016 10:19 AM
  • User48786 posted

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

    Wednesday, June 8, 2016 11:02 AM
  • User207894 posted

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

    Tuesday, June 21, 2016 11:01 AM
  • User189436 posted

    Thank You so much!!!!

    Wednesday, August 3, 2016 11:17 PM
  • User262372 posted

    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?

    Monday, October 3, 2016 1:24 PM
  • User115858 posted

    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!

    Wednesday, September 13, 2017 4:33 PM
  • User115858 posted

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

    Wednesday, September 13, 2017 9:22 PM
  • User157085 posted

    ... 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

    Thursday, September 14, 2017 6:51 AM