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

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

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

    ...

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

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

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

---

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

正如Bruno所说，您可以使用FFimageLoading来加载listview。 我写了一个演示，你可以参考一下

这是演示的GIF

如果您使用了FFimageLoading，首先，您应该参考准备运行环境

下面是我的演示代码

MainPage.xaml

图像链接

---

为什么不将FFimageLoading与其缓存机制一起使用呢？如果窗体尚未加载图像，并且不知道要为视图设置什么大小，则会发生这种情况。因此，视图未显示。尝试为图像或其容器设置一些heightrequest/widthrequest，将图像放在contentview中可能需要为其设置更多布局属性，然后看看会发生什么。

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

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

public class ImageLink
{
    public ImageLink()
    {


    }

    public string LinkSource { get; set; }

}