当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查询并返回一个结果列表。如果你需要，我可以发布代码，但我可以向你保证，不会进行排序。

列表的屏幕截图。底部项目应该是"；咖啡"-按钮测试产品2是列表中的第二项。

SQL数据表的屏幕截图；咖啡"产品应在底部。

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

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

Answer 1

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

这个问题应该是由列表视图虚拟化引起的，有两种方法可以解决这个问题，一种是通过像下面的一样将ItemsPanel设置为StackPanel来取消列表视图虚拟

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

另一种方法是为模型类实现INotifyCollectionChanged接口。有关更多信息，请参阅深度中的数据绑定

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

例如

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