CollectionView 更新 ImageButton 滚动重复 UI 问题

如何解决CollectionView 更新 ImageButton 滚动重复 UI 问题

我有一个包含 CollectionView 的 ImageButton。按下图像时，我将 a.png 替换为 b.png。

这工作正常，但是当我向下滚动列表时，现在每 10 个项目都显示 b.png！

如果我没有设置 button.source，而是在保存到解决我的问题的数据库后再次调用下面的行，但是我从列表的顶部开始而不是从我所在的当前位置开始：

ItemsListView.ItemsSource = items;

如何设置 button.source 而不会在每 10 个项目上产生此错误？

    <CollectionView x:Name="Items">
                <CollectionView.ItemTemplate>
                        <DataTemplate>
                           <ImageButton CommandParameter="{Binding Id}" Source="a.png" Clicked="OnInventoryClicked" />
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
    </CollectionView>

    void OnInventoryClicked(object sender,EventArgs e)
            {
                    var button = (sender as ImageButton);
                    var itemId = button.CommandParameter.ToString();
                    var inventoryItem = await App.Database.GetItemAsync(itemId);
                    inventoryItem.IsInInventory = !inventoryItem.IsInInventory;
                    await App.Database.SaveItemAsync(inventoryItem);
                    button.source = inventoryItem.IsInInventory? "b.png" : "a.png";         
            }

解决方法

您可以更改源属性。

XML：

<CollectionView x:Name="Items" ItemsSource="{Binding infos}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <!--<ImageButton
                Clicked="OnInventoryClicked"
                CommandParameter="{Binding Id}"
                Source="a.png" />-->
            <ImageButton Clicked="ImageButton_Clicked" Source="{Binding image}" />
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

背后的代码：

public partial class MainPage : ContentPage
{

    public ObservableCollection<Info> infos { get; set; }
    public MainPage()
    {
        InitializeComponent();
        infos = new ObservableCollection<Info>()
        {
            new Info{image = "pink.jpg"        },new Info{image = "pink.jpg"        },};


        this.BindingContext = this;
    }

    private void ImageButton_Clicked(object sender,EventArgs e)
    {
        var button = (sender as ImageButton);
        button.Source = "dog.jpg";
    }


}
public class Info
{
    public string image { get; set; }
}