Nikhil Gupta Nikhil Gupta - 2 months ago 18
C# Question

Images disappear in SliderView and ListView while scrolling

I have a SliderView (of AppStudio.Uwp.Controls). The images appear as soon as I load the page but disappear when I scroll through the list. I tested this with a ListView too. Same thing is happening there too.

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


The ItemTemplate used is as follows-

<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>


Thumbnails are produced as follows in the OnNavigated function-

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 });
}
}
}


Thumbnail to image converter-

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");
}
}

}


How to fix this issue so that the images remain as they are seen when the page is first loaded?

Answer

I stumbled on exactly the same problem.
The solution is to add thumbnail.Seek(0); in your ThumbnailtoImageConverter.

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

RefLink: Images disappear in SliderView and ListView while scrolling

Comments