Callback when image is loading in Xamarin Forms

Question

I have a Listview in Xamarin Forms. The content of every cell in list is text and one or more images. I search way to detect when all content in cell is finish loading. My idea is using a IsLoading property of Image. Source of images are urls http.

This is the code of the FlexLayout where the list of images is loaded:

 <FlexLayout  AlignContent="Center" AlignItems="Center" Direction="Row" JustifyContent="Center" Wrap="Wrap"  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" x:Name="media"   Grid.Row="1"  Margin="0,10,0,10" BindableLayout.ItemsSource="{Binding Media}">

        <BindableLayout.ItemTemplate>
                    <DataTemplate>

                              <Image x:Name="img" Source ="{Binding Url}" HeightRequest="{Binding ListHeigth}" WidthRequest="{Binding ListWidth}"  Aspect="AspectFit" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />

                    </DataTemplate>
        </BindableLayout.ItemTemplate>
 </FlexLayout>

I have not found a way to Binding the IsLoading property using the XAML. Being a list, I don't know how to use this property in each of the elements:

img.PropertyChanged += (sender, args) =>
        {
            if (args.PropertyName == "IsLoading")
            {
                //do somink
            }
        };

How is the IsLoading property Binding in the Xaml? Or is there some other callback to detect that all the content of the cell has been loaded?

Thanks a lot.

Leon Lu - MSFT Leon Lu - MSFT · Accepted Answer · 2020-11-13T05:13:22

I have not found a way to Binding the IsLoading property using the XAML.

IsLoading just have get method, it do not have set method, so you cannnot add binding in the XAML directly.

So I advice you to use FFImageLoading to achieve it.

If you want to detect when image is finish loading. You can achieve the Finish event

  <ffimageloading:CachedImage 
            Finish="CachedImage_Finish"
            HorizontalOptions="Center" VerticalOptions="Center"
            WidthRequest="300" HeightRequest="300"
            DownsampleToViewSize="true"
            Source = "http://loremflickr.com/600/600/nature?filename=simple.jpg">
            </ffimageloading:CachedImage>

Here is finish event background code.

  private void CachedImage_Finish(object sender, FFImageLoading.Forms.CachedImageEvents.FinishEventArgs e)
        {
           
        }

If you use MVVM, you also use FinishCommand, then binding an command in the ViewModel.

If you want to display the loading image when loading, you can set the LoadingPlaceholder = "loading.png", here is similar thread.

Image Loading Event

Callback when image is loading in Xamarin Forms

1 Answers