Animation

Updated on Mar 26, 2026

The RadExpander control has an animation enabled by default.

To disable or enable the animation, set the RadAnimationManager.IsAnimationEnabled attached property on RadExpander.

Example 1: Disabling animation in XAML

XAML

<telerik:RadExpander xmlns:telerikCore="using:Telerik.Core" telerikCore:RadAnimationManager.IsAnimationEnabled="False" />

Example 2: Disabling animation in code

C#

RadAnimationManager.SetIsAnimationEnabled(this.radExpander, false);

Customize Animations

To customize RadExpander's animations, use the RadAnimationManager.AnimationSelector property. The supported animation class is ExpanderExpandCollapseAnimation which exposes few properties to customize the animation.

• Direction: An enumeration property of type AnimationDirection which specifies the direction of the animation.
• TargetElementName: A property of type string that gets or sets the name of the element that should be animated.
• AnimationName: A property of type string that gets or sets the name of the animation. For example:
  • ExpandDirection is set to Up or Down: To modify the animation the AnimationName needs to be set to Expand or Collapse.
  • ExpandDirection is set to Right or Left: To modify the animation the AnimationName needs to be set to ExpandHorizontal or CollapseHorizontal.
• SpeedRatio: A property of type double that gets or sets the speed of the animation.

Example 3: Modify the animations when ExpandDirection is Up or Down

XAML

<telerik:RadExpander>
	<telerikCore:RadAnimationManager.AnimationSelector>
		<telerikCore:RadAnimationSelector>
			<telerik:ExpanderExpandCollapseAnimation AnimationName="Expand" 
												Direction="In"
												SpeedRatio="0.2"
												TargetElementName="Content" />
			<telerik:ExpanderExpandCollapseAnimation AnimationName="Collapse" 
												Direction="Out"
												SpeedRatio="0.2"
												TargetElementName="Content" />
		</telerikCore:RadAnimationSelector>
	</telerikCore:RadAnimationManager.AnimationSelector>
</telerik:RadExpander>

Example 4: Modify the animations when ExpandDirection is Right or Left

XAML

<telerik:RadExpander ExpandDirection="Left">
	<telerikCore:RadAnimationManager.AnimationSelector>
		<telerikCore:RadAnimationSelector>
			<telerik:ExpanderExpandCollapseAnimation AnimationName="ExpandHorizontal" 
												Direction="In"
												SpeedRatio="0.2"
												TargetElementName="Content" />
			<telerik:ExpanderExpandCollapseAnimation AnimationName="CollapseHorizontal" 
												Direction="Out"
												SpeedRatio="0.2"
												TargetElementName="Content" />
		</telerikCore:RadAnimationSelector>
	</telerikCore:RadAnimationManager.AnimationSelector>
</telerik:RadExpander>

See Also

• Getting Started
• Expand Direction