Thursday 19 February 2015

IncrementalLoading(LazyLoading) in Windows phone 8.1 and Windows 8.1

How to do Incremental loading (LazyLoading) of data in ListView/GridView ?
  • In WinRT runtime ListView and GridView implement ISupportIncrementalLoading interface.
  • This interface will be called by Listview/Gridview when it reaches to end of list edge and gives callback to load more items.
  • There is library available to do so. check here
How to use this library
  • Add this library in your Windows 8.1 or Windows phone 8.1 project from Nuget.
  • After adding library reference is already been added to project.
  • Now create a collection which implement "IncrementalLoadingCollection" from library this way as mention below.
  • Right Click on  IncrementalLoadingList<BookSummaryInfo> and use Implement Abstract class, it will add two methods
    •  Task<int> LoadNextItemsAsync () - make it async mehod
    • CanLoadMoreItems() - business logic to handle max item to fetch
  • See example below
 public class BookCollection :IncrementalLoadingList<BookSummaryInfo>
 {
     private BookSearchDataContext _bookDataContext;
     public BookCollection(BookSearchDataContext bookDataContext)
     {
         this._bookDataContext = bookDataContext;
     }
     protected async override Task<int> LoadNextItemsAsync(int count) //count is passed by ListView/GridView
     {
        if (_bookDataContext != null)
        {
           //Network request and get Data - Pass the no of items require from network - count
           //"count" which is passed from ListView/GridView
           SearchResponse response = await _bookDataContext.SearchBooks(count);    
           if (response != null && response.Search != null && response.Search.Length > 0)
           {
              foreach (var bookinfo in response.Search)
              {
                 //Add data to Collection
                  this.Add(new BookSummaryInfo(bookinfo));
              }
              //return the no of items added
              return response.Search.Length;
           }
       }
       return 0;
     }     
     protected override bool CanLoadMoreItems()
     {
         ////your Own logic - if you have more items make it true else false
        return _bookDataContext.hasMore;
     }
}

  • Now Your Collection is Ready next We will use same collection To bind with ListView/GridView
  • Now Let's Create ViewModel 

////Your View-Model which contain the IncrementalLoadingCollection   
public class BookDataVM   
{   
    BookSearchDataContext data; bool _IsBusy;   
    public BookDataVM()   
    {   
        data = new BookSearchDataContext();  
        ////Collection with Incremental Loading capability   
        BookCollection = new BookCollection(data);   
    }   
}   
  • Now this BookCollection object can be bind to ListView/GridView.
  • Scroll to the end of list it will give you call-back "LoadNextItemsAsync" where you can add more items to collection.

See FlipView with IncrementalLoading


3 comments: