Изображения в 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

Как сказал Бруно, вы можете использовать FFimageLoading для своего списка.Я написал демо, вы можете обратиться к нему.

Это GIF демо.

Если вы использовали FFimageLoading, сначалавсего, вы должны обратиться к этой ссылке , которая готовит работающую среду.

Ниже приведен мой код демонстрации.

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

public class ImageLink
{
    public ImageLink()
    {


    }

    public string LinkSource { get; set; }

}