Telerik blogs

The RadTransitionControl can be very useful when you want to switch between controls. In this blog post I will explain two common scenarios:

1) Switching between 2 UserControls, which is applicable for both WPF and Silverlight and

2) Creating attractive navigation between pages very easy, applicable for Silverlight.


Now, point-by-point:

1)   For this approach you will need to create 2 UserControls. In the root page define a RadTransitionControl and give it a x:Name. Then, on a button click change the Content property of the TransitionControl with the chosen UserControl

Here you can find attached you will find a simple WPF example of the above-mentioned technique.

2) For the second scenario we need to create a navigation Frame and add the RadTransitionControl in the Template of the Frame. For that we need to declare the following namespaces:


And the XAML code for the navigation Frame in the main page will look like:


<navigation:Frame x:Name="wizard" VerticalAlignment="Center" HorizontalAlignment="Center">
                <ControlTemplate TargetType="navigation:Frame">
                    <telerik:RadTransitionControl Content="{TemplateBinding Content}" >
                            <transitions:SlideAndZoomTransition />


Then, in the constructor of the page that contains the Frame, navigate to the first of our pages:

wizard.Navigate(new Uri("/Step1.xaml", UriKind.Relative));


Each Page, which will be navigated to, can have Next and Forward buttons. One simple page can look like this:

<navigation:Page xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
        x:Class="TransitionControl_Wizard.Step1" xmlns=""
        xmlns:x="" Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="Pink">
            <RowDefinition />
            <RowDefinition Height="auto" />
            <ColumnDefinition />
            <ColumnDefinition />
        <TextBlock Text="This is step 1" Grid.ColumnSpan="2" />
        <HyperlinkButton Grid.Row="1" Grid.Column="0" Content="Previous" IsEnabled="False" />
        <HyperlinkButton Grid.Row="1" Grid.Column="1" Content="Next" NavigateUri="/Step2.xaml" />


Here attached you will find also the full example code for this scenario.


Comments are disabled in preview mode.