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:RadExpander.Content > 
        <Grid> 
            <Grid.RowDefinitions> 
                <RowDefinition Height="20"/> 
                <RowDefinition Height="20"/> 
                <RowDefinition Height="20"/> 
            </Grid.RowDefinitions> 
            <TextBox Grid.Row="0">My content</TextBox> 
            <TextBox Grid.Row="1">My content</TextBox> 
            <TextBox Grid.Row="2">My content</TextBox> 
        </Grid> 
    </telerik:RadExpander.Content> 
    <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 ExpandDirection property of RadExpander is set to Up or Down. The default value is Down.

When the ExpandDirection 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 ExpandDirection="Left"> 
    <telerik:RadExpander.Content > 
            <Grid> 
                <Grid.RowDefinitions> 
                    <RowDefinition Height="20"/> 
                    <RowDefinition Height="20"/> 
                    <RowDefinition Height="20"/> 
                </Grid.RowDefinitions> 
                <TextBox Grid.Row="0">My content</TextBox> 
                <TextBox Grid.Row="1">My content</TextBox> 
                <TextBox Grid.Row="2">My content</TextBox> 
            </Grid> 
    </telerik:RadExpander.Content> 
    <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