Animation

By default the RadPanelBar control's items are expanded and collapsed without an animation. To enable the expand\collapse animations you can use the telerik:AnimationManager.IsAnimationEnabled attached property. To customize the animation you could use the PanelBarExpandCollapseAnimation object.

Enable Animation in RadPanelBar

The animation is enabled by setting the telerik:AnimationManager.IsAnimationEnabled property to True.

Example 1: Enable expand\collapse animation

• XAML

<telerik:RadPanelBar telerik:AnimationManager.IsAnimationEnabled="True"> 

Change Animation Direction

The animation direction is controlled by the Direction property of the PanelBarExpandCollapseAnimation class and it is either In or Out.

Example 2: Set expand\collapse directions

• XAML

<telerik:RadPanelBar xmlns:animationNavigation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls.Navigation">  
    <telerik:AnimationManager.AnimationSelector> 
        <telerik:AnimationSelector> 
            <animationNavigation:PanelBarExpandCollapseAnimation AnimationName="Expand" Direction="In"/> 
            <animationNavigation:PanelBarExpandCollapseAnimation AnimationName="Collapse" Direction="Out"/> 
        </telerik:AnimationSelector> 
    </telerik:AnimationManager.AnimationSelector> 
</telerik:RadPanelBar>  

Change Animation Speed

The speed of the expand\collapse is also customizable via the AnimationManager.AnimationSelector attached property.

Example 3: Change animation speed

• XAML

<telerik:RadPanelBar xmlns:animationNavigation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls.Navigation">  
    <telerik:AnimationManager.AnimationSelector> 
        <telerik:AnimationSelector> 
            <animationNavigation:PanelBarExpandCollapseAnimation AnimationName="Expand" Direction="In" SpeedRatio="0.25"/> 
            <animationNavigation:PanelBarExpandCollapseAnimation AnimationName="Collapse" Direction="Out" SpeedRatio="0.25"/> 
        </telerik:AnimationSelector> 
    </telerik:AnimationManager.AnimationSelector> 
</telerik:RadPanelBar> 

The SpeedRatio property controls the duration. A value of 0.25 means that the animation will play a quarter (25%) of the default animation duration (for example, 15 of 60 seconds). A value of 1, means that the default time will be used. A value of 1.33 means that the animation will be played 33% faster than the default time.