NavigationFrame.AnimationSelector Property

Gets or sets an AnimationSelector class descendant that provides a custom storyboard, rendering the forward and backward navigation animation. This is a dependency property.

Namespace : DevExpress.Xpf.WindowsUI

Assembly : DevExpress.Xpf.Controls.v25.2.dll

NuGet Package : DevExpress.Wpf.Controls

csharp

public AnimationSelector AnimationSelector { get; set; }

Public Property AnimationSelector As AnimationSelector

Property Value

Type	Description
AnimationSelector

An AnimationSelector class descendant that provides a custom storyboard, rendering the forward and backward navigation animation.

Remarks

The NavigationFrame.AnimationType property allows you to enable animation effects when navigating between views. You can also specify animation settings with the NavigationFrame.AnimationSpeedRatio and NavigationFrame.AnimationDelay properties.

However, if these settings do not meet your needs, it is possible to provide a custom forward and/or backward navigation animation. For this purpose, create an AnimationSelector class descendant, and override the SelectStoryboard method, which returns the Storyboard object used to render the navigation animation. This method accepts the animation parameter which comprises the animation settings being used. These settings allow you, for instance, to determine whether forward or backward navigation is performed. Then, assign the created AnimationSelector class descendant to the AnimationSelector property.

Note

If the NavigationFrame.AnimationType setting is set to None , the AnimationSelector property is not in effect.

Example

The example below shows how to provide a custom storyboard used to render backward and forward navigation for a NavigationFrame. The AnimationSelector‘s SelectStoryboard method override returns a storyboard according to the animation direction.

C#
VB.NET
XAML

csharp

using System.Windows.Media.Animation;

public class FrameAnimationSelector : DevExpress.Xpf.WindowsUI.AnimationSelector {
    private Storyboard _BackStoryboard;
    private Storyboard _ForwardStoryboard;
    public Storyboard ForwardStoryboard {
        get { return _ForwardStoryboard; }
        set { _ForwardStoryboard = value; }
    }
    public Storyboard BackStoryboard {
        get { return _BackStoryboard; }
        set { _BackStoryboard = value; }
    }
    protected override Storyboard SelectStoryboard(DevExpress.Xpf.WindowsUI.FrameAnimation animation) {
        return animation.Direction == DevExpress.Xpf.WindowsUI.AnimationDirection.Forward ? ForwardStoryboard : BackStoryboard;
    }
}

Imports System.Windows.Media.Animation

Public Class FrameAnimationSelector
    Inherits DevExpress.Xpf.WindowsUI.AnimationSelector
    Private _BackStoryboard As Storyboard
    Private _ForwardStoryboard As Storyboard
    Public Property ForwardStoryboard() As Storyboard
        Get
            Return _ForwardStoryboard
        End Get
        Set
            _ForwardStoryboard = value
        End Set
    End Property
    Public Property BackStoryboard() As Storyboard
        Get
            Return _BackStoryboard
        End Get
        Set
            _BackStoryboard = value
        End Set
    End Property
    Protected Overrides Function SelectStoryboard(animation As DevExpress.Xpf.WindowsUI.FrameAnimation) As Storyboard
        Return If(animation.Direction = DevExpress.Xpf.WindowsUI.AnimationDirection.Forward, ForwardStoryboard, BackStoryboard)
    End Function
End Class

xaml

xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui" 
xmlns:dxwuin="http://schemas.devexpress.com/winfx/2008/xaml/windowsui/navigation">

<Window.Resources>
    <local:FrameAnimationSelector x:Key="frameAnimationSelector">
        <local:FrameAnimationSelector.BackStoryboard>
            <Storyboard>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="NewContent.(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.400" Value="1" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.500" Storyboard.TargetProperty="NewContentTranslateX" From="1" To="0">
                    <DoubleAnimation.EasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="OldContent.(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.100" Value="0" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </local:FrameAnimationSelector.BackStoryboard>
        <local:FrameAnimationSelector.ForwardStoryboard>
            <Storyboard>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="NewContent.(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.400" Value="1" />
                </DoubleAnimationUsingKeyFrames>
                <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.500" Storyboard.TargetProperty="NewContentTranslateX" From="-1" To="0">
                    <DoubleAnimation.EasingFunction>
                        <CubicEase EasingMode="EaseOut"/>
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="OldContent.(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                    <SplineDoubleKeyFrame KeyTime="00:00:00.100" Value="0" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </local:FrameAnimationSelector.ForwardStoryboard>
    </local:FrameAnimationSelector>
</Window.Resources>

<dxwui:NavigationFrame AnimationSelector="{StaticResource frameAnimationSelector}"/>