Telerik UI for Windows Phone by Progress

RadTransitionControl derives form the ContentControl and its purpose is to visualize some content (UserControlsUIElements, Data etc). Additionally it can apply transition effects upon changing its content. This tutorial will help you get started with RadTransitionControl basics. It will show you how to:

Use the RadTransitionControl

In order to use RadTransitionControl in your application you have to reference the following assemblies in your project:

  • Telerik.Windows.Controls.Primitives.dll
  • Telerik.Windows.Core.dll

After adding references to the aforementioned dlls, you can declare a new RadTransitionControl instance as any normal Silverlight control.

Note

To use RadTransitionControl in the XAML you have to add the following namespace declaration:

xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
CopyXAML
<telerikPrimitives:RadTransitionControl x:Name="radTransitionControl" />

Add Content

To add content to the RadTransitionControl control simply use its Content property.

Tip
You can also bind the Content of RadTransitionControl to a data object and use the ContentTemplate property to define a DataTemplate to visualize the object.
CopyXAML
<telerikPrimitives:RadTransitionControl x:Name="radTransitionControl">
<telerikPrimitives:RadTransitionControl.Content>
<Image Source="/Demos/Images/Tile1.png" Stretch="None" />
</telerikPrimitives:RadTransitionControl.Content>
</telerikPrimitives:RadTransitionControl>

Define a Transition

When the content of the RadTransitionControl control gets changed, the control can apply a transition effect to the change. The control has a default effect specified, but you can modify it by using the Transition property.

Note
Additional information about applying a transition can be found in the Transitions topic.

Here is an example.

CopyXAML
          <UserControl.Resources>
          <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
fadeOutAnimation}"></telerikPrimitives:RadTransition>
          </UserControl.Resources>

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