Customize the Open/Close Animations of the NavigationPane

RadNavigationView provides built in animations for opening and closing the NavigationPane. This article will demonstrate how you can customize these animations.

RadNavigationView Animations

By default RadNavigationView defines three animations named ResizePaneAnimation, MinimalPaneOpenAnimation and MinimalPaneCloseAnimation. Example 1 demonstrates the default values of these animations.

• ResizePaneAnimation: Played when the DisplayMode of the RadNavigationView is either Compact or Expanded and the NavigationPane is opened or closed.
• MinimalPaneOpenAnimation: Played when the DisplayMode of the RadNavigationView is Minimal and the NavigationPane is closed.
• MinimalPaneCloseAnimation: Played when the DisplayMode of the RadNavigationView is Minimal and the NavigationPane is opened.

Example 1: RadNavigationView Animations Default Values

• XAML

<animation:ResizeAnimation AnimationName="ResizePaneAnimation" TargetElementName="PART_PaneRoot" Duration="0:0:0.2" ResizeMode="Horizontal"> 
    <animation:ResizeAnimation.Easing> 
        <ExponentialEase EasingMode="EaseOut" /> 
    </animation:ResizeAnimation.Easing> 
</animation:ResizeAnimation> 
<animation:SlideAnimation AnimationName="MinimalPaneOpenAnimation" TargetElementName="PART_PaneRoot" Duration="0:0:0.2" PixelsToAnimate="250" Orientation="Horizontal" Direction="In" /> 
<animation:SlideAnimation AnimationName="MinimalPaneCloseAnimation" TargetElementName="PART_PaneRoot" Duration="0:0:0.2" PixelsToAnimate="250" Orientation="Horizontal" Direction="Out"/> 

Customizing Animations

In order to customize the animations supported by RadNavigationView, you can extract its style and modify it. This way you can customize the duration of the animations, change their easing function or replace the animation with a different one. Example 2 demonstrates how you can change the duration of the ResizePaneAnimation from 0.2 seconds to 3 seconds.

Example 2: Changing the duration of the ResizePaneAnimation

• XAML

<Window.Resources> 
    <!-- If you are using the NoXaml binaries, you will have to base the style on the default one for the theme like so: 
    <Style TargetType="telerik:RadNavigationView" BasedOn="{StaticResource RadNavigationViewStyle}">--> 
 
    <Style TargetType="telerik:RadNavigationView"> 
        <Setter Property="animation:AnimationManager.AnimationSelector"> 
            <Setter.Value> 
                <animation:AnimationSelector> 
                    <animation:ResizeAnimation AnimationName="ResizePaneAnimation" TargetElementName="PART_PaneRoot" Duration="0:0:3" ResizeMode="Horizontal"> 
                        <animation:ResizeAnimation.Easing> 
                            <ExponentialEase EasingMode="EaseOut" /> 
                        </animation:ResizeAnimation.Easing> 
                    </animation:ResizeAnimation> 
                    <animation:SlideAnimation AnimationName="MinimalPaneOpenAnimation" TargetElementName="PART_PaneRoot" Duration="0:0:0.2" PixelsToAnimate="250" Orientation="Horizontal" Direction="In" /> 
                    <animation:SlideAnimation AnimationName="MinimalPaneCloseAnimation" TargetElementName="PART_PaneRoot" Duration="0:0:0.2" PixelsToAnimate="250" Orientation="Horizontal" Direction="Out"/> 
                </animation:AnimationSelector> 
            </Setter.Value> 
        </Setter> 
    </Style> 
</Window.Resources> 
<Grid> 
    <telerik:RadNavigationView PaneHeader="My Header"> 
        <telerik:RadNavigationView.Items> 
            <telerik:RadNavigationViewItem Content="Bookmarks"> 
                <telerik:RadNavigationViewItem.Icon> 
                    <telerik:RadGlyph Glyph="&#xe303;" FontSize="16"/> 
                </telerik:RadNavigationViewItem.Icon> 
            </telerik:RadNavigationViewItem> 
        </telerik:RadNavigationView.Items> 
    </telerik:RadNavigationView> 
</Grid> 

Figure 1: Result from Example 2 in the Office2016 theme

In order for the animations to be played correctly the AnimationName and TargetElementName properties should not be modified.

The animation namespace used in Example 2 corresponds to the following: xmlns:animation="clr-namespace:Telerik.Windows.Controls.Animation;assembly=Telerik.Windows.Controls".