loading-effect-tutorials-09

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

Vivek Maskara

I am pursuing BTech in Software Engineering from Delhi Technological University. I develop apps, create websites and blog about my app experiences.

  • James

    I’m looking forward to more tutorials using Telerik’s toolkit. However, I wonder if you can also make examples using the MVVM pattern or popular MVVM toolkits for this and other tutorials.

    • Yes, we will soon be adding more tutorials on using Telerik controls for Windows Phone. We will try to use MVVM for our future posts

    • Yes, we will soon be adding more tutorials on using Telerik controls for Windows Phone. We will try to use MVVM for our future posts

Read more:
How to create your first Windows Phone app
How to change the App name and Tile name of your Windows phone app
Data binding in Windows Phone app – One way binding
Close