Modifying TileList view
Resizing Tile
There are three sizes for tiles:
- Single
- Double
- Quadruple
RadTileList also suggests an option to further customize the size. For the purpose you can set TilePlaceholderSide property to the desired value. It will update the value based on a single size - i.e. setting TilePlaceholderSide="120" will result in having Single tiles sized 120x120, Double - 120x240, Quadruple - 240x240.
VerticalTilesAlignment
RadTileList exposes VerticalTilesAlignment property that controls the position of the tiles independently of the group they belong to. It can be set no matter if being in a grouped state or not. Its type is of type VerticalAlignment and the default value is Center. Modifying it will result in:
- Top
- Bottom
GroupTemplate
RadTileList has GroupTemplate property that control the way the header of a groups looks.
For example:
Example 1: Defining the GroupTemplate
<Grid.Resources>
<DataTemplate x:Key="ItemTemplate">
<TextBlock Text="{Binding FirstName}"/>
</DataTemplate>
<DataTemplate x:Key="GroupTemplate">
<TextBlock Text="{Binding}" FontWeight="Bold" Foreground="#FF006AC1" FontSize="20"/>
</DataTemplate>
<CollectionViewSource x:Key="GroupedItems" Source="{Binding Employees}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="Occupation" />
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</Grid.Resources>
<telerik:RadTileList x:Name="RadTileList"
GroupMember="Occupation"
ItemsSource="{Binding Employees}"
ItemTemplate="{StaticResource ItemTemplate}"/>
GroupHeaderVisibility
RadTileList exposes a GroupHeaderVisibility property that sets whether the headers of the groups will be visible or not. Thus, once you set it to collapse, your control will be organized in groups, but will not have any text above:
Example 2: Setting the GroupHeaderVisibility property
<telerik:RadTileList x:Name="RadTileList1"
GroupHeaderVisibility="Collapsed"/>
GroupHeaderHeight
RadTileList gives the opportunity to set the height of the headers with a single property GroupHeaderHeight.
Example 3: Setting the GroupHeaderHeight property
<telerik:RadTileList x:Name="RadTileList2"
GroupHeaderHeight="100"
GroupTemplate="{StaticResource GroupTemplate}"
ItemsSource="{Binding Source={StaticResource GroupedItems}}"
ItemTemplate="{StaticResource ItemTemplate}"/>