CollectionView обновление ImageButton прокрутка повторяющейся проблемы пользовательского интерфейса

Question

у меня есть CollectionView содержащий ImageButton. Когда изображение нажимается, я заменяю a.png на b.png.

Это работает нормально, но когда я прокручиваю список вниз, каждый 10-й элемент теперь показывает b.png!

Если вместо установки я снова вызвал строку ниже после сохранения в БД, которая решает мою проблему, но затем я начинаю с верхней части списка, а не с текущей позиции, в которой я был:

      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

Вы можете поменять с собственностью souce.

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