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)

Was this article helpful? Yes No

Give article feedback

Tell us how we can improve this article

Dummy