Windows Phone - DataTemplateSelector

In this article I will tell you what DataTemplateSelector is, how to create abstract and custom DataTemplateSelector classes in Windows Phone 8. What is DataTemplateSelector? Is a class that provides a selection for a DataTemplate based on a data object and data related item ( msdn ). In other words, if you have a valid ListBox, and you want to display in it, at the same time, more than one DataTemplate (display style) for different data, then you need to use a DataTemplateSelector with which you can create your own logic to select a DataTemplate. For the best for clarity, consider how to implement the abstract class DataTemplateSelector. Now let's create an abstract class (for those who don’t know which class is called abstract read msdn) which is derived from ContentControl in it, using the virtual SelectTemplate method, the logic will be provided to return the corresponding template, and we will overload OnContentChanhed which comes from the base class.
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);
    }
}
Next, you need to create a so-called "custom" DataTemplateSelector which will be inherited from DataTemplateSelector, so that you can select DataTemplate. Everything is simple here.
public class MyTemplateSelector : DataTemplateSelector
{
    public DataTemplate Maximum { get; set; }
    public DataTemplate Middle { get; set; }
    public DataTemplate Minimum { get; set; }
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        var myItem = item as Data;
        if (myItem != null)
        {
            switch (myItem.Type)
            {
                case "Maximum":
                    return Maximum;
                case "Middle":
                    return Middle;
                case "Minimum":
                    return Minimum;
            }
        }
        return base.SelectTemplate(item, container);
    }
}
Now, let's go through our “custom” DataTemplateSelector a little bit. This is a regular class that inherits from DataTemplateSelector, it defines three properties Maximum, Middle, Mimimum that are DataTemplate for selecting templates. Next, the SelectTemplate method is reloaded, in which the switch conditions determine the conditions for selecting the corresponding DataTemplate. After this, we write a simple data class that will have properties for binding data to our ListBox and make several constructors for our own DataTemplate separately:
public class Data
{
    public string Name { get; set; }
    public string Description { get; set; }
    public string Images { get; set; }
    public string Type { get; set; }
    #region Constructor
    public Data(string description, string name, string images, string type)
    {
        Description = description;
        Name = name;
        Images = images;
        Type = type;
    }
    public Data(string description, string name, string type)
    {
        Description = description;
        Name = name;
        Type = type;
    }
    public Data(string description, string type)
    {
        Description = description;
        Type = type;
    }
    #endregion
}
We did the most difficult, all that remains for us is to create a ListBox with three different templates (Maximum, Middle, Minimum) and a binding to our "custom" DataTemplateSelector, and of course fill our ListBox.XAML ListBox:
And finally, filling in the data, you can add or reload the OnNavigatedTo method after initialization, or you can come up with something else, this is not so important:
var list = new List();
var itemData0 = new Data("Notebook", "Dell", "Assets/BrandIcon/dellIcon.jpg", "Maximum");
var itemData1 = new Data("Mouse", "Zalman", "Middle");
var itemData2 = new Data("Ultrabook", "LG", "Assets/BrandIcon/lgIcon.jpg", "Maximum");
var itemData3 = new Data("Other", "Minimum");
list.Add(itemData0);
list.Add(itemData1);
list.Add(itemData2);
list.Add(itemData3);
MyListBox.ItemsSource = list;
That's all, you can compile and watch how three different DataTemplate are displayed in our ListBox at once. To better understand how it works, assemble the project yourself, if it doesn’t work, then here is the GitHub source. Write, try, if you ask questions, I will be happy to help :)

Also popular now: