Xamarin - Show base64 string image

Question

I am new to Xamarin and XAML, and here is what I have done so far in my portable project used by Android and iPhone (Android only):

Item.cs (loaded from JSON)

[JsonProperty("image")] private string ImageBase64 { get; set; } [JsonIgnore] private Xamarin.Forms.Image _image = null; [JsonIgnore] public Xamarin.Forms.Image Image { get { if (_image == null) { _image = new Xamarin.Forms.Image() { Source = Xamarin.Forms.ImageSource.FromStream(() => new MemoryStream(Convert.FromBase64String(ImageBase64))), BackgroundColor = Color.White, WidthRequest = 64, HeightRequest = 64, }; OnPropertyChanged("Image"); } return _image; } private set { _image = value; } } 

ItemsView.xaml:

 <StackLayout VerticalOptions="FillAndExpand" Padding="5,20,5,0" > <Label Text="Items" VerticalOptions="Center" Font="35" HorizontalOptions="Center" /> <ListView x:Name="list" ItemsSource="{Binding Items}"> <ListView.ItemTemplate> <DataTemplate> <ImageCell Text="{Binding ItemName}" Detail="{Binding Infos, StringFormat='{0}'}" Image.Source="{Binding Path=Image}"> </ImageCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </StackLayout> 

I get my shortcuts correctly, but no image. Can someone explain to me what I'm doing wrong?

Answer 1

The type of your Image property should be ImageSource , not Image , since you obviously want to bind the ImageCell ImageSource property. In addition, calling OnPropertyChanged on an OnPropertyChanged get properties never works because the PropertyChanged event must be fired before the binding (or any other consumer) can receive the changed value of the property.

Instead Image.Source="{Binding...} correct binding should be

 <ImageCell ... ImageSource="{Binding Path=Image}" /> 

Properties must be declared like this:

 private string imageBase64; public string ImageBase64 { get { return imageBase64; } set { imageBase64 = value; OnPropertyChanged("ImageBase64"); Image = Xamarin.Forms.ImageSource.FromStream( () => new MemoryStream(Convert.FromBase64String(imageBase64))); } } private Xamarin.Forms.ImageSource image; public Xamarin.Forms.ImageSource Image { get { return image; } set { image = value; OnPropertyChanged("Image"); } } 

If you really need the lazy creation of Image property value, you could do it read-only, and make the corresponding OnPropertyChanged call in the ImageBase64 setter:

 private string imageBase64 public string ImageBase64 { get { return imageBase64; } set { imageBase64 = value; OnPropertyChanged("ImageBase64"); OnPropertyChanged("Image"); } } private Xamarin.Forms.ImageSource image; public Xamarin.Forms.ImageSource Image { get { if (image == null) { image = Xamarin.Forms.ImageSource.FromStream( () => new MemoryStream(Convert.FromBase64String(ImageBase64))); } return image; } }