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.