CollectionView 更新 ImageButton 滚动重复 UI 问题答案

【问题标题】：CollectionView updating ImageButton scroll repeating UI issueCollectionView 更新 ImageButton 滚动重复 UI 问题
【发布时间】：2021-02-02 22:09:12
【问题描述】：

我有一个包含ImageButton 的CollectionView。按下图像时，我将 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";         
            }

【问题讨论】：

附带问题：CommandParameter 不应该仅与 Command 一起使用（看不到 Command）吗？
不要直接修改图片源，尝试绑定模型属性
另外，您不需要每次都加载该项目。您已经有一个绑定到当前单元格的副本，只需使用它并为自己保存一个 db 操作
谢谢，这是我的第一个 Xamarin 应用程序，所以我需要阅读更多教程，但它现在可以在图像源上添加绑定。我如何重构以删除 CommandParameter 并删除“获取数据库调用”，同时仍然能够获取完整对象以传递给“保存数据库调用”？
CommandParameter="{Binding .}" 将传递整个对象，而不仅仅是 ID

标签： c# xamarin xamarin.forms xamarin.forms.collectionview

【解决方案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; }
}

【讨论】：