CODEWITHSUNDEEP
androidimagelistviewxamarin.forms
Daron
Daron

Reputation: 117

Xamarin forms, How do i refresh an image in a listview?

<ListView x:Name="PictureListView" HasUnevenRows="True" WidthRequest="320" HeightRequest="400" SeparatorColor="White">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Image Source="{Binding Path}" HeightRequest="80" WidthRequest="80" Aspect="AspectFill" />
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

ObservableCollection<Image> Pictures = new ObservableCollection<Image>(new Image { Source = "file.png" });
PictureListView.ItemSource = Pictures;

   private async void PictureListView_ItemTapped(object sender, ItemTappedEventArgs e)
{
  var photo = (Image)e.Item;
 photo.Source = "file2.png";
}

i am trying to update an image in a listview using xamarin forms....i have the code listed above....but when the click fires, the new image ("file2.png") doesn't get repainted to the screen. Instead, i just an empty space for where the image would have been. How do i change an image out in a listview?

Upvotes: 0

Views: 2571

Answers (2)

Alessandro Caliaro
Alessandro Caliaro

Reputation: 5768

You should implement INotifyPropertyChanged

Here a sample code

using System;
using System.ComponentModel;
using Xamarin.Forms;

namespace XamlSamples
{
    class ClockViewModel : INotifyPropertyChanged
    {
        DateTime dateTime;

        public event PropertyChangedEventHandler PropertyChanged;

        public ClockViewModel()
        {
            this.DateTime = DateTime.Now;

            Device.StartTimer(TimeSpan.FromSeconds(1), () =>
                {
                    this.DateTime = DateTime.Now;
                    return true;
                });
        }

        public DateTime DateTime
        {
            set
            {
                if (dateTime != value)
                {
                    dateTime = value;

                    if (PropertyChanged != null)
                    {
                        PropertyChanged(this,
                            new PropertyChangedEventArgs("DateTime"));
                    }
                }
            }
            get
            {
                return dateTime;
            }
        }
    }
}

Here some docs

data_bindings_to_mvvm

Upvotes: 0

lowleetak
lowleetak

Reputation: 1382

You are using ObservableCollection which will only update the list view when the collection is updated (add, move, remove). In your case, you are only updating the content of the item, so it will not reflect in the screen.

You should implement your code with proper data binding or MVVM. Read more about MVVM HERE.

If you do not want to implement the MVVM, you can use the following tricks.

private async void PictureListView_ItemTapped(object sender, ItemTappedEventArgs e)
{
    var photo = (Image)e.Item;
    var newImage = new Image { Source = "file2.png" };
    var index = Pictures.IndexOf(photo);
    Pictures.Remove(photo);
    Pictures.Insert(index, newImage);
}

Upvotes: 1

Related Questions