Expander Animation

The RadExpander control has an animation enabled by default.

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

Example 1: Disabling animation in XAML

<telerik:RadExpander telerik:AnimationManager.IsAnimationEnabled="False" /> 

Example 2: Disabling animation in code

AnimationManager.SetIsAnimationEnabled(this.radExpander, false); 
AnimationManager.SetIsAnimationEnabled(Me.radExpander, False)             

Customize Animations

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

Example 3: Change the speed of the animations using the SpeedRatio property (when ExpandDirection is Up or Down)

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

The previous code snippet is applicable only when the ExpandState property of RadExpander is set to Up or Down.

When the ExpandState property is set to Right or Left you need to use different AnimationNames for the ExpanderExpandCollapseAnimation objects. The expand AnimationName is "ExpandHorizontal" and the collapse AnimationName is "CollapseHorizontal".

Example 4: Change the speed of the animations using the SpeedRatio property (when ExpandDirection is Right or Left)

<telerik:RadExpander> 
    <telerik:AnimationManager.AnimationSelector> 
        <telerik:AnimationSelector> 
            <telerik:ExpanderExpandCollapseAnimation AnimationName="ExpandHorizontal"  
                                                     Direction="In" 
                                                     SpeedRatio="0.2" 
                                                     TargetElementName="Content" /> 
            <telerik:ExpanderExpandCollapseAnimation AnimationName="CollapseHorizontal"  
                                                     Direction="Out" 
                                                     SpeedRatio="0.2" 
                                                     TargetElementName="Content" /> 
        </telerik:AnimationSelector> 
    </telerik:AnimationManager.AnimationSelector> 
</telerik:RadExpander> 

See Also

In this article
Not finding the help you need? Improve this article