TransitioningSelector is like a TabControl that animates the selected content as it transitions into and out of view. When the control’s SelectedItem changes, the visual content that is associated with the old value is animated out of view as the visual content associated with the new value is animated into view. The animations can be 2 or 3 dimensional.

TransitioningSelector inherits directly from System.Windows.Controls.MultiSelector and is similar to TabControl in how it works (though it does not inherit from TabControl.) The native container type is TransitioningSelectorItem, which is a HeaderedContentControl. Any object placed into the transitioning selector’s Items collection is wrapped by a TransitioningSelectorItem, unless the object itself is a TransitioningSelectorItem. The content displayed by TransitioningSelector is defined as the value of the Content property of the TransitioningSelectorItem that is associated with the value of the selector’s SelectedItem property.

The animation is performed by an animator – a concrete implementation of the abstract class TransitionAnimationProvider. A specific animator is associated with the TransitioningSelector via its Animator property. There are five built-in animators. It is also possible to create your own custom animators which derive from TransitionAnimationProvider.

A single animator is responsible for both incoming and outgoing animations.

Using the built-in Animators

Here is the list of built-in animators:

  • FadingAnimator – Objects fade into and out of view.
  • SlidingAnimator – Objects slide into and out of view.
  • SwingingDoor3DAnimator – Objects swing into and out of view.
  • SwingingDoorFading3DAnimator – Objects swing into and out of view and as they swing they fade deep into or out of the background.
  • CustomAnimator – Enables defining custom animations in pure Xaml.

Each of the built-in animators has a set of properties which can be used to modify the animation. Four of these properties are defined in the base class TransitionAnimationProvider:

  • Duration (Duration) – specifies the duration of the animation.
  • EnterDelay (Duration) – specifies a delay between when the exiting animation begins and the entering animation begins.
  • OneWay (Boolean) – for directional animations, specifies whether the incoming and exiting animations move in the same direction as each other.
  • Side (Dock) – for directional animations, specifies the side (Left, Top, Right or Bottom) from which the incoming animation begins.

The properties specific to the individual animators are:

FadingAnimator

  • EnteringEasingFunction – an IEasingFunction that is applied to the entering animation.
  • ExitingEasingFunction – an IEasingFunction that is applied to the exiting animation.

SlidingAnimator

  • EnteringEasingFunction – an IEasingFunction that is applied to the entering animation.
  • ExitingEasingFunction – an IEasingFunction that is applied to the exiting animation.

SwingingDoor3DAnimator

  • RotationAngle – a double between

Animating with a custom Animator

The Animator of a TransitioningSelector is an instance of a class that inherits from TransitionAnimationProvider. TransitionAnimationProvider is an abstract class with two abstract methods: PrepareEnteringViewStoryboard and PrepareLeavingViewStoryboard.

Related posts:

  1. Wizard for WPF Quick Start Guide
  2. WPF RadialMenu Quick Start Guide
  3. WPF Schedule Quick Start Guide
  4. ProgressSteps Quick Start Guide, DotNetBar for WPF
  5. DataForm Quick Start Guide