Edit this page

Expander Animation

Animating the RadExpander control.

To enable or disable the animation you can use the IsAnimationEnabled attached property of the AnimationManager class. By default the Animation is enabled for the RadExpander. Below are code-snippets for XAML and C#:

<StackPanel Orientation="Horizontal">
    <!--  DISABLE the Animation:  -->
    <telerik:RadExpander telerik:AnimationManager.IsAnimationEnabled="False" />
    <!--  ENABLE the Animation:  -->
    <telerik:RadExpander telerik:AnimationManager.IsAnimationEnabled="True" />
</StackPanel>

using Telerik.Windows.Controls.Animation;
private void SetAnimation()
{
    if (this.radExpander != null)
    {
        AnimationManager.SetIsAnimationEnabled(this.radExpander, false);
        // some code...
        AnimationManager.SetIsAnimationEnabled(this.radExpander, true);
        // some code...
    }
}
Imports Telerik.Windows.Controls.Animation
Private Sub SetAnimation()
    If Me.radExpander IsNot Nothing Then
        AnimationManager.SetIsAnimationEnabled(Me.radExpander, False)
        ' some code...'
        AnimationManager.SetIsAnimationEnabled(Me.radExpander, True)
        ' some code...'
    End If
End Sub

You can further edit the default animations of the RadExpander using the AnimationSelector attached property of the AnimationManager class. By default the following animations are defined for the RadExpander control:

<Style x:Key="RadExpanderStyle" TargetType="telerik:RadExpander">
      ...  
    <Setter Property="telerik:AnimationManager.AnimationSelector">
        <Setter.Value>
            <telerik:AnimationSelector>
                <telerik:ExpanderExpandCollapseAnimation AnimationName="Expand" 
                                                         Direction="In"
                                                         TargetElementName="Content" />
                <telerik:ExpanderExpandCollapseAnimation AnimationName="Collapse" 
                                                         Direction="Out"
                                                         TargetElementName="Content" />
            </telerik:AnimationSelector>
        </Setter.Value>
    </Setter>
</Style>

You can control the speed of the animations through the SpeedRatio property:

<Style x:Key="RadExpanderStyle" TargetType="telerik:RadExpander">
      ...  
    <Setter Property="telerik:AnimationManager.AnimationSelector">
        <Setter.Value>
            <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>
        </Setter.Value>
    </Setter>
</Style>