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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to load more items in upward direction manually using button click?

Platform: Xamarin.Forms |
Control: SfListView |
Published Date: April 12, 2018 |
Last Revised Date: July 5, 2019
Tags: load-more

SfListView allows you to load more items in upward direction manually using a button clicked event. Show the busy indicator until the items are added into the collection as like below code example.

XAML

<sync:SfListView x:Name="ListView"  IsBusy="True"
            ItemTemplate="{StaticResource MessageTemplateSelector}" 
            ItemsSource="{Binding Messages}"
            ItemSize="100">
            <sync:SfListView.HeaderTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Grid BackgroundColor="#d3d3d3" IsVisible="{Binding GridIsVisible}">
                                <Button Text="Load More" Clicked="Button_Clicked" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                            </Grid>
                            <sync:LoadMoreIndicator Color="Red" IsRunning="True" IsVisible="{Binding IndicatorIsVisible}"/>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </sync:SfListView.HeaderTemplate>
</sync:SfListView>

 

Insert each new item in the zeroth position of the underlying collection which is bound to the SfListView.ItemsSource property. When the collection gets modified, the ScrollViewer scrolls to the top of the list. Using ScrollToRowIndex method scroll back to the previous item index as like below.

C#

public partial class MainPage : ContentPage
    {
        MainPageViewModel ViewModel;
        VisualContainer visualContainer;
 
        public MainPage()
        {
            InitializeComponent();
            ViewModel = new MainPageViewModel();
            BindingContext = ViewModel;
            ViewModel.ListView = this.ListView;
            ListView.Loaded += ListView_Loaded;
            visualContainer = ListView.GetVisualContainer();
        }
 
        private void ListView_Loaded(object sender, Syncfusion.ListView.XForms.ListViewLoadedEventArgs e)
        {
            (ListView.LayoutManager as LinearLayout).ScrollToRowIndex(ViewModel.Messages.Count - 1, true);
        }
 
        private async void Button_Clicked(object sender, EventArgs e)
        {
            //To get the current first item which is visible in the View.
            var firstItem = ListView.DataSource.DisplayItems[0];
            ViewModel.GridIsVisible = false;
            ViewModel.IndicatorIsVisible = true;
            await Task.Delay(2000);
            var r = new Random();
 
            //To avoid layout calls for arranging each and every items to be added in the View. 
            ListView.DataSource.BeginInit();
            for (int i = 0; i < 5; i++)
            {
                var collection = new Message();
                collection.Text = ViewModel.MessageText[r.Next(0, ViewModel.MessageText.Count() - 1)];
                collection.IsIncoming = i % 2 == 0 ? true : false;
                collection.MessagDateTime = DateTime.Now.ToString();
                ViewModel.Messages.Insert(0, collection);
            }
            ListView.DataSource.EndInit();
            var firstItemIndex = ListView.DataSource.DisplayItems.IndexOf(firstItem);
            var header = (ListView.HeaderTemplate != null && !ListView.IsStickyHeader) ? 1 : 0;
            var totalItems = firstItemIndex + header;            //Need to scroll back to previous position else the ScrollViewer moves to top of the list.
            ListView.LayoutManager.ScrollToRowIndex(totalItems, true);
            ViewModel.GridIsVisible = true;
            ViewModel.IndicatorIsVisible = false;
        }
    }

 

Screenshot

LoadMoreUpward

 

 

You can download the entire sample from GitHub here.

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