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

Lazy loading in Telerik RadControl Data Bound ListBox for Windows Phone 8

We use the term `lazy loading` to describe the implementation process in which we don’t load the whole data in a ListBox at once. We load a few items at a time and load new items as the user scrolls down. This method is quite useful when we are dealing with a large amount of data and particularly when the data is being fetched from a remote location. The default windows phone controls isn’t the best choice if you want to add lazy loading in your app. It’s a cakewalk if you are using windows phone 8 controls from Telerik. Yes, it costs 99$ but you could get if from DVLUP for 250 points or by enrolling into Nokia’s developer program and using their developer token. We assume that you already have telerik integrated with Visual studio and will directly jump to explaining lazy loading implementation.

Step 1. Create a new Windows Phone 8 project

Open Visual Studio and create a new Windows Phone 8 Silverlight Project. Target it for WP 8 or 8.1

Step 2. Convert the project to a Telerik WP Application

To use Telerik controls in your app you need to first convert it to a Telerik Windows Phone Application. This will add the required references for telerik controls. If Telerik is integrated with your Visual Studio then you could see a Telerik Menu at the top. Go to Telerik > UI for Windows Phone > Convert to Telerik Windows Phone Application.


Choose the following Components from the dialog box that appears. We add the reference for Data and Primitives in our app.

Wait till Visual Studio adds these references to your project.

Step 3. In MainPage.xaml add a reference to Telerik primitive controls

Add the following reference to use telerik primitive controls in MainPage.xaml

xmlns:telerikPrimitives=”clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives”

Step 4. Add the following code to use telerik RadDataBoundListBox

We will be using telerik RadDataBoundListBox to demonstrate lazy loading. Here’s the XAML code which we are using in the sample app.


Note:

  • We have set the DataVirtualizationMode to OnDemandAutomatic
    which means that
  • DataRequested event handler is triggered whenever we scroll down the list, usually to the end of it. Here we add more items to the listbox
  • ItemLoadingTemplate is the one that defines what should be displayed while the list is empty
  • DataVirtualizationItemTemplate defines what should be displayed when the list is fetching more items
  • ItemTemplate is the normal DataTemplate which defines the UI of the list items.

You can bind data to both ItemLoadingTemplate, DataVirtualizationItemTemplate and ItemTemplate as per your wish and you may refer to this article to see how data binding works in Windows Phone.

Step 5. Add the event handler for listbox ManipulationCompleted

In the app’s constructor define the event handler for listbox ManipulationCompleted by using the following code

this.listBox.ManipulationCompleted += this.radDataBoundListBox_ManipulationCompleted;

Below the app’s constructor add the code for this event handler

Step 6. Declare an ObservableCollection to hold the data items

We can’t use a normal List here as will be adding new items to the list afterwards and UI won’t update automatically. So we use an ObservableCollection instead.

The MainPage.xaml.cs file should look similar to this after you have added the code from Steps 5 and 6.

Step 7. Add the code for list box data requested event

This event is triggered when the list tries to fetch more items. In this example we are using a method, add() to add 10 more items to the observable collection every time it is called.

Note:

  • Right now the items are added from a local source so you may not notice the loading progress bar when new items are added so you may add a delay of 2 seconds by uncommenting the code in add()
  • If you are fetching from a remote location, you don’t need to do anything special. Just call the webservice with an offset to get few more items

Step 8. Set the item source for the listbox in page Loaded event handler

We add a page Loaded event handler to set the ItemSource for the listbox. Once the item source has been set, new items will get added to the listbox whenever the ovservable collection is updated with more data items.

That’s it. Try running the app in the emulator and see if it works for you.

Download full project source Lazy-Loading.zip