Implementing Windows Phone 7 DataTemplateSelector and CustomDataTemplateSelector

by WindowsPhoneGeek

In this article I am going to explain how to create a DataTemplateSelector abstract class  and custom DataTemplateSelector in Silverlight for Windows Phone 7. Basically a DataTemplateSelector will provide a way to choose a DataTemplate based on the data object and the data-bound element. Typically, you need some kind of 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.

In short: DataTemplateSelector enables you to write some logic that chooses what DataTemplate to use for a particular item. You could even create an entirely new data template if needed to.

NOTE: DataTemplateSelector is a well known class in WPF but it is still not available for Silverlight.

Here is a popular question that I found while browsing through the dev forums:

"I have a list of different types of elements. I would like to display a different data template for different list elements, based on what type it is. "

The answer to this question is to use a kind of DataTemplateSelector. So in this article  I will first explain how to implement a DataTemplateSelector abstract class and after that I will demonstrate how to implement your own CustomDataTemplateSelector . The final result is shown on the right image.

Implementing DataTemplateSelector abstract class

There are lots of different ways in which you can create a dynamic DataTemplateSelector. You can grab a piece of code from the default WPF implementation or try a different approach with ContentPtesenter of ValueConverter etc. In this article I will demonstrate how to create a DataTemplateSelector which derives from ContentControl (I will use ContentControl as a base class).

The first thing I need to mention is that I will create an abstract class with a virtual method SelectTemplate which provides logic to return the appropriate template based on the value of the Priority property (when overridden in any particular class that derives from DataTemplateSelector). I will also override the OnContentChanhed which comes from the base class. The source code is as follows:

public abstract class DataTemplateSelector : ContentControl
{
    public virtual DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        return null;
    }

    protected override void OnContentChanged(object oldContent, object newContent)
    {
        base.OnContentChanged(oldContent, newContent);

        ContentTemplate = SelectTemplate(newContent, this);
    }
}

How to create a CustomDataTemplateSelector

To create a custom data template selector first create a class that inherits from DataTemplateSelector and after that override the SelectTemplate method. Once your class is defined you can assign an instance of the class to the template selector property of your element.

I will create a FoodTemplateSelector class that will contain three different DataTemplates: Healthy, UnHealthy and NotDetermined. In the SelectTemplate method I will add some conditions that will select the appropriate DataTemplate based on a data context property value. Basically we will choose  the right template based on the Type property value of our data source.

The FoodTemplateSelector class source code is as follows:

public class FoodTemplateSelector : DataTemplateSelector
{
    public DataTemplate Healthy
    {
        get;
        set;
    }

    public DataTemplate UnHealthy
    {
        get;
        set;
    }

    public DataTemplate NotDetermined
    {
        get;
        set;
    }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        Data foodItem = item as Data;
        if (foodItem != null)
        {
            if (foodItem.Type == "Healthy")
            {
                return Healthy;
            }
            else if (foodItem.Type == "NotDetermined")
            {
                return NotDetermined;
            }
            else
            {
                return UnHealthy;
            }
        }

        return base.SelectTemplate(item, container);
    }
}

And here is how our data class should looks like:

public class Data
{
    public string Name
    {
        get;
        set;
    }

    public string Description
    {
        get;
        set;
    }

    public string IconUri
    {
        get;
        set;
    }

    public string Type
    {
        get;
        set;
    }
}

I will use a data bound ListBox in order to demonstrate the usage of the FoodTemplateSelector.  Here is the source code:

public MainPage()
        {
            InitializeComponent();

            List<Data> list = new List<Data>();
            Data item0 = new Data() { Name = "Tomato", IconUri = "Images/Tomato.png", Type = "Healthy" };
            Data item1 = new Data() { Name = "Beer", IconUri = "Images/Beer.png", Type = "NotDetermined" };
            Data item2 = new Data() { Name = "Fries", IconUri = "Images/fries.png", Type = "Unhealthy" };
            Data item3 = new Data() { Name = "Sandwich", IconUri = "Images/Hamburger.png", Type = "Unhealthy" };
            Data item4 = new Data() { Name = "Ice-cream", IconUri = "Images/icecream.png", Type = "Healthy" };
            Data item5 = new Data() { Name = "Pizza", IconUri = "Images/Pizza.png", Type = "Unhealthy" };
            Data item6 = new Data() { Name = "Pepper", IconUri = "Images/Pepper.png", Type = "Healthy" };
            list.Add(item0);
            list.Add(item1);
            list.Add(item2);
            list.Add(item3);
            list.Add(item4);
            list.Add(item5);
            list.Add(item6);

            this.listBox.ItemsSource = list;
                
        }

