Group Header style

2 posts, 0 answers
  1. Josh
    Josh avatar
    17 posts
    Member since:
    Aug 2012

    Posted 27 Mar 2014 Link to this post

    Is there a way to create a custom group header based on the group type?
  2. Martin Ivanov
    Martin Ivanov avatar
    1451 posts

    Posted 31 Mar 2014 Link to this post

    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.

Back to Top