Animation

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

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

Example 2: Disabling animation in code

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

<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

<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