Making an App Catalog with Telerik RadControl Data Bound ListBox for Windows Phone 8

All apps should include an about page as a way to engage with your users. If you’re part of DVLUP this is a basic requirement of most challenges. The about page should describe your app, you the author & include your contact details in case your users want to provide any feedback. Also it can be used to showcase your other apps, I’m going to show you a fun way of doing this.

Step 1: Create a new Telerik Windows Phone 8 Project.

The wizard will automatically add the required references & create an about page for you.

Step 2: In the About.xaml add the following namespaces to your page

At the top of About.xaml add the following references.

 

Step 3: Add the following code to your XAML for the RadDataBoundListBox

I’ve left the RadDataBoundListBox properties pretty much standard, I did however add a tap event handler, which occurs whenever an item in the RadDataBoundListBox is tapped.

ItemAddedAnimation – Is the animation that occurs when an item is added to the RadDataBoundListBox.

PanAndZoomImage – Is a Telerik image control, it features a busy indicator which the standard image control doesn’t (I’ll cover this control later on).

RadBusyIndicator is a Telerik control that indicates that the app is busy doing ‘something’ (I’ll cover this control later on).

StackVirtualizationStrategyDefinition – Is the way items are visualized in the RadDataBoundListBox, in this case its orientation is set to horizontal.

Step 4: Declare our Lists to hold our information

We’re using Lists as they’re easier to work with than Arrays.

 

Step 5: Add to our List of Objects & set the ItemsSource for the RadDataBoundListBox

In the for loop we’re creating a new Catalog object & adding it to the list, finally we set the RadDataBoundListBox ItemsSource to the List of Objects.

Step 6: Add the code for the tap event handler

First we get the index of the selected item in the RadDataBoundListBox, we then create a new WebBrowserTask. We set the Uri of the WebBrowserTask to app link from the List of Objects. Finally we call the WebBrowserTask, which will open up the link to our app.

That’s about it, this can be done dynamically where you host the information online so your app catalog is kept current.

Download AppCatalog.zip

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