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)