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="RadTileList1">
<telerik:RadTileList.Groups>
<telerik:TileGroup Header="Europe" DisplayIndex="2">
<telerik:TileGroup.Items>
<telerik:Tile Background="#FFA300AB" Content="Italy" />
<telerik:Tile Background="#FFA300AB" Content="Germany" />
</telerik:TileGroup.Items>
</telerik:TileGroup>
<telerik:TileGroup Header="Asia" DisplayIndex="1">
<telerik:TileGroup.Items>
<telerik:Tile Background="#FFA300AB" Content="China" />
<telerik:Tile Background="#FFA300AB" Content="India" />
</telerik:TileGroup.Items>
</telerik:TileGroup>
<telerik:TileGroup Header="Africa" DisplayIndex="0">
<telerik:TileGroup.Items>
<telerik:Tile Background="#FFA300AB" Content="Nigeria" />
<telerik:Tile Background="#FFA300AB" Content="Egipt" />
</telerik:TileGroup.Items>
</telerik:TileGroup>
</telerik:RadTileList.Groups>
</telerik:RadTileList>
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: