Telerik blogs

How to use RadTransitionControl for navigation

August 12, 2010 Desktop, WPF 0 Comments


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"

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.

XAML

Comments

Comments are disabled in preview mode.