Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Continuous Pagination with LongListSelector

When my LongListSelector is scrolled to bottom, I want to automatically load more data from a web service. Just like the Store app does. My problem is that I can't found any event to trigger the load more action.

like image 360
Tom Esterez Avatar asked Nov 14 '12 15:11

Tom Esterez


1 Answers

The recommandation from Microsoft is to use the LongListSelector.ItemRealized event, check if it's the last item (or the Nth last item) in the list to be "realized" and if it is, then it will start fetching new records. In terms of UX, it's best to show a ProgressIndicator on the SystemTray at the time and not try to imitate iOS with inline spinners.

LongListSelector.ItemRealized is actually a very interesting event since it fires when an Item has been data bound to a virtualized ListBoxItem. That means that the LongListSelector virtualization logic thinks it needs to prepare the FrameworkElement to be shown on screen. The ListBoxItem may or may not be on screen yet, but it's a good indication it's getting there.

For a code sample see @ http://code.msdn.microsoft.com/wpapps/TwitterSearch-Windows-b7fc4e5e

    void resultListBox_ItemRealized(object sender, ItemRealizationEventArgs e)
    {
        if (!_viewModel.IsLoading && resultListBox.ItemsSource != null && resultListBox.ItemsSource.Count >= _offsetKnob)
        {
            if (e.ItemKind == LongListSelectorItemKind.Item)
            {
                if ((e.Container.Content as TwitterSearchResult).Equals(resultListBox.ItemsSource[resultListBox.ItemsSource.Count - _offsetKnob]))
                {
                    Debug.WriteLine("Searching for {0}", _pageNumber);
                    _viewModel.LoadPage(_searchTerm, _pageNumber++);
                }
            }
        }
    }
like image 179
JustinAngel Avatar answered Jan 04 '23 16:01

JustinAngel