Set Group's Display Indices

RadTileList gives the opportunity to modify the order the groups will be displayed. Depending on the way you define your tiles, you can either set it directly in xaml or in AutogeneratingTile event handler.

Manually Generated Tiles

Once you create the groups in the definition of the tiles, you can set directly the properties of the group there. For example:

Example 1: Setting the DisplayIndex property of the TileGroups

<telerik:RadTileList x:Name="RadTileList"> 
  <telerik:RadTileList.Groups> 
    <telerik:TileGroup Header="Europe" DisplayIndex="2"> 
      <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:TileGroup Header="Africa" DisplayIndex="0"> 
      <telerik:TileGroup.Items> 
        <telerik:Tile Background="#FF006AC1" Content="Nigeria" /> 
        <telerik:Tile Background="#FF006AC1" Content="Egipt" /> 
      </telerik:TileGroup.Items> 
    </telerik:TileGroup> 
  </telerik:RadTileList.Groups> 
</telerik:RadTileList> 
<telerik:RadTileList GroupTemplate="{StaticResource GroupTemplate}"/> 

Manually Generated Tiles Group Display Index SL

Autogenerated Tiles

When you set ItemsSource of RadTileList and you need to control the order of the groups, you need to handle AutoGeneratingTile event and set the DisplayIndex of a group there. For example, if we work with the source defined in Autogenerated tiles article:

Example 2: Subscribing to the AutoGeneratingTile event

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

Example 3: Handling the AutoGeneratingTile event

private void OnAutoGeneratingTile(object sender, AutoGeneratingTileEventArgs e) 
{ 
    var item = e.Tile.DataContext as Employee; 
    if (item.Occupation.Contains("Manager")) 
    { 
        e.Tile.Group.DisplayIndex = 0; 
        e.Tile.Group.Header = "Managers"; 
    } 
} 

And the result will be:

Autogenerated Tiles Display Index SL

In this article