Use with Silverlight Navigation Framework

The RadTransitionControl can be used together with the Silverlight Navigation Framework in order to apply transition effects, when navigating from one page to another. The only thing you have to do is to create a ControlTemplate for the Frame control and to place a RadTransitionControl in it. This tutorial will walk you through the following:

• Creating a ControlTemplate

• Defining and configuring a RadTransitionControl

• Set the ControlTemplate to the Frame

Creating a ControlTemplate

The first thing to do is to create a ControlTemplate in your resources section, that targets the Frame control.

In order to use the Frame control you have to add the following namespace declaration: xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

<UserControl.Resources> 
    <ControlTemplate x:Key="FrameTemplate" 
                    TargetType="navigation:Frame"> 
    </ControlTemplate> 
</UserControl.Resources> 

Defining and configuring a RadTransitionControl

Add a RadTransitionControl to the ControlTemplate and configure the appropriate TemplateBindings for the Content and the ContentTemplate properties.

<UserControl.Resources> 
    <ControlTemplate x:Key="FrameTemplate" 
            TargetType="navigation:Frame"> 
        <telerik:RadTransitionControl Content="{TemplateBinding Content}" 
                            ContentTemplate="{TemplateBinding ContentTemplate}"> 
        </telerik:RadTransitionControl> 
    </ControlTemplate> 
</UserControl.Resources> 

By default there is no transition effect specified for the RadtRansitionControl, so you have to define one.

<UserControl.Resources> 
    <ControlTemplate x:Key="FrameTemplate" 
            TargetType="navigation:Frame"> 
        <telerik:RadTransitionControl Content="{TemplateBinding Content}" 
                            ContentTemplate="{TemplateBinding ContentTemplate}"> 
            <telerik:RadTransitionControl.Transition> 
                <telerikTransitions:MotionBlurredZoomTransition /> 
            </telerik:RadTransitionControl.Transition> 
        </telerik:RadTransitionControl> 
    </ControlTemplate> 
</UserControl.Resources> 

Set the ControlTemplate to the Frame

The last thing to do is to set the created ControlTemplate to the Frame control. Here is an example of how to do this.

<navigation:Frame x:Name="MainFrame" 
            Template="{StaticResource FrameTemplate}" /> 

See Also

• Integration with Content Controls

• Use with Prism

• Create Custom Transitions