滚动时图像在 SliderView 和 ListView 中消失

Question

我有一个 SliderView（属于 AppStudio.Uwp.Controls）。图像在我加载页面时出现，但在我滚动列表时消失。我也用 ListView 对此进行了测试。那里也发生了同样的事情。

        <controls:SliderView x:Name="sliderView" ItemsSource="{x:Bind listForOtherPicturesThumbnails}" ItemTemplate="{StaticResource Hero}"
                     RelativePanel.Below="mainImage"
                     RelativePanel.AlignLeftWithPanel="True"
                     RelativePanel.AlignRightWithPanel="True"
                     ArrowsVisibility="Visible"
                     />

使用的ItemTemplate如下-

    <DataTemplate x:Key="Hero" x:DataType="local:StorageItemThumbnailClass">
        <Grid Margin="6" Padding="12" Background="White" BorderThickness="1" BorderBrush="LightGray">
            <Image Source="{x:Bind Thumbnail, Converter={StaticResource ThumbnailtoImageConverter}}" Stretch="UniformToFill" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Grid>
    </DataTemplate>

在 OnNavigated 函数中生成的缩略图如下-

    protected async override void OnNavigatedTo(NavigationEventArgs e)
    {
        otherPicturesPathList = ((PictureWithList)e.Parameter).pathList;

        await PopulateListOfOtherPicturesThumbnailsAsync();

        Bindings.Update();
    }

    private async Task PopulateListOfOtherPicturesThumbnailsAsync()
    {
        if (otherPicturesPathList != null)
        {
            List<Task<StorageItemThumbnail>> thumbnailOperations = new List<Task<StorageItemThumbnail>>();

            foreach (var path in otherPicturesPathList)
            {
                var storageFile = await StorageFile.GetFileFromPathAsync(path);
                thumbnailOperations.Add(storageFile.GetThumbnailAsync(Windows.Storage.FileProperties.ThumbnailMode.PicturesView, 100).AsTask());
            }

            await Task.WhenAll(thumbnailOperations);

            for (int k = 0; k < thumbnailOperations.Count; k++)
            {
                var task = thumbnailOperations[k];
                listForOtherPicturesThumbnails.Add(new StorageItemThumbnailClass { Thumbnail = task.Result });
            }
        }
    }

缩略图到图像转换器-

 public object Convert(object value, Type targetType, object parameter, string language)
    {
        BitmapImage image = null;
        if (value != null)
        {
            if (value.GetType() != typeof(StorageItemThumbnail))
            {
                throw new ArgumentException("Expected a thumbnail");
            }
            StorageItemThumbnail thumbnail = (StorageItemThumbnail)value;
            image = new BitmapImage();
            image.SetSource(thumbnail);
        }
        return (image);
    }

StorageItemThumbnailClass-

public class StorageItemThumbnailClass : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    private StorageItemThumbnail _thumbnail;
    private string _name;

    public StorageItemThumbnail Thumbnail
    {
        get { return _thumbnail; }
        set
        {
            _thumbnail = value;
            // Call OnPropertyChanged whenever the property is updated
            OnPropertyChanged("Thumbnail");
        }
    }

    // Create the OnPropertyChanged method to raise the event
    protected void OnPropertyChanged(string name)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }

    public String Name
    {
        get { return _name; }
        set
        {
            _name = value;
            // Call OnPropertyChanged whenever the property is updated
            OnPropertyChanged("Name");
        }
    }

}

如何解决此问题，以使图像在页面首次加载时保持原样？

Answer 1

我偶然发现了完全相同的问题。
解决方案是在您的ThumbnailtoImageConverter 中添加thumbnail.Seek(0);。

//...
StorageItemThumbnail thumbnail = (StorageItemThumbnail)value;
thumbnail.Seek(0);
image = new BitmapImage();
image.SetSource(thumbnail);

参考链接：Images disappear in SliderView and ListView while scrolling

Answer 2

我无法测试您的代码，但有两个建议：

• 您是否尝试在转换器内部设置断点？
• 看看 Visual Studio 的输出面板，也许你能得到一些关于你的问题的信息
• 将您的代码替换为：

thumbnailOperations.Add(await storageFile.GetThumbnailAsync(Windows.Storage.FileProperties.ThumbnailMode.PicturesView, 100));

恕我直言，异步/等待模式有问题。