Implement ISupportIncrementalLoading in Windows Store Apps

In this article I am trying to explain how to implement incremental loading with the help of ISupportIncrementalLoading in Windows Store Apps.

First of all it is important to know what functionality we can do using ISupportIncrementalLoading. Suppose we have one listing page and we want to load more records when the user scrolls the page. In this scenario we can use ISupportIncrementalLoading.
 
Let's understand it with an example.

Suppose we have one DataGrid as in the following:
  1. <!-- Horizontal scrolling grid -->  
  2.         <GridView  
  3.             x:Name="itemGridView"  
  4.             AutomationProperties.AutomationId="ItemGridView"  
  5.             AutomationProperties.Name="Items In Group"  
  6.             ItemTemplate="{StaticResource ImageTextListFileTemplate}"  
  7.             TabIndex="1"  
  8.             Grid.RowSpan="2"  
  9.             Padding="120,126,120,50"  
  10.             SelectionMode="Single"               
  11.             IsSwipeEnabled="false"  
  12.             IsItemClickEnabled="True"  
  13.             ItemClick="ItemView_ItemClick"  
  14.             ItemContainerStyle="{StaticResource Gridvieitemstyle}">  
  15.         </GridView> 
Now we will provide an ItemsSource to this grid. For that we will define one class like the following:
  1. public class ItemsToShow : ObservableCollection<Product>, ISupportIncrementalLoading  
  2. {  
  3.     public int lastItem = 1;  
  4.     public int totalItem { getset; }  
  5.     public bool HasMoreItems  
  6.     {  
  7.         get  
  8.         {  
  9.             if (lastItem == totalItem)  
  10.             {  
  11.                 return false;  
  12.             }  
  13.             else  
  14.             {  
  15.                 return true;  
  16.             }  
  17.         }  
  18.     }  
  19.   
  20.     public IAsyncOperation<LoadMoreItemsResult> LoadMoreItemsAsync(uint count)  
  21.     {  
  22.         ProgressBar progressBar = ((Window.Current.Content as Frame).Content as ListingPage).SectionPageProgressBar;  
  23.   
  24.         CoreDispatcher coreDispatcher = Window.Current.Dispatcher;  
  25.   
  26.         return Task.Run<LoadMoreItemsResult>(async () =>  
  27.         {  
  28.             await coreDispatcher.RunAsync(CoreDispatcherPriority.Normal,  
  29.                 () =>  
  30.                 {  
  31.                     progressBar.Visibility = Visibility.Visible;  
  32.                 });  
  33.             var contentDataItems = await ContentDataSource.GetIncrementalListing  
  34. (this.Count().ToString(), count.ToString());  
  35.             lastItem++;  
  36.             if (contentDataItems.Count == 0)  
  37.             {  
  38.                 this.totalItem = lastItem;  
  39.             }  
  40.   
  41.   
  42.             await coreDispatcher.RunAsync(CoreDispatcherPriority.Normal,  
  43.                 () =>  
  44.                 {  
  45.                     foreach (Product item in contentDataItems)  
  46.                     {  
  47.                         this.Add(item);  
  48.                     }  
  49.                     progressBar.Visibility = Visibility.Collapsed;  
  50.   
  51.                 });  
  52.   
  53.             return new LoadMoreItemsResult() { Count = count };  
  54.         }).AsAsyncOperation<LoadMoreItemsResult>();  
  55.     }  
  56. }  
In the code above the LoadMoreItemsAsync method is accepting the parameter count of which is automatically passed depending on your screen resolution.

In the code above we have also used the method GetIncrementalListing for fetching data from the database, in which I am passing two parameters.

The first parameter is the count of total items in ObservableCollection, in other words the number of items you have loaded onto your screen.

In the second parameter we will pass the value of the total number of records we need to download. This method returns the list of products. Now we will create a Stored Procedure for that.
  1. Create PROCEDURE [dbo].[Product_SelectIncremental]  
  2.     (  
  3.     @TotalFetchedRecords INT,  
  4.       @PageSize INT   
  5.         
  6.     )  
  7. AS   
  8.     WITH    Product  
  9.               AS ( SELECT   ROW_NUMBER() OVER ( ORDER BY CreatedDate DESC ) AS RowNo ,  
  10.                             ProductID ,  
  11.                             ProductCategory,  
  12.                             ProdctName                              
  13.                    FROM     tblProduct_Detail  
  14.                  )  
  15.   
  16.                   SELECT  *  
  17.         FROM    Product  
  18.         WHERE   RowNo BETWEEN @TotalFetchedRecords + 1  
  19.                       AND     @TotalFetchedRecords + @PageSize 
Finally, now it's time to provide an ItemsSource to the GridView. For that I have provided the ItemsSource to the GridView on the NavigationHelper_LoadState event.
  1. private void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)  
  2.         {  
  3.   
  4.               
  5.                 itemGridView.ItemsSource = new ItemsToShow();  
  6.               
  7.             this.NavigationCacheMode = NavigationCacheMode.Enabled;  
  8.         } 
In this way we can achieve the incremental loading functionality.