Edit this page

Backward Compatibility

Q3 2014

  • Panel of RadTileList is TileListGroupPanel rather than TileListPanel

  • Each group is represented by TileGroupContainer rather than ContentControl

  • Group property of Tile is now a TileGroup type rather than just an object

  • Group property of Tile is not settable and you can only read its value

Before:

Example 1: RadTileList before Q3 2014

        <Grid.Resources>
           <telerik:TileGroup Header="Continent" x:Key="Group1" />
           <telerik:TileGroup Header="Country" x:Key="Group2" />
        </Grid.Resources>
        <!--<telerik:RadTileList x:Name="RadTileList"
                 GroupTemplate="{StaticResource GroupTemplate}">
        <telerik:Tile Group="{StaticResource Group1}" Content="Europe" />
        <telerik:Tile Group="{StaticResource Group2}" Content="Germany" />
        <telerik:Tile Group="{StaticResource Group1}" Content="Asia" />
        <telerik:Tile Group="{StaticResource Group2}" Content="Italy" />
        </telerik:RadTileList>-->

After Q3 2014

Example 2: RadTileList after Q3 2014

        <telerik:RadTileList x:Name="RadTileList">
            <telerik:RadTileList.Groups>
                <telerik:TileGroup Header="Continent">
                          <telerik:TileGroup.Items>
                        <telerik:Tile Content="Asia"/>
                        <telerik:Tile Content="Europe"/>
                    </telerik:TileGroup.Items>
                </telerik:TileGroup>
                <telerik:TileGroup Header="Country">
                    <telerik:TileGroup.Items>
                        <telerik:Tile Content="Italy"/>
                        <telerik:Tile Content="Germany"/>
                    </telerik:TileGroup.Items>
                </telerik:TileGroup>
            </telerik:RadTileList.Groups>
        </telerik:RadTileList>
  • Group property of Tile cannot be set through Style since it can be only read. Since Tile belongs to a group you need to add it in its Items collection when they are manually generated or set GroupMember property of TileList when bound to data source.

  • Since each group is now represented of TileGroupContainer, if you have custom theme, you need to copy the style for this control in the template of RadTileList:

Example 3: Setting a Style for TileGroupContainer

        <DataTemplate x:Key="GroupTemplate">
          <ContentPresenter Content="{Binding Header}"/>
        </DataTemplate>
        <ItemsPanelTemplate x:Key="GroupPanelTemplate">
          <telerik:TileListPanel x:Name="groupPanelTemplatePanel" VerticalAlignment="{Binding VerticalTilesAlignment, RelativeSource={RelativeSource AncestorType=telerik:RadTileList}}"/>
        </ItemsPanelTemplate>
        <ControlTemplate x:Key="TileGroupContainerTemplate" TargetType="telerik:TileGroupContainer">
          <Grid>
            <Grid.RowDefinitions>
              <RowDefinition Height="{Binding GroupHeaderHeight, RelativeSource={RelativeSource AncestorType=telerik:RadTileList}}"/>
              <RowDefinition />
            </Grid.RowDefinitions>
            <ContentPresenter Content="{Binding Header}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                      Visibility="{Binding GroupHeaderVisibility, RelativeSource={RelativeSource AncestorType=telerik:RadTileList}}"
                      ContentTemplate="{TemplateBinding HeaderTemplate}"/>
            <ItemsPresenter Grid.Row="1" />
          </Grid>
        </ControlTemplate>
        <Style x:Key="TileGroupContainerStyle" TargetType="telerik:TileGroupContainer">
          <Setter Property="Template" Value="{StaticResource TileGroupContainerTemplate}" />
          <Setter Property="HeaderTemplate" Value="{Binding GroupTemplate, RelativeSource={RelativeSource AncestorType=telerik:RadTileList}}" />
          <Setter Property="ItemsPanel" Value="{StaticResource GroupPanelTemplate}" />
          <Setter Property="ItemsSource" Value="{Binding Items}" />
          <Setter Property="Padding" Value="5,0,0,0"/>
          <Setter Property="Header" Value="{Binding Header}" />
          <Setter Property="VerticalContentAlignment" Value="Center"/>
          <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
          <Setter Property="UseLayoutRounding" Value="True"/>
        </Style>
  • If you have custom theme, you need to update the panel of RadTileList and it should be:

Example 4: Updating the panel of RadTileList

        <ItemsPanelTemplate x:Key="RadTileListItemsPanelTemplate">
          <telerik:TileListGroupPanel/>
        </ItemsPanelTemplate>
  • HorizontalScrollBarVisibility property of ScrollViewer is set to Auto and there is no need to set it explicitly in the definition of RadTileList

  • There is GroupTemplate by default and it is not necessary to declare it explicitly in order to see the groups

  • Default value of TileListPanel property Padding is changed to new Thickness(0, 0, 0, 0) rather than Thickness(0, 30, 0, 0)