Implementing a custom Data Template Selector in Windows Phone 8’s ListBox control

In this post I will explain how to implement a custom data template selector and also how to create a DataTemplateSelector abstract class. Basically a DataTemplateSelector will provide a way to choose a DataTemplate based on the data object and the data-bound element. You need a DataTemplateSelector when you have more than one DataTemplate for the same type of objects and you want to supply your own logic to choose a DataTemplate to apply based on the properties of each data object. So, a DataTemplateSelector lets you select a DataTemplate for each item in the list. Let us first see how to implement DataTemplateSelector abstract class and then we will see how to implement your own CustomDataTemplateSelector.

Implementing a DataTemplate abstract class

A DataTemplateSelector can be implemented in a number of ways but here let us use a DataTemplateSelector which derives from ContentControl (I will use ContentControl as a base class). A virtual method SelectTemplate which provides logic to return the appropriate template based on the value of the Priority property.

 

Follow these steps to implement custom data template selector in your app:

Step 1. Add DataTemplate abstract class at the top of MainPage.cs

Just below the namespace declaration in MainPage.cs add the code for DataTemplate abstract class.


 

Step 2. Define a class to hold the items of your list box

We would be binding the items of the listbox with a list of items of a specific class type. So define a class which would hold an item of the listbox. Here we are using a Quote class which has two data members, shortmessage to hold the quotation and type to determine the data template to be used. It will let me choose to add either a quote or an ad.


Step 3. Create a custom data template selector by inheriting the abstract class defined above

To create a custom data template selector, you first need to define a class that inherits from the DataTemplate abstract class defined above. Then an instance of this custom data template selector can be assigned to the template selector property of the element. I will create a QuoteTemplateSelector which will have two data templates in it. Using this data template selector I wished to inserts ads after certain items in my listbox. You can have as many DataTemplates as you wish within this template selector class. The screen shot below shows that within the SelectTemplate method each item is checked and the data template to be used is determined based on the value of `type’ variable of that item.


 

Step 4. Add the local reference to the project in MainPage.xaml

Simply add a reference to make the classes defined in the project available in the XAML part.

xmlns:local=”clr-namespace:Custom_Data_Template”

Step 5. Add the ListBox in MainPage.xaml and define its DataTemplate

Next you need to add a listbox control in the MainPage.xaml of your app and define its data template. Within the data template of the listbox we will define the design of each of the data templates which we declared in the QuoteTemplateSelector class. Remember it had 2 data templates, BQuotes and Ad. So we define both the templates as shown below. The data template ad was supposed to display as but for the sake of convenience we will just display a rectangle in that area. You can add ads or any other item in its place.

Note: Visual Studio may show the XAML to be invalid but when you build and deploy the project, it will run without any glitches.

 


Step 6. Add a few items to the listbox.

Just add a few random items to the listbox and see if it works. I have added a few quote type items and an ad type item to the listbox.


Deploy the app and see how your list looks. Its working for me and you could see that a green rectangle appears after 5 items in the listbox. Get creative and you could use it for various purposes in your app.

 

Download the source code of this project here,

Download full project Custom-Data-Template.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.

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