Make more room for Group Header

[Paul]

What is the best way to modify the styles or templates to allow exclusive room for the Group Headers vertically?  It seems that depending on the size of the window, the tiles expand to overlap the area that I would have expected to be reserved for the Group Header. 

Thanks
Paul

[Vanya Pavlova]

Hello Paul,


Thank you for contacting us!
The default GroupTemplate of RadTileList is a Grid layout container with HorizontalAlignment, VerticalAlignment properties set to Stretch. You may predefine the group template with your own and set minimal (or fixed) height, that will be exclusively reserved for the group header, as shown below:

<DataTemplate x:Key="groupTemplate">
        <TextBlock Text="Hello" MinHeight="50" ....>
    </DataTemplate>
<telerik:RadTileList GroupTemplate="{StaticResource groupTemplate}" ....>

Can you please give it a try and let us know how it goes? 


Regards,
Vanya Pavlova
Telerik

[Paul]

Yeah, no.  Doesn't seem to work for me.  I attached a screen shot and the xaml that I am using is below.

You can see that the tile area is overlaying the Group Header area.  I am pretty sure I am doing what you showed with the GroupTemplate.  But I am sure I am missing something somewhere.

<Window x:Class="Example2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:telerikControls="clr-namespace:Telerik.Windows.Controls.Primitives;assembly=Telerik.Windows.Controls"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="350"
Width="525">
<Grid>
<Grid.Resources>

<DataTemplate x:Key="GroupTemplate">
<Border BorderThickness="1"
BorderBrush="Transparent"
Margin="5"
Padding="5"
MinHeight="150">
<StackPanel Orientation="Horizontal">
<Rectangle Width="100"
Height="100"
Stroke="Black" StrokeThickness="1" VerticalAlignment="Center" />
<TextBlock Text="{Binding}"
Margin="5,0,0,5"
FontSize="64"
FontWeight="Bold" />
</StackPanel>
</Border>
</DataTemplate>

<telerik:TileGroup Header="Group 1 that will over flow into tile area"
x:Key="group1" />

<telerik:TileGroup Header="Group 2"
x:Key="group2" />
</Grid.Resources>

<!-- Grouped Tile list, all in xaml -->
<telerik:RadTileList Grid.Row="0"
Grid.Column="1"
Background="LawnGreen"
ScrollViewer.HorizontalScrollBarVisibility="Auto"

GroupTemplate="{StaticResource GroupTemplate}"
Margin="10">
<telerik:Tile Group="{StaticResource group1}" />
<telerik:Tile Group="{StaticResource group1}" />
<telerik:Tile Group="{StaticResource group1}" />

<telerik:Tile Group="{StaticResource group2}" />
<telerik:Tile Group="{StaticResource group2}" />
<telerik:Tile Group="{StaticResource group2}" />
<telerik:Tile Group="{StaticResource group2}" />
<telerik:Tile Group="{StaticResource group2}" />
<telerik:Tile Group="{StaticResource group2}" />
<telerik:Tile Group="{StaticResource group2}" />
</telerik:RadTileList>

</Grid>
</Window>

Thanks
Paul

[Paul]

If you run the xaml that I sent, resize the window to see the effect.  If the window is large enough or there are not a large amount of tiles in the group, everything is ok.  If you add more tiles, and size the window down a bit, the tiles reposition over top of the group header.  It appears that the ItemsPresenter is overlaying the area where the Group header goes.  It appears that they are in the same cell in the grid in the layout. 

[Vanya Pavlova]

Hello Paul,



Thank you for sharing this info with us! We spent some time to provide some tests with the snippet you provided. We can definitely confirm that this is not the desired behavior you should experience.  
Rather unfortunately we cannot offer you an appropriate workaround at this stage. 


We're currently planning to improve the experience of RadTileList in our future releases. 


Please excuse us for any inconvenience caused!


Regards,
Vanya Pavlova
Telerik

[Paul]

Thank you for the follow up.  When Telerik is able to release a version that provides this capability, could you please let me know?

thanks again
Paul

[Dimitrina]

Hi Paul,

I am afraid we cannot commit to a specific date when we will release a stable version of the planned improvements. We are going to let you know once we have more information on the matter.

Regards,
Didie
Telerik

[Paul]

Thanks, I understand.  I was just asking for a ping or quick post to this thread when and if Telerik does decide to release a version with the capability.

Paul

[Muhammad Ummar]

Any update on this? I need to control the padding between Group header and Actual Tiles, but I there doesn't seems to be a way for this.

[Dimitrina]

Hello Paul,

We are still working on improving the grouping experience with RadTileList. 

Regards,
Didie
Telerik

 

 

[Maya]

Hi Muhammad,


With Q3 2014 we introduced some changes to the way RadTileList behaves in grouped scenario. And now you can control the height of the group headers (through GroupHeaderHeight property), their visibility (through GroupHeaderVisibility property), the alignment of tile independently of the group header (throught VerticalTilesAlignment property). 
Please check out this article for more details on those features.



Regards,
Maya
Telerik