Change the Animation Speed of RadToggleSwitchButton
Environment
Product Version | 2022.3.1109 |
Product | RadButtons for WPF |
Description
How to change the switch animation speed of RadToggleSwitchButton
by modifying the AnimationSelector
.
Solution
To cange the animation speed, you can set the SpeedRatio
property of the associated AnimationSelector
attached to the control. To do this in XAML, you need to replace the default selector with a custom one.
<Application.Resources>
<!--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>
<Application.Resources>
Loaded
event of each RadToggleSwitchButton
in the view and set the SpeedRatio
in code-behind.
private void RadToggleSwitch_Loaded(object sender, RoutedEventArgs e)
{
AnimationSelector animationSelector = AnimationManager.GetAnimationSelector(sender as RadToggleSwitchButton) as AnimationSelector;
foreach (RadAnimation animation in animationSelector.Animations)
{
animation.SpeedRatio = 2.0;
}
}