Grouping

RadTileList can arrange tiles into separate sections depending on each user's requirements. Those groups can be modified through its GroupTemplate property as follows:

Example 1: Defining GroupTemplate

    <Grid.Resources> 
      <DataTemplate x:Key="GroupTemplate"> 
        <TextBlock Text="{Binding}" FontWeight="Bold"/> 
      </DataTemplate> 
      <DataTemplate x:Key="ItemTemplate"> 
        <TextBlock Text="{Binding FirstName}"/> 
      </DataTemplate> 
    </Grid.Resources> 
    <telerik:RadTileList GroupTemplate="{StaticResource GroupTemplate}"/> 

You can get all generated sections through TileList's Groups property of type ObservableCollection <TileGroup>.

Manually Generated Tiles

When working with manually generated tiles, you need to declare each group separately and place the tiles in its Items collection. Each one can have custom Header and DisplayIndex.

The definition of RadTileList in such scenario will look like:

Example 2: Manually generated tiles

<telerik:RadTileList x:Name="RadTileList" 
                       GroupTemplate="{StaticResource GroupTemplate}"> 
  <telerik:RadTileList.Groups> 
    <telerik:TileGroup Header="Europe" DisplayIndex="0"> 
      <telerik:TileGroup.Items> 
        <telerik:Tile Background="#FF006AC1" Content="Italy" /> 
        <telerik:Tile Background="#FF006AC1" Content="Germany" /> 
      </telerik:TileGroup.Items> 
    </telerik:TileGroup> 
    <telerik:TileGroup Header="Asia" DisplayIndex="1"> 
      <telerik:TileGroup.Items> 
        <telerik:Tile Background="#FF006AC1" Content="China" /> 
        <telerik:Tile Background="#FF006AC1" Content="India" /> 
      </telerik:TileGroup.Items> 
    </telerik:TileGroup> 
  </telerik:RadTileList.Groups> 
</telerik:RadTileList> 

And the result will be:

Grouping SL

Autogenerated Tiles

RadTileList gives the user an option to bind it directly to particular data source and display each item in a tile. In this case if you want to group them by a particular property, you can simply set GroupMember property of TileList and have all groups generated for you automatically.

For example, if we use the source available in Autogenerated tiles article, we can define RadTileList as:

Example 3: Using GroupMember property

<telerik:RadTileList x:Name="RadTileList2" 
               GroupMember="Occupation" 
               ItemTemplate="{StaticResource ItemTemplate}"/> 

Grouping Autogenerated Tiles SL

CollectionViewSource with GroupDescriptions

RadTileList accepts CollectionViewSource as data source, it will evaluate its GroupDescriptions and generate corresponding groups based on that.

For example:

Example 4: Defining CollectionViewSource with GroupDescriptors

  <Grid.Resources> 
    <CollectionViewSource x:Key="GroupedItems" Source="{Binding Employees}" > 
      <CollectionViewSource.GroupDescriptions> 
        <PropertyGroupDescription PropertyName="Occupation" /> 
      </CollectionViewSource.GroupDescriptions> 
    </CollectionViewSource> 
  </Grid.Resources> 
  <telerik:RadTileList x:Name="RadTileList3" 
                         ItemsSource="{Binding Source={StaticResource GroupedItems}}" 
                         ItemTemplate="{StaticResource ItemTemplate}"/> 

The result will be again:

Grouping Autogenerated Tiles SL

Custom Offset Between Groups

As of Q1 2016 RadTileList exposes a new dependency property - GroupOffset. Through it, the offset between the groups of RadTileList can be controlled. It accepts value of type double and by default it is set to 50.0.

Example 5: Setting the GroupOffset property

<telerik:RadTileList x:Name="RadTileList4" 
                     GroupOffset="60.0"/> 

RadTileList supports grouping at one level only. If you want to modify the group, you need to clear the GroupDescriptions collection of the source and add new PropertyGroupDescription after that.

See Also

In this article