Forum Xamarin.Forms

How to load more data using listview same as what's app

Adil_SaiyadAdil_Saiyad Member ✭✭
edited February 23 in Xamarin.Forms

Hello Friends,
Please anyone help me how to load more data using listview top side scrolling same as what's up, i have used group listview with MVVM.

I tried out as below but it's load all page at same time.

    listChat.ItemAppearing += async (sender, e) =>
            {
                var message = e.Item as OneToOneConversationModel;

                var index = vm.ConversationList.FirstOrDefault().IndexOf(message);

                if (index == 0 && _didScrollToEnd && !vm.IsLoadBusy)
                {
                    if (vm.TotalPageCount > 1 && vm.TotalPageCount != vm.PageCount)
                    {
                        vm.LoadMoreData();
                        //_didScrollToEnd = false;
                    }
                }
                var last = listChat.ItemsSource.Cast<DateWiseGroup>().LastOrDefault();
                if (index == last.Count() - 1)
                {
                    _didScrollToEnd = true;
                }
            };

Thanks in advance

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    This depends on how your webapi request the data. If you load a page of data per request, then the next loadMore session,we just needs to add the requested data(a page data) to the ListView's ItemsSource.

    You can refer the following code:

       public partial class App : Application
        {
            ObservableCollection<string> Items;
            bool isLoading;
            Page page;
    
            public App()
            {
                Items = new ObservableCollection<string>();
                var listview = new ListView();
    
                listview.ItemsSource = Items;
                listview.ItemAppearing += (sender, e) =>
                {
                    if (isLoading || Items.Count == 0)
                        return;
    
                    //hit bottom!
                    if (e.Item.ToString() == Items[Items.Count - 1])
                    {
                        LoadItems();
                    }
                };
    
                // The root page of your application
                page = new ContentPage
                {
                    Content = new StackLayout
                    {
                        VerticalOptions = LayoutOptions.Center,
                        Children = {
                            listview
                        }
                    }
                };
    
                MainPage = new NavigationPage(page);
    
                LoadItems();
            }
    
            private async Task LoadItems()
            {
                isLoading = true;
                page.Title = "Loading";
    
                //simulator delayed load
                Device.StartTimer(TimeSpan.FromSeconds(2), () => {
                    for (int i = 0; i < 20; i++)
                    {
                        Items.Add(string.Format("Item {0}", Items.Count));
                    }
                    page.Title = "Done";
                    isLoading = false;
                    //stop timer
                    return false;
                });
            }
        }
    

    And there is a similar thread, you can check it here: https://forums.xamarin.com/discussion/111449/load-more-items-without-button-click


    Xamarin forums are migrating to a new home on Microsoft Q&A!
    We invite you to post new questions in the Xamarin forums’ new home on Microsoft Q&A!
    For more information, please refer to this sticky post.

  • Adil_SaiyadAdil_Saiyad Member ✭✭

    Hello @jezh
    Above code is for load more data from bottom scrolling , but I need load more data from top side scrolling like what's app chat screen.

  • jezhjezh Member, Xamarin Team Xamurai
    edited February 24

    but I need load more data from top side scrolling like what's app chat screen.

    ListView doesn't have the top side scrolling function in default In xamarin forms. Do you mean the RefreshView in Xamarin.Forms ?

    If it is convenient for you, could you please post a basic demo to github or onedriver so that we can test on our side?

  • Adil_SaiyadAdil_Saiyad Member ✭✭

    @jezh said:

    but I need load more data from top side scrolling like what's app chat screen.

    ListView doesn't have the top side scrolling function in default. Do you mean the RefreshView in Xamarin.Forms ?

    If it is convenient for you, could you please post a basic demo to github or onedriver so that we can test on our side?

    If you use fb messenger app please open and you can see scroll top side then load more data when reach at 0 position

  • jezhjezh Member, Xamarin Team Xamurai

    Sorry, we don't use fb messenger app.

    How do you do this in your app? Could you please post more code snippets or a basic demo to github or onedrier so that we can test on our side?

Sign In or Register to comment.