How to adjust the animation speed of RadToggleSwitchButton

[Tom]

Hi all,

I'm having trouble working out how to increase the thumb slide animation speed. I can't find any information online about the toggle switch animation. Any help is appreciated.

Thanks

<Style TargetType="telerik:RadToggleSwitchButton">
    <Setter Property="telerik:AnimationManager.AnimationSelector">
        <Setter.Value>
            <telerik:AnimationSelector>
                <telerik:SlideAnimation SpeedRatio="2.0"/>
            </telerik:AnimationSelector>
        </Setter.Value>
    </Setter>
</Style>

[Vicky]

Hi Tom,

Let me start with the fact that you were on the right way!
You just need to use and modify the default AnimationSelector of the RadToggleSwitchButton. With it, and the SpeedRatio from your code snippet, here is how you can achieve it in XAML:

<!--BasedOn is needed for NoXaml binaries only-->
<Style TargetType="telerik:RadToggleSwitchButton" BasedOn="{StaticResource RadToggleSwitchButtonStyle}">
    <Setter Property="telerik:AnimationManager.AnimationSelector">
        <Setter.Value>
            <telerik:AnimationSelector>
                <telerik:AnimationGroup AnimationName="CheckedAnimation">
                    <telerik:MoveAnimation TargetElementName="PART_Thumb" Duration="0:0:0.4" SpeedRatio="2.0">
                        <telerik:MoveAnimation.Easing>
                            <QuadraticEase EasingMode="EaseInOut" />
                        </telerik:MoveAnimation.Easing>
                    </telerik:MoveAnimation>
                    <telerik:FadeAnimation TargetElementName="UncheckedTrackBackground" Direction="Out" Duration="0:0:0.4" SpeedRatio="2.0"/>
                    <telerik:FadeAnimation TargetElementName="TrackBackground" Direction="In" Duration="0:0:0.4" SpeedRatio="2.0"/>
                </telerik:AnimationGroup>
                <telerik:AnimationGroup AnimationName="UncheckedAnimation">
                    <telerik:MoveAnimation TargetElementName="PART_Thumb" Duration="0:0:0.4" SpeedRatio="2.0">
                        <telerik:MoveAnimation.Easing>
                            <QuadraticEase EasingMode="EaseInOut" />
                        </telerik:MoveAnimation.Easing>
                    </telerik:MoveAnimation>
                    <telerik:FadeAnimation TargetElementName="TrackBackground" Direction="Out" Duration="0:0:0.4" SpeedRatio="2.0"/>
                    <telerik:FadeAnimation TargetElementName="UncheckedTrackBackground" Direction="In" Duration="0:0:0.4" SpeedRatio="2.0"/>
                </telerik:AnimationGroup>
                <telerik:AnimationGroup AnimationName="IsThreeStateUncheckedAnimation">
                    <telerik:MoveAnimation TargetElementName="PART_Thumb" Duration="0:0:0.4" SpeedRatio="2.0">
                        <telerik:MoveAnimation.Easing>
                            <QuadraticEase EasingMode="EaseInOut" />
                        </telerik:MoveAnimation.Easing>
                    </telerik:MoveAnimation>
                </telerik:AnimationGroup>
                <telerik:AnimationGroup AnimationName="IndeterminateAnimation">
                    <telerik:MoveAnimation TargetElementName="PART_Thumb" Duration="0:0:0.4" SpeedRatio="2.0">
                        <telerik:MoveAnimation.Easing>
                            <QuadraticEase EasingMode="EaseInOut" />
                        </telerik:MoveAnimation.Easing>
                    </telerik:MoveAnimation>
                    <telerik:FadeAnimation TargetElementName="TrackBackground" Direction="Out" Duration="0:0:0.4" SpeedRatio="2.0"/>
                    <telerik:FadeAnimation TargetElementName="UncheckedTrackBackground" Direction="In" Duration="0:0:0.4" SpeedRatio="2.0"/>
                </telerik:AnimationGroup>
            </telerik:AnimationSelector>
        </Setter.Value>
    </Setter>
</Style>

You can either set the SpeedRatio of each animation to the desired value of 2.0, or you can change the default Duration, too.
You can also go for a C# solution, which consists of getting the AnimationSelector of the button when it is loaded and setting the SpeedRatio there (or the Duration) to the desired value:

private void ToggleSwitchLoaded(object sender, RoutedEventArgs e)
{
    AnimationSelector animationSelector = AnimationManager.GetAnimationSelector(sender as RadToggleSwitchButton) as AnimationSelector;
    foreach (RadAnimation animation in animationSelector.Animations)
    {
        animation.SpeedRatio = 2.0;
    }
}

Please, try the above out and let me know if either suggestion is applicable for you.

Best Regards,
Vicky
Progress Telerik

[Tom]

This worked perfectly. Thanks!