New to Telerik UI for WPF? Download free 30-day trial

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

Vertical Tiles Alignment Top WPF

  • Bottom Vertical Tiles Alignment Bottom WPF

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

Group Template WPF

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

Group Header Visibility WPF

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

Group Header Height WPF

In this article