WPF Data Templates Part 4 – Template Selectors

Please follow and share!

*Note – Class Definition and sample data used in this example are provided in this previous blog post.

Template Selectors allow you to switch the Data Template used on an item being bound based on some logic.  For instance, in a banking application, you may wish an account that has a negative balance to be highlighted with a red background in order to draw the attention of the user.  Other positive balance accounts can be rendered using a different, milder looking template.  To implement a Template Selector, use inheritance through extending the System.Windows.Controls.DataTemplateSelector and overriding the SelectTemplate method. The signature of the method is as follows:

public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container)

In this case, item is the actual object being bound.  You can analyze the properties of the object to determine which template to use when rendering.  In this example, the data template selector will be performing logic on the ImageFavorite class to determine which template to use.  Two data templates have been defined in resources, one being a summary view defined by the SimpleTemplate key, and a more detailed view defined by the DetailedTemplate key.   The logic of the RatedImageTemplateSelector is if the item [ImageFavorite] being bound has a 5 star rating, utilize the detailed template, otherwise have it render using the simple template.  The listing for the RatedImageTemplateSelector is as follows:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows.Controls;

using System.Windows;

namespace TemplateSelector

{

public class RatedImageTemplateSelector : DataTemplateSelector

{

public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container)

{

ImageFavorite obj = item as ImageFavorite;

ContentPresenter pres = container as ContentPresenter;

DataTemplate dataTemplate;

if (obj.ImageRating == 5)

dataTemplate = pres.FindResource("DetailedTemplate") as DataTemplate;

else

dataTemplate = pres.FindResource("SimpleTemplate") as DataTemplate;

return dataTemplate;

}

}

}

In order to utilize the template selector, you need to first declare its namespace in the window tag of the xaml file where it is being used.  In this case the namespace is TemplateSelector which resides in the current project assembly:

xmlns:local="clr-namespace:TemplateSelector"

Then define an instance of the template selector in resources:

<local:RatedImageTemplateSelector x:Key="RatedImageTemplateSelector" />

This instance of the RatedImageTemplateSelector can now be used by the list box rendering ImageFavorite items by assigning it to the ItemTemplateSelector attribute:

<ListBox x:Name="lbResults" Grid.Row="1" Grid.Column="0" Height="240"

HorizontalContentAlignment="Stretch" 

ItemsSource="{StaticResource FavoriteImages}"

ItemTemplateSelector="{StaticResource RatedImageTemplateSelector}" />

Screen shot of two different data templates being rendered in a list box based on logic defined in a template selector:

Sample code for this example can be found here

Please follow and share!