在 UWP 中重新排序 ListView 项目会弄乱内容

问题描述

我正在使用 ListViews 在 UWP 中制作看板列表。如下图所示，将项目重新排序几次会导致其中一项或多项内容出错。 进一步重新排序将使内容来回正确和错误，并且在重新加载页面时一切都恢复正常，这意味着没有数据更改，而只是图像控件显示错误的图像。 （它也可能发生在任何其他控件上）

作为参考，图像是我在 Image 控件的 Loaded 事件中加载的本地文件，ListView 只是将 CanReorderItems 和 AllowDrop 设置为 true。

这是 XAML 的外观

 <ListView x:Name="LView"  MinWidth="240" Grid.Row="1" ItemsSource="{x:Bind List.Tasks}"  ReorderMode="Enabled" CanReorderItems="True" AllowDrop="True" CanDragItems="True" SelectionMode="None"  IsItemClickEnabled="True" ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollMode="Enabled" ScrollViewer.IsverticalRailEnabled="True" ItemClick="LView_ItemClick">
        <ListView.ItemContainerStyle>
          ...
        </ListView.ItemContainerStyle>

        <ListView.ItemTemplate>
            <DataTemplate x:DataType="mongo:Task">
                <Grid Padding="12 0" >
                    <Grid.RowDeFinitions>
                        ...
                    </Grid.RowDeFinitions>


                    <Border CornerRadius="4 4 0 0" Margin="-12 0" >
                        <Image x:Name="Cover" MaxHeight="160" Stretch="UniformToFill" Tag="{x:Bind Attachments}" Loaded="Image_Loaded" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
                    </Border>

...

这里是 Loaded 事件

private async void Image_Loaded(object sender,RoutedEventArgs e)
{
    var img = sender as Image;
    
    if (img.source is object) return;

    var attachments = img.Tag as ObservableCollection<TaskAttachment>;
    if (attachments is null) return;
    var cover = attachments.Where(_a => _a.is_cover).FirstOrDefault();

    if (cover is object && cover.type == "image")
    {
        var path = BrandBoxSettings.Instance.server_path + "projects\\" + cover.path;
        Output.WriteLine(path);
        var file = await StorageFile.GetFileFromPathAsync(path);
        
        using (IRandomAccessstream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
        {
            // Set the image source to the selected bitmap
            BitmapImage bitmapImage = new BitmapImage();

            await bitmapImage.SetSourceAsync(fileStream);
            img.source = bitmapImage;
        }
    }
}

编辑：值得注意的是，即使其中一张卡片最初没有图像，重新排序也会使其具有图像。

任何帮助将不胜感激

解决方法

好的，所以我尝试将 ItemsPanel 更改为 StackPanel，现在似乎可以正常工作了。

        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizationStackPanel/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>

编辑： 它似乎也可以通过将面板设置为 VirtualizationStackPanel