CODEWITHSUNDEEP
androidxamarinxamarin.androidxamarin.formsxamarin-studio
anslem arnolda
anslem arnolda

Reputation: 271

Setting Image source from code behind Xamarin Forms

I have a base64 image which I have converted into "Imagesource" format as follows. 

imageName = Convert.ToString (output.d.XIMAGE);
                    byte[] data = Convert.FromBase64String (imageName);

                    guestsignature.Add (new guestSignature (ImageSource.FromStream (() => new MemoryStream (data))));

guestsignature is a bean object that i have created as follows with a constructor.

public class guestSignature
{
    public ImageSource guestSignatureBase64{ get; private  set; }

    public guestSignature (ImageSource signature)
    {
        guestSignatureBase64 = signature;
    }
}

I have created a listview to add the images which is as follows.

<ListView x:Name="GuestSignatureList" RowHeight="100" SeparatorVisibility="Default" BackgroundColor="Transparent">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout Padding="10,10,0,0" Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                                    <Image WidthRequest="500" HeightRequest="500" Source="{Binding guestSignatureBase64}">
                                    </Image>
                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

and then im adding the guest detail object into the list.

GuestSignatureList.ItemsSource = guestsignature;

The issue is that, even though the image source is being setted, the image is not being displayed in the listview. What could the issue be in here? please, someone help.

Upvotes: 1

Views: 1834

Answers (2)

kyurkchyan
kyurkchyan

Reputation: 2428

First of all I would recommend creating custom IValueConverter to convert Base64 string to ImageSource which will be reusable for all of your application. It's straightforward - for a given Base64 string it returns ImageSource

public class Base64ToImageSourceConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            //Try to read value as string and convert it to ImageSource using streams
            //If the operation fails for some reason, return null.
            try
            {
                var image = value.ToString();
                if (image == null)
                    return null;
                byte[] data = System.Convert.FromBase64String(image);

                var imageSource = ImageSource.FromStream(() => new MemoryStream(data));
                return imageSource;
            }
            catch
            {
                return null;
            }

        }

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

In your xaml, add the newly created converter to your ResourceDictionary and bind to your Base64 encoded Image property using the converter.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:converters="clr-namespace:Test.Converters;assembly=Test"
             x:Class="Test.Views.ImagePage">
  <ContentPage.Resources>
    <ResourceDictionary>
      <converters:Base64ToImageSourceConverter x:Key="Base64ToImageSourceConverter"/>
    </ResourceDictionary>
  </ContentPage.Resources>
  <Image
    Source="{Binding Image, Converter={StaticResource Base64ToImageSourceConverter}}"
    VerticalOptions="Center"
    HorizontalOptions="FillAndExpand" />
</ContentPage>

I've tested the sample on iOS and Android, and it works. If it doesn't work for you, make sure your Base64 string is correct. You can test that online, using tool like THIS ONE.

You can find complete Base64Sample project HERE.

Upvotes: 1

joe
joe

Reputation: 1125

Add a string in guestSignature, and try to display it in the cell to see if it's a binding issue, or an image display issue.

Upvotes: 0

Related Questions