Telerik UI for Windows Phone by Progress

The RadTransitionControl control applies a transition when changing its content. In order to allow you to modify them to your liking it makes use of the features of the RadAnimation Framework.

To learn more about the RadAnimation Framework read its documentation.

The RadTransitionControl control exposes a property called Transition, which is of type RadAnimation. This property is of type RadTransition. This class allows you to specify an animation for each of the possible transitions:

  • Backward-In Transition - applied on the loaded content, when navigating back.
  • Backward-Out Transition - applied on the unloaded content, when navigating back.
  • Forward-In Transition - applied on the loaded content, when navigating forward.
  • Forward-Out Transition - applied on the unloaded content, when navigating forward.
To learn how to make the RadTransitionControl control execute forward or backward transitions read here.

As you can see these animations can be divided in two groups - Backward and Forward. When only one of the animations in the group is defined, the other is automatically generated as opposite of the first.

Additionally RadTransitionControl comes with a set of predefined transition classes. As they derive from the RadTransition class, you can directly set them to the Transition property of the RadTransitionControl. Here is a list of them:

These transitions are to be found in the Telerik.Windows.Controls namespace of the Telerik.Windows.Controls.Primitives assembly.
  • RadContinuumAndSlideTransition
  • RadContinuumTransition
  • RadFadeTransition
  • RadFlipItemsTransition
  • RadScaleTransition
  • RadSlideAndSwivelTransition
  • RadSlideTransition
  • RadSwivelTransition
  • RadTileTransition
  • RadTurnstileAndSlideTransition
  • RadTurnstileTransition

Also you can specify the mode in which the grouped transitions are played. For example, you may set the transitions to be played simultaneously or consecutively. To specify this use the PlayMode property of the RadTransition class. You can also specify it for each of the classes derived from it.

Here is an example of manually specifying the animation for each of the transitions in the RadTransition class:

      <telerikCore:RadFadeAnimation x:Key="fadeInAnimation" StartOpacity="0.0" EndOpacity="1.0" />
      <telerikCore:RadFadeAnimation x:Key="fadeOutAnimation" StartOpacity="1.0" EndOpacity="0.0" />
      <telerikPrimitives:RadTransition x:Key="MyTransition" PlayMode="Consecutively" ForwardInAnimation="{StaticResource
fadeInAnimation}" ForwardOutAnimation="{StaticResource
fadeOutAnimation}" BackwardInAnimation="{StaticResource
fadeInAnimation}" BackwardOutAnimation="{StaticResource

      <telerikPrimitives:RadTransitionControl x:Name="radTransitionControl" Transition="{StaticResource
      <Image Source="/Demos/Images/Tile1.png" Stretch="None" />