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
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.
- 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.
- 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.