Implement 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:

<!-- Horizontal scrolling grid -->
        <GridView
            x:Name="itemGridView"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Items In Group"
            ItemTemplate="{StaticResource ImageTextListFileTemplate}"
            TabIndex="1"
            Grid.RowSpan="2"
            Padding="120,126,120,50"
            SelectionMode="Single"
            IsSwipeEnabled="false"
            IsItemClickEnabled="True"
            ItemClick="ItemView_ItemClick"
            ItemContainerStyle="{StaticResource Gridvieitemstyle}">
        </GridView>

Now we will provide an ItemsSource to this grid. For that we will define one class like the following:

public class ItemsToShow : ObservableCollection<Product>, ISupportIncrementalLoading
{
    public int lastItem = 1;
    public int totalItem { get; set; }
    public bool HasMoreItems
    {
        get
        {
            if (lastItem == totalItem)
            {
                return false;
            }
            else
            {
                return true;
            }
        }
    }

    public IAsyncOperation<LoadMoreItemsResult> LoadMoreItemsAsync(uint count)
    {
        ProgressBar progressBar = ((Window.Current.Content as Frame).Content as ListingPage).SectionPageProgressBar;

        CoreDispatcher coreDispatcher = Window.Current.Dispatcher;

        return Task.Run<LoadMoreItemsResult>(async () =>
        {
            await coreDispatcher.RunAsync(CoreDispatcherPriority.Normal,
                () =>
                {
                    progressBar.Visibility = Visibility.Visible;
                });
            var contentDataItems = await ContentDataSource.GetIncrementalListing
(this.Count().ToString(), count.ToString());
            lastItem++;
            if (contentDataItems.Count == 0)
            {
                this.totalItem = lastItem;
            }


            await coreDispatcher.RunAsync(CoreDispatcherPriority.Normal,
                () =>
                {
                    foreach (Product item in contentDataItems)
                    {
                        this.Add(item);
                    }
                    progressBar.Visibility = Visibility.Collapsed;

                });

            return new LoadMoreItemsResult() { Count = count };
        }).AsAsyncOperation<LoadMoreItemsResult>();
    }
}

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.

Create PROCEDURE [dbo].[Product_SelectIncremental]
    (
    @TotalFetchedRecords INT,
      @PageSize INT

    )
AS
    WITH    Product
              AS ( SELECT   ROW_NUMBER() OVER ( ORDER BY CreatedDate DESC ) AS RowNo ,
                            ProductID ,
                            ProductCategory,
                            ProdctName
                   FROM     tblProduct_Detail
                 )

                  SELECT  *
        FROM    Product
        WHERE   RowNo BETWEEN @TotalFetchedRecords + 1
                      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.

private void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
        {


                itemGridView.ItemsSource = new ItemsToShow();

            this.NavigationCacheMode = NavigationCacheMode.Enabled;
        }

In this way we can achieve the incremental loading functionality.