Timeline Group Expand/Collapse Animation

[Alexander]

Is there a way to speed up, or just remove, the animation that occurs when a group of Timeline items is expanded or collapsed? For groups containing more than 10 or so items, the animation to collapse or expand those groups begins to take a significant amount of time. This issue only gets worse with more items, and we would like to fix this.

[Vladimir Stoyanov]

Hello Alexander,

You can disable the animation by setting the telerik:AnimationManager.IsAnimationEnabled to "False" on the TimelineItemGroupControl. Here is some sample code:

<Style  TargetType="timelines:TimelineItemGroupControl">
            <Setter Property="telerik:AnimationManager.IsAnimationEnabled" Value="False" />
</Style>

Note, that if you are using the NoXaml binaries, you will have to base the style on the default one for the theme.

Please, give this approach a try and let me know if it is suitable for your scenario.

I am looking forward to your reply. 

Regards,
Vladimir Stoyanov
Progress Telerik

[Alexander]

Hello Vladimir,

Thank you for your reply. That code worked perfectly. From that, I was able to discover that I could modify the speed of the animation like so:

<Style TargetType="telerik:TimelineItemGroupControl">
    <Setter Property="telerik:AnimationManager.AnimationSelector">
        <Setter.Value>
            <telerik:AnimationSelector>
                <telerik:ExpanderExpandCollapseAnimation AnimationName="Expand"
                                               Direction="In"
                                               SpeedRatio="5"
                                               TargetElementName="Content" />
               <telerik:ExpanderExpandCollapseAnimation AnimationName="Collapse"
                                               Direction="Out"
                                               SpeedRatio="5"
                                               TargetElementName="Content" />
            </telerik:AnimationSelector>
        </Setter.Value>
    </Setter>
</Style>

 

Unfortunately this discovery is of limited use, as the speed is constant regardless of the number of items in the group, which was the problem to begin with. Disabling the animation as you showed is perfectly fine, however.

Thank you very much for your assistance!

[Alexander]

I researched if I could bind the SpeedRatio property of the ExpanderExpandCollapseAnimation to some property which would give the number of items in the TimelineItemGroupControl, but I discovered that SpeedRatio is not a DependencyProperty, nor does ExpanderExpandCollapseAnimation inherit from DependencyObject.

Given this, I do not think this is possible without completely rewriting the ExpanderExpandCollapseAnimation class, which would be more effort than it is worth. If I am wrong here, please let me know, but otherwise I am content with the current solution.

[Vladimir Stoyanov]

Hello Alexander,

Indeed you are right that the SpeedRatio is not a DependencyProperty and cannot be data bound. 

That said, you should be able to create a custom AnimationSelector and implement your own logic for picking the animation based on the number of items within a group. You can add a 2nd animation with a higher SpeedRatio to be played when there are more items. You can than set the custom selector to the AnimationSelector property of the AnimationManager. 

I hope you find this helpful.

Regards,
Vladimir Stoyanov
Progress Telerik