This is a migrated thread and some comments may be shown as answers.

Make more room for Group Header

10 Answers 110 Views
TileList
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 18 Feb 2014, 08:31 PM
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

10 Answers, 1 is accepted

Sort by
0
Vanya Pavlova
Telerik team
answered on 21 Feb 2014, 10:30 AM
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
0
Paul
Top achievements
Rank 1
answered on 21 Feb 2014, 12:13 PM
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
0
Paul
Top achievements
Rank 1
answered on 21 Feb 2014, 12:17 PM
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. 
0
Vanya Pavlova
Telerik team
answered on 26 Feb 2014, 09:40 AM
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
0
Paul
Top achievements
Rank 1
answered on 26 Feb 2014, 12:09 PM
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
0
Dimitrina
Telerik team
answered on 28 Feb 2014, 11:59 AM
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
0
Paul
Top achievements
Rank 1
answered on 28 Feb 2014, 12:28 PM
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
0
Muhammad Ummar
Top achievements
Rank 1
answered on 30 May 2014, 07:03 AM
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.
0
Dimitrina
Telerik team
answered on 02 Jun 2014, 10:52 AM
Hello Paul,

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

Regards,
Didie
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Maya
Telerik team
answered on 27 Oct 2014, 04:03 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
TileList
Asked by
Paul
Top achievements
Rank 1
Answers by
Vanya Pavlova
Telerik team
Paul
Top achievements
Rank 1
Dimitrina
Telerik team
Muhammad Ummar
Top achievements
Rank 1
Maya
Telerik team
Share this question
or