Telerik UI for Windows Phone by Progress

The RadPhoneApplicationFrame control applies a transition when navigating out of and to a page. These transitions are called Forward and Backward Transitions. In order to allow you to modify them to your liking the RadPhoneApplicationFrame makes use of the features of the RadAnimation Framework.

To learn more about the RadAnimation Framework read its documentation.

The RadPhoneApplicationFrame 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.

As you can see these animations can be divided into 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 the RadPhoneApplicationFrame control 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 RadPhoneApplicationFrame control. 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 via 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" />
private void InitializePhoneApplication()
if ( phoneApplicationInitialized )
// Create the frame but don't set it as RootVisual yet; this allows the splash
// screen to remain active until the application is ready to render.
RadTransition transition = new RadTransition();
transition.BackwardInAnimation = this.Resources[ "fadeInAnimation" ] as RadFadeAnimation;
transition.BackwardOutAnimation = this.Resources[ "fadeOutAnimation" ] as RadFadeAnimation;
transition.ForwardInAnimation = this.Resources[ "fadeInAnimation" ] as RadFadeAnimation;
transition.ForwardOutAnimation = this.Resources[ "fadeOutAnimation" ] as RadFadeAnimation;
transition.PlayMode = TransitionPlayMode.Consecutively;
RadPhoneApplicationFrame frame = new RadPhoneApplicationFrame();
frame.Transition = transition;
RootFrame = frame;
RootFrame.Navigated += CompleteInitializePhoneApplication;
// Handle navigation failures
RootFrame.NavigationFailed += RootFrame_NavigationFailed;
// Ensure we don't initialize again
phoneApplicationInitialized = true;