Xamarin Forms Binding Base64 image to CarouselView Image Source

Question

I have the following code in my XAML (Visual Studio 2019 Community Edition)

<CarouselView x:Name="TheCarousel" PeekAreaInsets="50" Loop="False" >
                <CarouselView.EmptyView>
                    <Label Text="Search Results"/>
                </CarouselView.EmptyView>
                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <Frame HasShadow="True" 
                                   BorderColor="DarkGray"
                                   CornerRadius="5"
                                   Margin="10"
                                   HeightRequest="20"
                                   
                                   VerticalOptions="Start" >
                            <StackLayout>

                                <Image x:Name="ProductImage" Source="{Binding Image}"/>
                                <Label x:Name="ProduceDescription"  Text="{Binding ProductDescription}"/>
                                <Label x:Name="AmountInStock"  Text="{Binding AmountInStock}"/>
                                <Label x:Name="ProductPrice"  Text="{Binding productprice}"/>

                            </StackLayout>
                        </Frame>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>

And the following code in my model

private string imageBase64;
        public string productphoto1
        {
            get { return imageBase64; }
            set
            {
                try
                {

                    imageBase64 = value;

                    if (imageBase64 != null)
                    {
                        if (imageBase64.Trim() != "")
                        {
                            //imageBase64 = "data:image/png;base64," + imageBase64;
                            var byteArray = Convert.FromBase64String(imageBase64);

                            if (byteArray != null)
                            {
                                //Stream stream = new MemoryStream(byteArray);
                                //Image = ImageSource.FromStream(() => stream);

                                Image = Xamarin.Forms.ImageSource.FromStream(
                                    () => new MemoryStream(Convert.FromBase64String(imageBase64)));
                            }
                        }
                    }
                }
                catch (Exception ex)
                {
                    string strErrMessage = ex.Message + " " + ex.Source;
                    
                }
            }
        }



        private Xamarin.Forms.ImageSource image;
        public Xamarin.Forms.ImageSource Image
        {
            get { return image; }
            set
            {
                image = value;
            }
        }

The code is returning values and returns the base64 image and seems to convert it properly. However, the images are not displaying in the CarouselView. Is there something that I am missing?

I have tried setting "Binding Image" to "Binding Path=Image", but the images are still not loading.

Thanks in advance.

//James

Answer 1

I couldn't see other codes of your app, but based on your code,I created a demo which works on my android emulator.

You can refer to the following code:

1.create an item and implement interface INotifyPropertyChanged. Then once changing the value of field ImageBase64, the UI will update automatically.

   public class Item: INotifyPropertyChanged 
    {

        private string imageBase64;
        public string ImageBase64
        {
            get { return imageBase64; }
            set
            {
                SetProperty(ref imageBase64, value);

                try
                {

                    // imageBase64 = value;
                    SetProperty(ref imageBase64, value);

                    if (imageBase64 != null)
                    {
                        if (imageBase64.Trim() != "")
                        {
                            //imageBase64 = "data:image/png;base64," + imageBase64;
                            var byteArray = Convert.FromBase64String(imageBase64);

                            if (byteArray != null)
                            {
                                Image = Xamarin.Forms.ImageSource.FromStream(
                                    () => new MemoryStream(Convert.FromBase64String(imageBase64)));
                            }
                        }
                    }
                }
                catch (Exception ex)
                {
                    string strErrMessage = ex.Message + " " + ex.Source;

                }
            }
        }

        private Xamarin.Forms.ImageSource image;
        public Xamarin.Forms.ImageSource Image
        {
            get => image;
            set => SetProperty(ref image, value);
        }

        public double productprice { get; set; }

        public int AmountInStock { get; set; }
        public string ProductDescription { get; set; }


        bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
        {
            if (Object.Equals(storage, value))
                return false;

            storage = value;
            OnPropertyChanged(propertyName);
            return true;
        }

        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }

2.create viewmodel MyViewModel

public class MyViewModel 
{
    string base64Image = "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";

    string base64Image2 = "iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=";
    public ObservableCollection<Item> Items { get; set; }

    public ICommand ResetImage => new Command(reSetImage);

    private void reSetImage(object obj)
    {
        Items[1].ImageBase64 = base64Image2;
    }

    public MyViewModel() {

        byte[] Base64Stream = Convert.FromBase64String(base64Image);


        Items = new ObservableCollection<Item>();   

        Items.Add(new Item { AmountInStock = 900, productprice = 10.0,ProductDescription = " ProductDescription1" , ImageBase64 = base64Image });
        Items.Add(new Item { AmountInStock = 600, productprice = 19.0, ProductDescription = " ProductDescription2", ImageBase64 = base64Image });
        Items.Add(new Item { AmountInStock = 890, productprice = 68.0, ProductDescription = " ProductDescription3", ImageBase64 = base64Image });

    }    
}

3.TestPage.xaml

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:formapp0111="clr-namespace:FormApp0111"
             x:Class="FormApp0111.TestPage1">

    <ContentPage.BindingContext>
        <formapp0111:MyViewModel></formapp0111:MyViewModel>
    </ContentPage.BindingContext>
    <ContentPage.Content>
        <StackLayout>

            <Button Text="reset" Command="{Binding ResetImage}" />

            <CarouselView x:Name="TheCarousel" PeekAreaInsets="50" Loop="False" ItemsSource="{Binding Items}" >
                <CarouselView.EmptyView>
                    <Label Text="Search Results"/>
                </CarouselView.EmptyView>
                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <Frame HasShadow="True" 
                                   BorderColor="DarkGray"
                                   CornerRadius="5"
                                   Margin="10"
                                   HeightRequest="20"
                                   
                                   VerticalOptions="Start" >
                            <StackLayout>

                                <Image x:Name="ProductImage" Source="{Binding Image}"/>
                                <Label x:Name="ProduceDescription"  Text="{Binding ProductDescription}"/>
                                <Label x:Name="AmountInStock"  Text="{Binding AmountInStock}"/>
                                <Label x:Name="ProductPrice"  Text="{Binding productprice}"/>

                            </StackLayout>
                        </Frame>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Note:

1.In class Item.cs, I replaced productphoto1 with ImageBase64.

    private string imageBase64;
    public string ImageBase64{// other code}

2.I also added a Button to reset the base64 image.

public ICommand ResetImage => new Command(reSetImage);