第一次打开时未显示ListView中的图像

Question

我正在使用ListView显示一些图像。

<ListView 
    CachingStrategy="RecycleElement" 
    ItemsSource="{Binding Images}"
    VerticalOptions="FillAndExpand" 
    HorizontalOptions="FillAndExpand"
    HasUnevenRows="true"
    SeparatorColor="Transparent"
    BackgroundColor="White" >

    ...

    <Image Source="{Binding}" VerticalOptions="FillAndExpand" />

我要添加一个UriImageSources列表以显示图像。

foreach (var img in images) {
    res.Add(new UriImageSource() {
        Uri = new Uri(img),
        CachingEnabled = true
    });
}

问题是，我第一次打开XAML ContentPage时，列表未显示图像。在第二次缓存所有图像，然后显示图像。

那么，如何在绑定之前预加载图像？

Answer 1

正如Bruno所说，您可以在列表视图中使用FFimageLoading。 我编写了一个演示，您可以参考它。

这是演示的GIF。

如果使用FFimageLoading，首先应参考this link来准备运行环境。

以下是我的演示代码。

ServerSelectionTimeoutError: cluster-shard-00-.....mongodb.net:27017: ('The write operation timed out',)Process returned with non-zero exit code 1---------- End of error message from Python interpreter ---------- Process exited with error code -2

MainPage.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:JobschedulerDemo" xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms" x:Class="JobschedulerDemo.MainPage"> <StackLayout> <ListView x:Name="listview" CachingStrategy="RecycleElement" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" HasUnevenRows="true" SeparatorColor="Transparent" BackgroundColor="White" > <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="Olive"> <ffimageloading:CachedImage HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="300" HeightRequest="300" DownsampleToViewSize="true" Source = "{Binding LinkSource}"> </ffimageloading:CachedImage> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </StackLayout> </ContentPage>

MainPage.xaml.cs

public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); var grouped = new ObservableCollection<ImageLink>() { new ImageLink{LinkSource="http://loremflickr.com/600/600/nature?filename=simple.jpg" }, new ImageLink{LinkSource="http://loremflickr.com/600/600/nature?filename=simple.jpg" }, new ImageLink{LinkSource="http://loremflickr.com/600/600/nature?filename=simple.jpg" }, new ImageLink{LinkSource="http://loremflickr.com/600/600/nature?filename=simple.jpg" }, }; listview.ItemsSource= grouped; } }

ImageLink