How to customize the load more in Xamarin.Forms ListView (SfListView)

You can customize LoadMore behavior using the SfListView.Footer and customize sticky behavior based on the items in Xamarin.Forms SfListView.

C#

Extend the SfListView and handle the sticky behavior to achieve the following cases,

• LoadMore view should be loaded in the bottom screen, if the items are less than the size of the view. In this case, update the footer as sticky.
• LoadMore view should be added after the last item, if there are scrollbale items in the ListView. In this case, update the footer as scrollable.

  public class ExtendedListView : SfListView
  {
      VisualContainer container;
      public ExtendedListView()
      {
          container = this.GetVisualContainer();
          container.PropertyChanged += Container_PropertyChanged;
      }
   
      private void Container_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
      {
          Device.BeginInvokeOnMainThread(() =>
          {
              var extent = (double)container.GetType().GetRuntimeProperties().FirstOrDefault(container => container.Name == "TotalExtent").GetValue(container);
              if (e.PropertyName == "Height")
              {
                  if (extent > container.ScrollRows.ViewSize && this.IsStickyFooter)
                      this.IsStickyFooter = false;
                  else if (extent <= container.ScrollRows.ViewSize && !this.IsStickyFooter)
                      this.IsStickyFooter = true;
              }
          });
      }
  }
  

XAML

Use the ExtendedListView and define the FooterTemplate for LoadMore view and bind the Command to the GestureRecognizers. The SfBusyIndicator is used as the LoadMore indicator.

<local:ExtendedListView x:Name="listView" IsStickyFooter="True" ItemsSource="{Binding Products}" AutoFitMode="Height">
    <local:ExtendedListView.FooterTemplate>
        <DataTemplate>
            <Grid VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" HeightRequest="50">
                <Grid.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding LoadMoreItemsCommand}"/>
                </Grid.GestureRecognizers>
                <Label Text="Tap here to load more" FontSize="15" FontAttributes="Bold" TextColor="#11698e" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Center" />
                <busyindicator:SfBusyIndicator AnimationType="Cupertino" ViewBoxHeight="30" ViewBoxWidth="30" TextColor="#11698e" IsBusy="{Binding Path=BindingContext.IsBusy, Source={x:Reference listView}}" IsVisible="{Binding Path=BindingContext.IsBusy, Source={x:Reference listView}}" BackgroundColor="White"/>
            </Grid>
        </DataTemplate>
    </local:ExtendedListView.FooterTemplate>
</local:ExtendedListView>

View sample in GitHub