Positioning of TimelineItems

[Mike]

Hello,

during our development process we've been facing some problems with
one of your products (RadTimeline for WPF).

Situation:
Using the RadTimeline in WPF we have been trying to display expandable/collapsible timeline items,
the general idea is that each timeline item consists of a label and a RadExpander which contains a list of additional information, the size of the list varies from each timeline item to the next.

And while the timeline items themselves work as intended, their positioning on the timeline doesn’t.

While all items are collapsed, their positioning on the timeline is correct,
but when one or more items are expanded, the positioning of these items gets inconsistent,
with some items overlapping others and/or items moving down horizontally.
The hight of the timeline itself seems to increase disproportionally when items are expanded, even if there would have been enough place for them to be displayed on the timeline without its height being increased.

We would like to know if it is possible for timeline items to have different sizes,
And should this not be supported by the RadTimeline out of the box,
is there a way to modify the behaviour based on which the items are positioned on the timeline.

[Dilyan Traykov]

Hello Mike,

The RadTimeline does support items with different sizes, but the issue you've come across in this case is due to the dynamic change of those heights. As you expand a particular item, the size of the VirtualizingTimelinePanel changes, which in turn leads to the rearranging of the items with respect to the new size.

With this said, I do not see a straightforward way to handle this change and keep the original positioning. What I can suggest is to display the details you desire in a popup element which will not affect the size of the timeline panel. For example, you could use a RadDropDownButton like so:

                <telerik:RadDropDownButton Content="{Binding DataItem.Header}">
                    <telerik:RadDropDownButton.DropDownContent>
                        <TextBlock Text="{Binding DataItem.Details}" />
                    </telerik:RadDropDownButton.DropDownContent>
                </telerik:RadDropDownButton>

Please let me know whether such an approach would work for you.

Regards,
Dilyan Traykov
Progress Telerik