Next I will create three different DataTemplates and will set them as an ItemTemplate of the ListBox. Note that each template is independent and not connected with the rest ones. This means that you are free to add whatever element you want in each of the templates. So you have one data source in three different Views.

The final result can be seen in the image on the left. And here is how each of the templates looks like:

Here is how the source code should looks like:

<ListBox x:Name="listBox" HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <local:FoodTemplateSelector Content="{Binding}">
                <local:FoodTemplateSelector.Healthy>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Background="YellowGreen" Width="400" Margin="10">
                            <Image Source="{Binding IconUri}" Stretch="None"/>
                            <TextBlock Text="{Binding Name}" FontSize="40" Foreground="Black" Width="280"/>
                            <TextBlock Text="healty" />
                        </StackPanel>
                    </DataTemplate>
                    </local:FoodTemplateSelector.Healthy>
                <local:FoodTemplateSelector.UnHealthy>
                    <DataTemplate>
                        <Border BorderBrush="Red" BorderThickness="2"  Width="400" Margin="10">
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding IconUri}" Stretch="None"/>
                                <TextBlock Text="{Binding Name}" FontSize="40" Width="280"/>
                            <Image Source="Images/attention.png" Stretch="None" Margin="10,0,0,0"/>
                        </StackPanel>
                        </Border>
                    </DataTemplate>
                </local:FoodTemplateSelector.UnHealthy>
                <local:FoodTemplateSelector.NotDetermined>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Background="Gray" Width="400" Margin="10">
                            <Image Source="{Binding IconUri}" Stretch="None"/>
                            <TextBlock Text="{Binding Name}" FontSize="40" Width="280"/>
                            <Image Source="Images/question.png" Stretch="None" Margin="10,0,0,0"/>
                        </StackPanel>
                    </DataTemplate>
                </local:FoodTemplateSelector.NotDetermined>
            </local:FoodTemplateSelector>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

An the final result : each item uses different template depending on the Type property value:

Here are some helpful links with another approach of DataTemplateSelector  implementation:

• Using a ValueConverter as a DataTemplateSelector in Silverlight
• DataTemplate Selector with Silverlight

That was all about how to implement a DataTemplateSelector abstract class and how to use it in Silverlight for Windows Phone 7. You can find the full source here:

I hope that the article was helpful.

You can also follow us on Twitter @winphonegeek

Comments

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        ItemViewModel model = item as ItemViewModel;
        ItemType itemType;
        // Sample data in the designer uses a faked ItemViewModel
        if(model == null)
        {
            Type modelType = item.GetType();
            PropertyInfo info = modelType.GetProperty("ItemType");
            itemType = (ItemType)info.GetValue(item, null);
        }
        else
        {
            itemType = model.ItemType;
        }

        switch(itemType)
        {
            case ItemType.SetSeparator:
                return SetSeparator;
            case ItemType.ColorIndicator:
                return ColorIndicator;
            default:
                return SetSeparator;
        }
        return base.SelectTemplate(model, container);
    }

Data item0 = new Data() { Name = "Tomato", Type = "Healthy" };
Data item1 = new Data() { Name = "Ice-cream", Type = "Healthy" };
Data item2 = new Data() { Name = "Pepper", Type = "Healthy" };
Data item3 = new Data() { Name = "Beer", Type = "Healthy" };
Data item4 = new Data() { Name = "Fries", Type = "Unhealthy" };
Data item5 = new Data() { Name = "Sandwich", Type = "Unhealthy" };
Data item6 = new Data() { Name = "Pizza", Type = "Unhealthy" };

xmlns:local="clr-namespace:your-namespace-here"