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

Group Header style

1 Answer 83 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Josh asked on 27 Mar 2014, 02:18 PM
Is there a way to create a custom group header based on the group type?

1 Answer, 1 is accepted

Sort by
Martin Ivanov
Telerik team
answered on 31 Mar 2014, 12:35 PM
Hello Josh,

Each group in the timeline component is represented by a TimelineItemGroupControl element . In order to achieve your requirement you can slightly change the ControlTemplate of the RadToggleButton which is placed inside the ItemGroupControl. In general you can do the following:
  • Create a DataTemplateSelector which you can use to choose a template for your group
  • Extract the TimelineItemGroupControlStyle and the TimelineItemGroupControlToggleButtonStyle styles of the ItemGroupControl from the implicit themes or through Expression Blend. You can read more about extracting styles and templates in the Editing Control Templates help article.
  • In the ControlTemplate of the TimelineItemGroupControlStyle find a RadToggleButton and set its ContentTemplateSelector to use your selector.
    <telerik:RadToggleButton x:Name="HeaderButton" Loaded="HeaderButton_Loaded"
                            Content="{TemplateBinding Header}"
                            ContentTemplate="{TemplateBinding HeaderTemplate}"                          
                            ContentTemplateSelector="{StaticResource headerTemplateSelector}"                           
                            Style="{StaticResource TimelineItemGroupControlToggleButtonStyle1}"   
                            IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                            IsEnabled="{Binding ExpandMode, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource groupExpandModeToBooleanConverter}}">
  • In the TimelineItemGroupControlToggleButtonStyle replace the TextBox from the ControlTemplate with a ContentPresenter. Then bind its ContentTemplateSelector property using a TemplateBinding
    <ContentPresenter Content="{TemplateBinding Content}" ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}" Margin="4 0 0 0" />

In addition I extracted the styles and prepared a sample project which demonstrates this approach. Note that in the attached project I am using implicit styles, which means that I can base my styles on those from the theme resource dictionary.


Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

Asked by
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Share this question