Lazy Loading ListView Items in Windows Phone 8.1 WinRT app

In this tutorial I will show how to use incrementally load ListView items in a Windows Phone 8.1 WinRT app.

Here are the steps.

Step 1: Add a ListView in your page

Add a ListView and define its DataTemplate in your page.

Step 2: Get the ListView’s ScrollViewer

In windows phone 8.1 ListView we cannot get reference of the ScrollViewer. You can find the ScrollViewer of your ListView by using VisualTreeHelper. Get the ScrollViewer using the following function.

Step 3: Add ListView Loaded event handler

In ListView’s Loaded event handler subscribe to the ScrollViewer‘s view changed event handler.

Step 4: Fetch more items in the View Changed event handler

In the view changed event handler of the ScrollViewer calculate the scroll progress and fetch more items if the progress is more than a certain threshold. In our case we call the fetchCountries function when the progress is more than 0.7. Also incall is set to true so that multiple calls at the same time can be avoided.

Our function fetchCountries adds 20 items every time it is called. The function sets the variable incall to false after all items have been added. Also endoflist is set to true when no more items are left.

Step 5: Add Main Grid Loaded function

In the Page’s main grid loaded function set the ListView’s ItemSource and call the fetch function to add initial items.

That’s it. Your ListView with lazy loading will now work perfectly.
Download the full project source code for reference.
Download Lazy Loading ListView

Checkout a related post on using ListView in android.

Using ListView in Android

Windows Phone 8.1 XAML Jumplist

Windows Phone 8 supported a LongListSelector control which is no longer available for Windows Phone 8.1 WinRT apps. In this tutorial I will show how to use QKit’s toolkit to add a JumpList in your app.

Step 1: Install QKit toolkit from Nuget

Get QKit toolkit from Nuget. Refer to this article if you get struck.

How to integrate a Toolkit or Third party SDK with windows phone app using NuGet Package Manager

Step 2: Add a reference to QKit in your Page

Add Qkit’s reference to the page.

Step 3: Group your list items

Currently it’s just a ListView with its ItemsSource bound to a flat list. The first thing you need to do is group the items so it’s no longer a flat list. This is easy since the JumpListHelper class is included in QKit.

The helper class will spit back a list of JumpListGroups that is compatible with the Generic and AlphaJumpLists.

Step 4: Wrap the ListView or GridView control with a JumpList control

Now, the nextstep is to simply wrap the ListView or GridView control with a JumpList control.

Step 5: Set the List’s ItemSource

If the child ListViewBase‘s ItemsSource is being set programmatically rather than through data binding, you need to call the ReleaseItemsSource method before setting the ListViewBase‘s ItemsSource, and the ApplyItemsSource method after setting the ListViewBase‘s ItemsSource on the JumpList control.

That’s it. Your list will look similar to the screenshot shown below.

        

Download the project’s source code for reference.
Download JumpList

Checkout a related post on using ListView in android.

Using ListView in Android