| title | description | type | page_title | slug | position | tags | ticketid | res_type |
|---|---|---|---|---|---|---|---|---|
Change the Animation Speed of RadToggleSwitchButton |
How to change the switch animation speed of RadToggleSwitchButton by modifying the AnimationSelector. |
how-to |
Modify the SpeedRatio of the Default Switch Animation of ToggleSwitchButton |
kb-buttons-toggleswitchbutton-change-animation-speed |
0 |
animation,speed,switch,toggle,ratio,selector |
1558934 |
kb |
| Product Version | 2022.3.1109 |
| Product | RadButtons for WPF |
How to change the switch animation speed of RadToggleSwitchButton by modifying the AnimationSelector.
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.
{{region kb-buttons-toggleswitchbutton-change-animation-speed-0}} <Application.Resources> <Style TargetType="telerik:RadToggleSwitchButton" BasedOn="{StaticResource RadToggleSwitchButtonStyle}"> <Setter.Value> telerik:AnimationSelector <telerik:AnimationGroup AnimationName="CheckedAnimation"> <telerik:MoveAnimation TargetElementName="PART_Thumb" Duration="0:0:0.4" SpeedRatio="2.0"> telerik:MoveAnimation.Easing </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 </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 </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 </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> </Style> <Application.Resources> {{endregion}}
An alternative solution is to subscribe to the Loaded event of each RadToggleSwitchButton in the view and set the SpeedRatio in code-behind.
{{region kb-buttons-toggleswitchbutton-change-animation-speed-1}} 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; } } {{endregion}}