Working with the RadTransitionControl
Tha RadTransitionControl is a ContentControl that can apply a transition effect to its content, when it gets changed. The content of the RadTransitionControl can vary from simple strings to complex UserControls, as for any ContentControl. The transition effect can be chosen among the built-in ones or you can create a custom one.
For a quick review of the basic features in a sample scenario you can take a look at the Getting Started topic.
To learn more about the RadTransitionControl features, you can take a look at the following sections inside this topic:
Content
In order to set the content of the RadTransitionControl you have to use its Content property. It is of type object, so you can assign everything to it - simple strings, UIElements, UserControls etc.
Note that if you want to set multiple UIElements as content of the RadTransitionControl you have to wrap them in a layout control such as Grid, StackPanel, Canvas etc.
<telerik:RadTransitionControl x:Name="radTRansitionControl">
<Image Source="/Silverlight.Help.RadTransitionControlSamples;component/Demos/Images/Koala.jpg"
Stretch="Uniform"
Width="320"
Height="240" />
</telerik:RadTransitionControl>
You can also bind the Content of the RadTransitionControl to a data object and use the ContentTemplate property to define a DataTemplate to visualize the object. To learn more about data binding inside RadTransitionControl read the Data Binding topic.
Transitions
When the content of the RadTransitionControl gets changed, the control can apply a transition effect to the change. By default there is no effect specified and in order to specify one you have to use the Transition property.
There are several built-in transition effects, which are located in the Telerik.Windows.Control.TransitionEffects namespace of the Telerik.Windows.Controls assembly. In order to use them you have to add the following namespace declaration:
xmlns:telerikTransitions="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"
<telerik:RadTransitionControl>
<telerik:RadTransitionControl.Transition>
<telerikTransitions:MotionBlurredZoomTransition />
</telerik:RadTransitionControl.Transition>
</telerik:RadTransitionControl>
To learn more about the different built-in transition effects or how to create your own, read the Transitions topic.
Transition Duration
The duration of the transition effect is determined by the Duration property of the RadTransitionControl. It's of type TimeSpan and its default value is 1 second. Here is an example of a RadTransitionControl with a transition duration of 3 seconds.
<telerik:RadTransitionControl x:Name="radTransitionControl" Duration="00:00:03" />
Transition Easing
The RadTransitionControl allows you to apply an easing function to the transition effect. The easing functions make the animation much more realistic and smoother. There is a set of predefined easing functions in WPF and you are allowed to create custom ones, too.
To learn more about the easing functions read here.
By default there is no easing function specified for the RadTransitionControl. To specify one you have to set the Easing property to the desired function.
<telerik:RadTransitionControl x:Name="radTransitionControl1">
<telerik:RadTransitionControl.Easing>
<BackEase EasingMode="EaseInOut" Amplitude="0.5" />
</telerik:RadTransitionControl.Easing>
</telerik:RadTransitionControl>