Animation

[Oksana]

Hello,

can you please show an example of how to change the speed of transition animation when it is enabled for the extender control(telerik:AnimationManager.IsAnimationEnabled="True")

Thank you

[Tina Stancheva]

Hi Oksana,

With the latest official release you can take advantage of the Telerik AnimationManager to control the RadExpander animations in WPF:


<Style TargetType="telerik:RadExpander">

    <Setter Property="telerik:AnimationManager.AnimationSelector">

        <Setter.Value>

            <telerik:AnimationSelector>

                <telerik:ExpanderExpandCollapseAnimation
                                AnimationName="Expand"

             Direction="In"

             TargetElementName="Content"

             SpeedRatio="0.2" />

                <telerik:ExpanderExpandCollapseAnimation
                                AnimationName="Collapse"

            Direction="Out"
            TargetElementName="Content"

            SpeedRatio="0.2" />

            </telerik:AnimationSelector>

        </Setter.Value>

    Setter>

</Style>

You can control the speed of the animation through the SpeedRatio property. I attached a sample project to help you get started. Let us know if we can further assist you.

All the best,
Tina Stancheva
the Telerik team

[Oksana]

Thank you, Tina.

[John]

This doesn't seem to work for Right expanding expanders?  Is there a different selector to handle that scenario?

<telerik:RadExpander
     ExpandDirection="Right"
     Header="MyHeader"
     Content="MyContent">
</telerik:RadExpander>

 

[Nils]

I have encountered the same behavior as described by John with Q1 2016: ResizeDirection="Right" leads to the SpeedRatio of the animation being ignored. Any feedback on this?

[Evgenia]

Hi John and Nils,

I'm currently looking on your case. I'll contact you soon with more information on it.

Regards,
Evgenia
Telerik by Progress

[Evgenia]

Hi,

I investigated the case with Animations, (more specifically) SpeedRatio and different ExpandDirection-s. Everything is working as expected on my side. There's something important that should be mentioned here. When the ExpandDirection is set to Left or Right you should change the AnimationName so that it takes into consideration that you are animating the Width of the target and not Height as in other two cases. Now you might tweak the SpeedRatio property and you'll see that everything works as desired.
Here's an example:

<Window.Resources>
    <Style TargetType="telerik:RadExpander" BasedOn="{StaticResource RadExpanderStyle}" >
        <Setter Property="ExpandDirection" Value="Left" />
        <Setter Property="telerik:AnimationManager.AnimationSelector">
            <Setter.Value>
                <telerik:AnimationSelector>
                    <telerik:ExpanderExpandCollapseAnimation AnimationName="ExpandHorizontal"
                                                             Direction="In"
                                                             TargetElementName="Content"
                                                             SpeedRatio="0.2" />
                    <telerik:ExpanderExpandCollapseAnimation AnimationName="CollapseHorizontal"
                                                             Direction="Out"
                                                             TargetElementName="Content"
                                                             SpeedRatio="0.2" />
                </telerik:AnimationSelector>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <telerik:RadExpander Header="MyHeader"
                         Content="MyContent">
    </telerik:RadExpander>
</Grid>

We'll update our documentation accordingly to avoid further confusions.

Regards,
Evgenia
Telerik by Progress

[Nils]

Hi Evgenia,

that did the trick. Thanks!

Regards
Nils

[Park]

Hi

It seems that SpeedRatio does not apply in the latest version.

Test version

2018.1.122.45

Thank you

[Sia]

Hello,

I have tested it on my end and it seems that the SpeedRatio property works as expected. You can check the attached project and video.

Regards,
Sia
Progress Telerik