DataTemplateSelector in XAML – Versatile XAML Controls

At work this week I had a need for a versatile control that would display differently based on the contents of my ViewModel for a Windows Store app. The idea was I could have several slightly different objects, that combined would form a page that would display all the objects in the best format. My initial thought was to create a custom control that would handle this functionality, and could hide/show elements as appropriate, but after discussion with a colleague the solution appeared to be an excellent control, the DataTemplateSelector in XAML.

To summarise the purpose of this control, I think MSDN explains it well:

Typically, you create 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.

The way I have used this class is as follows. My ViewModel had a Property called Type that recorded which template I required for display. I created a class that inherited from the DataTemplateSelector class and created and override for the SelectTemplate method. I also created a Property for each type of template I would require. My SelectTemplate method then returned the correct property to return the DataTemplate I required.

Creating the DataTemplateSelector

This code is very simple. Simply, we cast the item as our ViewModel we are using for the data, and then switch based on the type, returning the correct property. My example only has two types, but you can have as many as you like.

Adding DataTemplateSelector in XAML

So how do we use this in our markup? If your control is not in the same namespace as your XAML page, then you will need to reference the namespace, however we’ll assume it is in my example so I will just use local:

We add the the DataTemplates and the DataTemplateSelector to our Resources. I’ve added it to the parent Grid’s resources here. You can see we just directly assign the DataTemplates to the correct properties using the StaticResource identifier.

Finally we need to actually use our DataTemplateSelector we have now set up. For this example I will use a ListBox, but many elements accept a DataTemplateSelector.

It’s as simple as that. We’ve done all the hard work at this stage, we just need to assign our Static resource for the custom DataTemplateSelector, and the control will do the rest.

I’ve provided a simple example app below that can be downloaded. The app is simply an example of this concept so many other design principles are missing, but it should give you a good idea of how template selectors work:

Download: DataTemplateSelector Example 186.4 KB

One thought on “DataTemplateSelector in XAML – Versatile XAML Controls

  1. Thanks for the post! It was really helpful.

    I had to make one minor tweak to use it with Windows 10 UWP app. I changed the DataTemplateSelector from “public override DataTemplate SelectTemplate(object item, DependencyObject container)” to “protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)”.

Leave a Reply