Thank you for the provided images.
This behavior is not supported out of the box from the RadTimeline
control. You could try to achieve this using custom code. You are in the right direction by modifying the TimelineItemGroupControl
default template. In the default template of this element, the items are held by an ItemsPresenter
with x:Name Content
. We can set its Margin
property to create a space for the icons. Then you can place a StackPanel
on the left side and bind its Visibility property to the IsExpanded of the TemplatedParent. This way when the group is collapse also the panel will be hidden. Inside the StackPanel you can place an ItemsControl. You can bind its ItemsSource property using an IValueConverter class. The rest of the logic can be create in the Convert() method. Basically, the DataContext of the ItemsControl is a TimelineDataItemGroup
element. You can get how much rows you have in one group from the DataGroups collection property. You can also get all the items in this group.
I have created a sample project which demonstrate the above steps. Keep in mind that this is a custom solution and may not work in all cases. For example when the Window is resize the space between the rows is increase/decrease. You could try to implement additional logic which changes the space between the icons. Still I think this is a good starting point for achieving your final behavior.
Get quickly onboarded and successful
with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.