c# - UWP 当 ListView 具有 DataTemplate 时，它在快速滚动时显示不正确的项目

Question

我有一个 ListView 旨在显示数据库中的每个产品，它在大多数情况下都有效，但是当我通过拖动滚动条向下滚动时，底部的项目最终不正确。

XAML 定义：

<ListView x:Name="lst_Products" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="16,124,16,16" Width="300" ContainerContentChanging="lst_Products_ContainerContentChanging" Loaded="lst_Products_Loaded" BorderBrush="Black" BorderThickness="2" CornerRadius="16">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ContentPresenter Content="{Binding Value}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

存在数据模板，因此我可以使用 SelectedValue 轻松获取产品 ID 号。 根据 MSDN 论坛上一些受信任的社区成员（或他们所谓的著名海报）的说法，当ItemsSource是ObservableCollection<KeyValuePair<int,RelativePanel>>同时具有可选值成员时，这是正确显示ListView的唯一方法。

相关C#代码：

private async void lst_Products_Loaded(object sender, RoutedEventArgs e)
{
    var products = await ProductManager.GetProducts();
    ObservableCollection<KeyValuePair<int, RelativePanel>> productList = new(products);
    lst_Products.ItemsSource = productList;
    lst_Products.SelectedValuePath = "Key";
}

private void lst_Products_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args)
{
    if (args.ItemIndex % 2 == 1)
    {
        args.ItemContainer.Background = new SolidColorBrush(Color.FromArgb(128, 128, 128, 128));
    }
    else
    {
        args.ItemContainer.Background = UIManager.GetDefaultBackground();
    }
}

public static async Task<List<KeyValuePair<int, RelativePanel>>> GetProducts()
{
    var productPanels = new List<KeyValuePair<int, RelativePanel>>();
    var productIDs = await SqlHandler.ReturnListQuery<int>($"SELECT id FROM {productTable}");
    var productNames = await SqlHandler.ReturnListQuery<string>($"SELECT name FROM {productTable}");
    var panels = new List<RelativePanel>();
    foreach(var name in productNames)
    {
        RelativePanel panel = new();
        
        TextBlock productName = new()
        {
            Text = name
        };
        panel.Children.Add(productName);
        panels.Add(panel);
    }
        
    for(int i = 0; i < productIDs.Count; i++)
    {
        productPanels.Add(new KeyValuePair<int, string>(productIDs[i], panels[i]));
    }
    return productPanels;
}

对 SQL 处理程序的调用只运行 SQL 查询并返回结果列表。 如果您需要，我可以发布代码，但我可以向您保证不会进行排序。

列表外观的屏幕截图。 底部的项目应该是“Coffee” - Button Test Product 2 是列表中的第二个项目。

SQL 数据表的屏幕截图，底部应有“咖啡”产品。

在这种情况下，它只是底部的项目不正确，但其他时候它在底部附近混杂了 5 或 6 个条目。 这似乎只发生在 DataTemplate/ContentPresenter 中，但没有它，RelativePanel 无法在列表中正确显示。 最终，该列表将显示有关该产品的更多信息，据我所知，如果不将 SQL 数据转换为 c# 端的 RelativePanel，则没有好的方法可以做到这一点。

我愿意接受有关解决模板混乱问题或调整 xaml 的建议，这样我就不需要模板来显示批量 sql 数据而无需模板，但我不知所措。

Answer 1

c# - UWP 当 ListView 具有 DataTemplate 时，它在快速滚动时显示不正确的项目

问题应该是listview 虚拟化引起的，有两种方法可以解决这个问题，一种是通过将ItemsPanel设置为StackPanel来禁用listview虚拟化，如下所示

<ListView>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
</ListView>

另一种方法是为您的 model class 实现INotifyCollectionChanged接口。 有关更多信息，请参阅深入的数据绑定

使用RelativePanel集合作为数据源不是一个好习惯，更好的方法是在 DataTemplate 中创建 RelativePanel 并与模式 class 属性绑定。

例如

<ListView.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Index}" />
            <TextBlock Text="{Binding IsItem}" />
            <Image Source="{Binding ImageSource}" Visibility="Collapsed" />
        </StackPanel>
    </DataTemplate>
</ListView.ItemTemplate>