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

• XAML

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

Example 2: Disabling animation in code

• C#
• VB.NET

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.

• 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> 
    <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> 

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

• XAML

<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>