Layout issue with Telerik RadTileList control

Question

While I've already submitted a support ticket to Telerik on this issue, I'm also posting the question here hoping someone may have a solution:

The RadTileList control is adding extra padding at the top and at the bottom of the tiles. To demonstrate this, I've created a simple WPF application that has three tiles. The app consists of a Telerik RadTileList control contained within a red border (to show where the control begins and ends), and the RadTileList contains three hardcoded Telerik Tiles. Two of them are the "Single" sized tiles, and the other one is a "Double". What I'm trying to do is get the tiles to align to the upper left-hand corner of the control.

The following is the xaml:

<Window x:Class="TelerikRadTileListIssue.MainWindow"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
                Title="MainWindow" Height="522" Width="559">

    <Border BorderBrush="Red" BorderThickness="2">
        <telerik:RadTileList >
            <telerik:RadTileList.Items>
                <telerik:Tile TileType="Single">
                    <TextBlock>Tile 1</TextBlock>
                </telerik:Tile>

                <telerik:Tile TileType="Double">
                    <TextBlock>Tile 2</TextBlock>
                </telerik:Tile>

                <telerik:Tile TileType="Single">
                    <TextBlock>Tile 3</TextBlock>
                </telerik:Tile>

            </telerik:RadTileList.Items>
        </telerik:RadTileList>

    </Border>
</Window>

Answer 1

I have found a better solution. I tried out the DevExpress WPF TileLayoutControl. With the exception of not allowing the user to select a tile, it does just about everything else the Telerik TileListControl does, and more. Most importantly, if I set the Padding property to "0", the tiles perfectly align to the upper-lefthand corner. I think I'm starting to become more of a DevExpress fan now.

I'm regretting giving up 100 points of my rep on StackoverFlow for a question that nobody seems to want to answer, but, hindsight is 20/20. If somebody finds a solution to the Telerik issue, I will be grateful.

Answer 2

Telerik responded to my question with a solution that [somewhat] works. Here is what they wrote:

You may try to reset the Padding of TileListPanel - by default we set this value to 30 pixels on the top for the grouping functionality of this component. Directly setting this value to 0 will reset the distance on the top, as shown below:

<Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <telerik:TileListPanel Padding="0" AllowDrop="True" Background="Transparent" CanHorizontallyScroll="True" CanVerticallyScroll="False" IsItemsHost="True" telerik:ScrollingSettingsBehavior.IsEnabled="True" telerik:ScrollingSettingsBehavior.ScrollStepTime="0:0:0.05" ScrollOwner="{x:Null}" telerik:ScrollingSettingsBehavior.ScrollStep="24" telerik:ScrollingSettingsBehavior.ScrollAreaPadding="200"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>

Also, I am pasting you the full template with this modification for RadTileList:

<Style x:Key="RadTileListStyle1" TargetType="{x:Type telerik:RadTileList}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:RadTileList}">
                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <StackPanel Orientation="Horizontal">
                                <ContentControl x:Name="PART_PanoramaBackground" ClipToBounds="True" Content="{TemplateBinding PanoramaBackground}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                            </StackPanel>
                            <ScrollViewer x:Name="PART_ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CanContentScroll="True" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" Margin="0" Padding="{TemplateBinding Padding}" VerticalScrollBarVisibility="Hidden">
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                                <ItemsPresenter/>
                            </ScrollViewer>
                            <ContentPresenter x:Name="dragVisualPlaceholder" HorizontalAlignment="Stretch" Visibility="Collapsed" VerticalAlignment="Stretch"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <telerik:TileListPanel Padding="0" AllowDrop="True" Background="Transparent" CanHorizontallyScroll="True" CanVerticallyScroll="False" IsItemsHost="True" telerik:ScrollingSettingsBehavior.IsEnabled="True" telerik:ScrollingSettingsBehavior.ScrollStepTime="0:0:0.05" ScrollOwner="{x:Null}" telerik:ScrollingSettingsBehavior.ScrollStep="24" telerik:ScrollingSettingsBehavior.ScrollAreaPadding="200"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="GroupTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
        </Style>

*Please give it a try and let us know how we can assist you further.

Regards, Vanya Pavlova Telerik*

Here are the results:

When I first launch the app:

If I resize it ever so slightly:

If I resize it a significant amount:

As shown in the image above, the tiles don't consistently stay positioned to the upper-left. For now, I will incorporate this code into my app, but I'm going to follow up again with Telerik and see if there is another layer in this solution.

Answer 3

I tried playing around with the layout templates to no avail, then I set the height of the RadTileList. It looks like the ItemsPanelTemplate:TileListPanel behaves like a WrapPanel. Stretching itself until MaxHeight.

You will also need to set a different height if you add/remove or change the TileType of the tiles.

Pic is here: LayoutIssue.jpg

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    Title="MainWindow" >
<Window.Resources>
    <DataTemplate x:Key="DeptMapsTileGroupTemplate">
        <TextBlock Margin="0"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Top"
                   FontFamily="Segoe UI"
                   FontSize="28"
                   Foreground="Black"
                   Text="{Binding Header}" />

    </DataTemplate>
    <telerik:TileGroup x:Key="tilegroup"
                       DisplayIndex="0"
                       Header="Group" />
</Window.Resources>
<Grid VerticalAlignment="Top">
    <telerik:RadTileList GroupTemplate="{StaticResource DeptMapsTileGroupTemplate}" Height="400">
        <telerik:RadTileList.Items>
            <telerik:Tile TileType="Single" Group="{StaticResource tilegroup}">
                <TextBlock>Tile 1</TextBlock>
            </telerik:Tile>

            <telerik:Tile TileType="Double" Group="{StaticResource tilegroup}">
                <TextBlock>Tile 2</TextBlock>
            </telerik:Tile>

            <telerik:Tile TileType="Single" Group="{StaticResource tilegroup}">
                <TextBlock>Tile 3</TextBlock>
            </telerik:Tile>

        </telerik:RadTileList.Items>
    </telerik:RadTileList>
</Grid>

Answer 4

Create a DataTemplate for your RadTileList and in that template set VerticalAlignment property to Top...

<DataTemplate x:Key="GroupTemplate">
    <TextBlock Text="{Binding Header}"
        FontSize="20"
        FontFamily="Segoe UI"
        Margin="10"            
        VerticalAlignment="Top"
        HorizontalAlignment="Left"/>
</DataTemplate>

<telerik:RadTileList GroupTemplate="{StaticResource GroupTemplate}">