We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to load more items when scroll reached the end of list?

Platform: Xamarin.Forms |
Control: SfListView

SfListView provides support for load more items when reach end of the view. It can be achieved in sample level by finding whether the ListViewItems has reached at end or not by using Changed event of ScrollAxisBase in VisualContainer. By using Reflection, you can get the VisualContainer from SfListView and similarly get the ScrollAxisBase from VisualContainer.

 

Here, we have loaded an ActivityIndicator in FooterTemplate of SfListView, to indicate the items are being loaded in the background. By using Changed event, you can find whether reached the FooterItem based on LastBodyVisibleLineIndex property. If reached the FooterItem, you can load the items into the underlying collection. Please refer the below code snippet.

 

XAML

<syncfusion:SfListView x:Name="listView" ItemsSource="{Binding ContactsInfo}" ItemSize="60">
  <syncfusion:SfListView.FooterTemplate>
    <DataTemplate>
      <Grid>
        <ActivityIndicator x:Name="activityIndicator" Color="Blue" IsRunning="True"/>
      </Grid>
    </DataTemplate>
  </syncfusion:SfListView.FooterTemplate>
<syncfusion:SfListView.ItemTemplate>
  <DataTemplate>
    <ViewCell>
      <ViewCell.View>
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="1" />
          </Grid.RowDefinitions>
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="50" />
              <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
             <Image Source="{Binding ContactImage}" HeightRequest="50"/>
             <Grid Grid.Column="1">
               <Grid.RowDefinitions>
                 <RowDefinition Height="*" />
                 <RowDefinition Height="*" />
               </Grid.RowDefinitions>
               <Label Text="{Binding ContactName}"/>
               <Label Grid.Row="1" Grid.Column="0" Text="{Binding ContactNumber}" />
              </Grid>
            </Grid>
           <StackLayout Grid.Row="1" BackgroundColor="Gray" HeightRequest="1"/>
        </Grid>
       </ViewCell.View>
     </ViewCell>
   </DataTemplate>
 </syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>

 

C#

public class ContactsViewModel: INotifyPropertyChanged
{
  bool isBusy = false;
  private int Id = 1;
 
  public ContactsViewModel ()
  {
    contactsinfo = new ObservableCollection<Contacts> ();
    LoadMoreData();
  }
 
  public async void LoadMoreData ()
  {
    isBusy = false;
 
    //To show ActivityIndicator if the items are loaded in the view. 
    if (contactsinfo.Count > 0)
      await Task.Delay(3000);
 
    //To ignore if items are being added till delayed time.
    if (isBusy)
      return;
 
    for (int i = 0; i < 20; i++)
    {
      Random r = new Random ();
      var contact = new Contacts ();
      contact.UserId = Id++;
      contact.ContactName = CustomerNames[i];
      contact.ContactNumber = 130+Id + " - " + 390+Id;
      contact.ContactImage = ImageSource.FromResource("SfListViewSample.Images.Image" + i + ".png");
      contactsinfo.Add(contact);
   }
    isBusy = true;
  }
}

 

C#

public partial class MainPage : ContentPage
{
  private ContactsViewModel viewModel;
  ScrollAxisBase scrollRows;
  public bool isFooterLoaded;
  VisualContainer visualContainer;
 
  public MainPage()
  {
  InitializeComponent();
   viewModel = new ContactsViewModel();
   this.BindingContext = viewModel;
   listView.FooterSize = 40;
  visualContainer = listView.GetType().GetRuntimeProperties().First(p => p.Name == "VisualContainer").GetValue(listView) as VisualContainer;
  scrollRows = visualContainer.GetType().GetRuntimeProperties().First(p => p.Name == "ScrollRows").GetValue(visualContainer) as ScrollAxisBase;
   scrollRows.Changed += ScrollRows_Changed;
  }
 
  private void ScrollRows_Changed(object sender, ScrollChangedEventArgs e)
  {
    var lastIndex = scrollRows.LastBodyVisibleLineIndex;
    var header = (listView.HeaderTemplate != null && !listView.IsStickyHeader) ? 1 : 0;
    var footer = (listView.FooterTemplate != null && !listView.IsStickyFooter) ? 1 : 0;
    var displayItemsCount = listView.DataSource.DisplayItems.Count;
    var totalItems = displayItemsCount + header + footer;
 
    //To stop loading when 60 items added to display items.
    if (displayItemsCount >=60)
    {
      listView.FooterSize = 0;
        return;
    }
 
      if (totalItems > 0 && lastIndex == (totalItems - 1))
      {
        if (!isFooterLoaded)
        {
          viewModel.LoadMoreData();
          isFooterLoaded = true;
        }
      }
      else
        {
          isFooterLoaded = false;
        }
     }
   }
}

 

The below screenshot show that load more items when reached end of the items in SfListView.

 

Screenshot:

C:\Users\muthukumaran.gnanavi\AppData\Local\Microsoft\Windows\INetCache\Content.Word\LoadMore.png

 

Click here to download the sample.

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile