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:
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
And the XAML code for the navigation Frame in the main page will look like:
<navigation:Frame x:Name="wizard" VerticalAlignment="Center" HorizontalAlignment="Center"> <navigation:Frame.Template> <ControlTemplate TargetType="navigation:Frame"> <telerik:RadTransitionControl Content="{TemplateBinding Content}" > <telerik:RadTransitionControl.Transition> <transitions:SlideAndZoomTransition /> </telerik:RadTransitionControl.Transition> </telerik:RadTransitionControl> </ControlTemplate> </navigation:Frame.Template> </navigation:Frame>
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="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> <Grid x:Name="LayoutRoot" Background="Pink"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <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" /> </Grid> </navigation:Page>
Here attached you will find also the full example code for this scenario.