Edit this page

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}"/>