Group Header style

[Josh]

Is there a way to create a custom group header based on the group type?

[Martin Ivanov]

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"
                          Grid.Column="0"
                          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.

Regards,
Martin
Telerik