Telerik blogs

A few developers asked how to use the RadTransitionControl to enable transition effects in their applications especially in RadTabControl. The RadTransitionControl and TransitionPresenter can be used instead of ContentControl and ContentPresenter to enable some animations when their content changes.

Source Code

RadTabControl usually have some RadTabItems and displays the Headers of the RadTabItems with ItemsPresenter and the Content of the Selected RadTabItem in a ContentPresenter. So if we edit the template of the RadTabControl and replace the ContentPresenter with TransitionPresenter the content should switch with animation when you go from one tab to another.

It’s easier to use RadTransitionControl than TransitionPresenter but the Presenter is more lightweight than the Control. We will demonstrate how to use the RadTransitionControl first.

Using RadTransitionControl in the RadTabControl

Lets create a new Silverlight 4 project in Blend 4.

1) First we need to add the references:

  • Telerik.Windows.Control.dll
  • Telerik.Windows.Control.Navigation.dll

The first contains the RadTransitionControl and the transition effects. It is also required by the second which contains the RadTabControl.

2) Once we have referenced the assemblies properly we will be able to open the ‘Assets’ tab and search for the RadTabControl. At this point if we fill the search field with ‘RadTab’ both RadTabControl and RadTabItem will appear.

3) Drag a RadTabControl into the Layout root and add some RadTabItems.

4) Add some content in the different RadTabItems. Images, UI, whatever you feel suitable for testing. I will add some images later.

TutorialSteps01to04

Nothing interesting so far. Now we will replace the ContentPresenter with RadTransitionControl.

5) Select and right-click the RadTabControl and select ‘Edit Template’ > ‘Edit a Copy…’

TutorialSteps05to05

6) Select a proper name for the new style. I’ve just used ‘RadTabControlStyle’.

At this point you will get a load of 300+ lines of XAML. If you are not very familiar with blend or you don’t have license for it you can get the RadTabControl’s XAML style from our distribution packages and edit in VisualStudio. Or you can check the code of the attached project in VisualStudio. Whatever you feel comfortable with.

7) Now when you are editing the RadTabControl expand the visual tree and you will find a ContentPresenter somewhere within probably called ContentElement. Delete it!

TutorialSteps07to07

8) Search for the RadTransitionControl in the ‘Assets’ and drag one in the visual tree on the place of the ContentPresenter. Name it ‘ContentElement’ just as the ContentPresenter was.

TutorialSteps08to08

9) Now you only have to set the content binding on the RadTransitionControl and the Transition effect. Go to ‘SplitView’ and set the bindings in the XAML code:

<telerik:RadTransitionControl x:Name="ContentElement"
Content="{TemplateBinding SelectedContent}"
ContentTemplate="{TemplateBinding SelectedContentTemplate}" />

The bindings will ‘tell’ the transition control to display the Content and use the ContentTemplate of the selected RadTabItem in the RadTabControl. Now the funny part:

Setting the transition

The transitions are in the Telerik.Windows.Controls.TransitionEffects namespace in the Telerik.Windows.Controls assembly. So we will add the namespace with the transitions in the UserControl:

xmlns:effects="clr-namespace:Telerik.Windows.Controls.TransitionEffects;
assembly=Telerik.Windows.Controls"
Now we have the means to set the transition. The transitions in the namespace can be previewed in our demo site. The SlideAndZoomTransition is quite popular from our old demo site but for images my favorite is the

MotionBlurredZoom as it is pretty fancy taking advantage of the Silverlight’s shaders. Set the Transition property of the RadTransitionControl:

<telerik:RadTransitionControl x:Name="ContentElement"
Content="{TemplateBinding SelectedContent}"
ContentTemplate="{TemplateBinding SelectedContentTemplate}"
Duration="00:00:00.400">
<telerik:RadTransitionControl.Transition>
<effects:MotionBlurredZoomTransition />
</telerik:RadTransitionControl.Transition>
</telerik:RadTransitionControl>

The Transition is animation that has progress property which is animated form 0 (where the old content is displayed) to 1 (where the new one is displayed). The RadTransitionControl animates that property so Duration and Easing is set on the RadTransitionControl instead the transition. This is supposed to enable scenarios where the transition is defined as resource and RadTransitionControls share it as StaticResource.

Using TransitionPresenter in the RadTabControl

We mentioned that the TransitionPresenter should be lighter than the RadTransitionControl. You can use the it pretty much the way we used the RadTransitionControl. The ContentElement should be replaced with TransitionPresenter but the Presenter need some additional infrastructure. Since it animates the old and the new content we have to add visual element that will display the old content. This code should replace the RadTransitionControl from the previous section:

<Grid x:Name="PART_RootElement"> 
<Border BorderBrush="#01000000" BorderThickness="1"/>
<Canvas IsHitTestVisible="False">
<Rectangle x:Name="OldContentPresenter"
Fill="{Binding OldVisualBrush, ElementName=ContentElement}"
Opacity="0.0"
Height="{Binding OldVisualHeight, ElementName=ContentElement}"
Width="{Binding OldVisualWidth, ElementName=ContentElement}"/>
</Canvas>
<transitionControl:TransitionPresenter x:Name="ContentElement"
CurrentContent="{TemplateBinding SelectedContent}"
CurrentContentTemplate="{TemplateBinding SelectedContentTemplate}"
Duration="00:00:00.400">
<transitionControl:TransitionPresenter.Transition>
<effects:MotionBlurredZoomTransition />
</transitionControl:TransitionPresenter.Transition>
</transitionControl:TransitionPresenter> </Grid>

TransitionPresenter displays the CurrentContent. The Rectangle will display the old content and the Canvas will force it not to require additional space if it is larger than the current one. The Border stretches pixel shader effects applied by the TransitionPresenter without it some visual glitches may appear. The RadTransitionControl is somewhat easier to use since it has them all defined in it’s ControlTemplate.


Panayot Cankov 164x164
About the Author

Panayot Cankov

Panayot Cankov has 15 years of experience focused on UI. He has spent 9 years at Progress working on the XAML stack and the NativeScript framework. Today he is pushing forward AR/VR technologies as he is a big believer in them, along with AI/ML for being the foundation of the next generation line of business application experiences.

Comments

Comments are disabled in preview mode.