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

Question

我正在使用 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;
        }
    }
}

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

如有任何帮助，我们将不胜感激

Answer 1

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

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

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

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

Reordering ListView items in UWP messes up the content

c#

xaml

uwp

windows-10-universal