ItemTemplateSelector

This article will show you how to conditionally apply a different data template to RadTileList tiles using the ItemTemplateSelector property.

Assume we have a RadGridView bound to a collection of clubs. Each club has a property StadiumCapacity. What we want to achieve is to apply one data template if the capacity is greater than 50 000 and another otherwise:

Rad Tile List Item Template Selector

To do so follow these steps:

  1. Create a new class which inherits the DataTemplateSelector class (which resides in the System.Windows.Controls assembly).

  2. Override its SelectTemplate method. Based on your conditions - you return the proper DataTemplate that will be applied to the framework element (a tile in our case).

Example 1: Defining the ItemTemplateSelector

public class MyTileTemplateSelector : DataTemplateSelector 
{ 
    public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container) 
    { 
        if (item is Club) 
        { 
            Club club = item as Club; 
            if (club.StadiumCapacity > 50000) 
            { 
                return BigStadium; 
            } 
            else 
            { 
                return SmallStadium; 
            } 
        } 
        return null; 
    } 
    public DataTemplate BigStadium { get; set; } 
    public DataTemplate SmallStadium { get; set; } 
} 

In this case we have two different DataTemplates that could be applied - BigStadium and SmallStadium. Depending on the underlying data we choose / select which template to apply.

  1. In the XAML file define the template selector as a resource and set the properties of the BigStadium and SmallStadium:

Example: Defining the ItemTemplateSelector as a Resource in XAML

<Grid.Resources> 
  <my:MyTileTemplateSelector x:Key="myTileTemplateSelector"> 
    <my:MyTileTemplateSelector.BigStadium> 
      <DataTemplate> 
        <Grid Background="Green"> 
          <Grid.RowDefinitions> 
            <RowDefinition /> 
            <RowDefinition /> 
          </Grid.RowDefinitions> 
          <Grid.ColumnDefinitions> 
            <ColumnDefinition/> 
            <ColumnDefinition/> 
          </Grid.ColumnDefinitions> 
          <TextBlock Grid.Row="0" Grid.Column="0" Text="First Name"/> 
          <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Name}" /> 
          <TextBlock Grid.Row="1" Grid.Column="0" Text="Stadium Capacity"/> 
          <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding StadiumCapacity}" /> 
        </Grid> 
      </DataTemplate> 
    </my:MyTileTemplateSelector.BigStadium> 
    <my:MyTileTemplateSelector.SmallStadium> 
      <DataTemplate> 
        <Grid Background="Red"> 
          <Grid.RowDefinitions> 
            <RowDefinition /> 
            <RowDefinition /> 
          </Grid.RowDefinitions> 
          <Grid.ColumnDefinitions> 
            <ColumnDefinition/> 
            <ColumnDefinition/> 
          </Grid.ColumnDefinitions> 
          <TextBlock Grid.Row="0" Grid.Column="0" Text="First Name"/> 
          <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Name}" /> 
          <TextBlock Grid.Row="1" Grid.Column="0" Text="Stadium Capacity"/> 
          <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding StadiumCapacity}" /> 
        </Grid> 
      </DataTemplate> 
    </my:MyTileTemplateSelector.SmallStadium> 
  </my:MyTileTemplateSelector> 
</Grid.Resources> 
  1. Finally, set the ItemTemplateSelector property of RadTileList:

Example 3: Applying the ItemTemplateSelector

<telerik:RadTileList  x:Name="RadTileList" 
                      ItemTemplateSelector="{StaticResource myTileTemplateSelector}" 
                      ItemsSource="{Binding Clubs}"/> 
In this article
Not finding the help you need? Improve this article