Custom Animations Not Working

[Daniel]

Hello,

I recently updated from WPF R3 2019 to R3 WPF 2020 and I am having an issue with a custom animation attached to a RadNavigationView. It worked fine under WPF R3 2019, but is now behaving differently. Now, the menu does not always expand horizontally when the pane toggle button is pressed, and when it does, it expands instantly, ignoring the duration time. The number of times the page toggle button needs to be pressed before it expands is not consistent. The same thing happens when trying to collapse the menu, except that it does not collapse instantly. I also tried using your example here, but I get the same behavior. Is there anything I am missing here?

RadNavigationView:

<telerik:RadNavigationView Name="navigationView"
                  Style="{DynamicResource MainNavigationViewStyle}"
                  IsPaneOpen="{Binding IsPaneOpen, RelativeSource={RelativeSource AncestorType=UserControl}, Mode=TwoWay}"
                  ItemsSource="{Binding SubPages}"
                  SelectedIndex="{Binding NavigationToken.SelectedSubPageIndex, Mode=TwoWay}"
                  Background="Transparent"
                  BorderThickness="0"
                  AutoChangeDisplayMode="False"
                  DisplayMode="Expanded"
                  PaneHeaderHeight="0"
                  PaneToggleButtonVisibility="Collapsed"
                  ItemContainerStyle="{DynamicResource MainNavigationViewItemStyle}">

 

Style:

<Style x:Key="MainNavigationViewStyle"
           TargetType="telerik:RadNavigationView"
           BasedOn="{StaticResource RadNavigationViewStyle}">
        <Setter Property="telerik:AnimationManager.AnimationSelector">
            <Setter.Value>
                <telerik:AnimationSelector>
                    <telerik:ResizeAnimation AnimationName="ResizePaneAnimation"
                                     TargetElementName="PaneGrid"
                                     Duration="0:0:0.4"
                                     ResizeMode="Horizontal">
                        <telerik:ResizeAnimation.Easing>
                            <ExponentialEase EasingMode="EaseIn"/>
                        </telerik:ResizeAnimation.Easing>
                    </telerik:ResizeAnimation>
                    <telerik:SlideAnimation AnimationName="MinimalPaneOpenAnimation"
                                    TargetElementName="PaneGrid"
                                    Duration="0:0:0.2"
                                    PixelsToAnimate="250"
                                    Orientation="Horizontal"
                                    Direction="In" />
                    <telerik:SlideAnimation AnimationName="MinimalPaneCloseAnimation"
                                    TargetElementName="PaneGrid"
                                    Duration="0:0:0.2"
                                    PixelsToAnimate="250"
                                    Orientation="Horizontal"
                                    Direction="Out"/>
                </telerik:AnimationSelector>
            </Setter.Value>
        </Setter>
    </Style>

[Daniel]

I just realized that I didn't properly close the XAML for the RadNavigationView. That is a typo.

[Vladimir Stoyanov]

Hello Daniel,

Thank you for the shared code snippet. 

The name of the Grid element inside the ControlTemplate of the RadNavigationView, which these animations target was recently changed to "PART_PaneRoot". With this in mind, in order for the customized animations to work as intended, you can change their TargetElementName from "PaneGrid" to "PART_PaneRoot". Do give this a try and let me know how it goes. 

On a side note, we will make sure to update our documentation article to reflect this change. As a small token of gratitude for bringing this to our attention, I have added some telerik points to your account.

Regards,
Vladimir Stoyanov
Progress Telerik

[Daniel]

That fixed it, thank you!