CollectionView 更新 ImageButton 滚动重复 UI 问题

Question

我有一个 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";         
            }

Answer 1

您可以更改源属性。

Xaml:

<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"        },
            new Info{image = "pink.jpg"        },
            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; }
}

CollectionView 更新 ImageButton 滚动重复 UI 问题

CollectionView updating ImageButton scroll repeating UI issue

c#

xamarin

xamarin.forms

xamarin.forms.collectionview