Xamarin 表单，如何刷新列表视图中的图像？答案

【问题标题】：Xamarin forms, How do i refresh an image in a listview?Xamarin 表单，如何刷新列表视图中的图像？
【发布时间】：2018-03-14 00:55:04
【问题描述】：

<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";
}

我正在尝试使用 xamarin 表单更新列表视图中的图像....我有上面列出的代码....但是当点击触发时，新图像（“file2.png”）没有得到重新绘制到屏幕上。相反，我只是图像所在位置的空白空间。如何在列表视图中更改图像？

【问题讨论】：

标签： android image listview xamarin.forms

【解决方案1】：

您正在使用 ObservableCollection，它只会在集合更新（添加、移动、删除）时更新列表视图。在您的情况下，您只是在更新项目的内容，因此它不会反映在屏幕上。

您应该使用适当的数据绑定或 MVVM 来实现您的代码。阅读有关 MVVM 的更多信息HERE。

如果不想实现 MVVM，可以使用以下技巧。

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

【讨论】：

【解决方案2】：

你应该实现 INotifyPropertyChanged

这里是示例代码

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

这里有一些文档

data_bindings_to_mvvm

【讨论】：