On which element to apply animation so the complete navigation view component is hidden or collapsed

[Vladimir]

I tried this "How to" here: https://docs.telerik.com/devtools/wpf/controls/radnavigationview/how-to/customize-open-close-animations

and it works. However, the animation is applied only to the bit when the nav. view is in compact mode. I need it to go all the way to completely hidden or collapsed.

I opened the xaml theme file 

Telerik.Windows.Controls.Navigation.xaml

from here

C:\Program Files (x86)\Progress\Telerik UI for WPF R1 2021\Themes.Implicit\WPF40\Office2016\Themes

The file is 9000 lines.

On what element instead of "PART_PaneRoot" should I apply the animation so that the complete nav. view is hidden:

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

[Joe]

I don't work for Telerik but I have a suggestion.  Why not animate *two* properties of RadNavigationView.  Animate both "CompactPaneWidth" and ExpandedPaneWidth to zero

[Vladimir]

Hmm I managed to create standard WPF animation on the container element that contains the Navigation View:

<ResourceDictionary>
            <Storyboard x:Key="ClosePaneStoryboard">
                <DoubleAnimation
                    Storyboard.TargetName="NavigationViewContainer"
                    Storyboard.TargetProperty="Width"
                    From="300.0"
                    To="0.0"
                    Duration="0:0:0.5"  />
            </Storyboard>
            
            <Storyboard x:Key="OpenPaneStoryboard">
                <DoubleAnimation
                    Storyboard.TargetName="NavigationViewContainer"
                    Storyboard.TargetProperty="Width"
                    From="0.0"
                    To="300.0"
                    Duration="0:0:0.5"  />
            </Storyboard>
        </ResourceDictionary>
    </tk:RadRibbonWindow.Resources>

 

And then I trigger the story boards on click event like so:

public bool IsPaneExpanded = true;

private void expandCollapsePane_Click(object sender, RoutedEventArgs e)
        {
            if (IsPaneExpanded)
            {
                IsPaneExpanded = false;
                Storyboard Storyboard = (Storyboard)FindResource("ClosePaneStoryboard");
                Storyboard.Begin();
            }
            else
            {
                IsPaneExpanded = true;
                Storyboard Storyboard = (Storyboard)FindResource("OpenPaneStoryboard");
                Storyboard.Begin();
            }
        }