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 choice of DataTemplate based on a data object and an item associated with data ( msdn ). In other words, if you have a ListBox, and you want to display 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. clarity consider how to implement the abstract class DataTemplateSelector. Now we will create an abstract class (for those who do not know which class is called abstract read msdn ) which is derived from ContentControl in it using the virtual method SelectTemplate will provide try to return the appropriate template, and 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 that will be inherited from DataTemplateSelector, this is in order to be able to select a 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); } } 

And now let's take a little walk through our “custom” DataTemplateSelector. This is a common class that is inherited from DataTemplateSelector, it defines three properties Maximum, Middle, Mimimum which are DataTemplate for selecting templates. Next, there is a reboot of the SelectTemplate method in which the conditions for selecting the appropriate DataTemplate are defined through the switch statement. After that, we write a simple data class that will have properties for binding data to our ListBox and make several constructors for different DataTemplates 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 } 

The most difficult thing we have done, all we have to do is create a ListBox with three different templates (Maximum, Middle, Minimum) and attach to our “custom” DataTemplateSelector, and of course fill our ListBox.XAML ListBox:

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <ListBox x:Name="MyListBox"> <ListBox.ItemTemplate> <DataTemplate> <local:MyTemplateSelector> <local:MyTemplateSelector.Maximum> <DataTemplate> <StackPanel Orientation="Horizontal"> <Image Margin="8" Source="{Binding Images}" VerticalAlignment="Center" Width="48" Height="48"/> <StackPanel> <TextBlock Margin="8" Text="{Binding Name}" Width="250" VerticalAlignment="Top" HorizontalAlignment="Left"/> <TextBlock Width="100" Text="{Binding Description}" Margin="8,0,8,8" VerticalAlignment="Top" HorizontalAlignment="Left"/> </StackPanel> </StackPanel> </DataTemplate> </local:MyTemplateSelector.Maximum> <local:MyTemplateSelector.Middle> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Margin="8" Text="{Binding Name}" Width="250" VerticalAlignment="Top" HorizontalAlignment="Left" /> <TextBlock Width="250" Text="{Binding Description}" Margin="8,0,8,8" VerticalAlignment="Top" HorizontalAlignment="Left"/> </StackPanel> </DataTemplate> </local:MyTemplateSelector.Middle> <local:MyTemplateSelector.Minimum> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Margin="8" Text="{Binding Description}" Width="250" VerticalAlignment="Top" HorizontalAlignment="Left" /> </StackPanel> </DataTemplate> </local:MyTemplateSelector.Minimum> </local:MyTemplateSelector> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid> 

And finally, filling the data, you can add or reload the OnNavigatedTo method after initialization, or even think up something else, this is not so important:

 var list = new List<Data>(); 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 it, you can compile and watch how three different DataTemplates are displayed in our ListBox at once. To better understand how everything works, collect the project yourself, if you don’t get it, here’s the GitHub source. Write, try, and ask questions, I’ll be happy to help :)