How to use TransitionControl in telerik page

[Kamal Mostofi]

Hi,
I have 5 telerik pages in my application and would like to use TransitionControl to navigate. How can I do this?

thanks,
Kamal

[Konstantina]

Hello Kamal,

Thank you for contacting us.

The TransitionControl is a ContentControl, so it is used as one. To have a transition the pages should be inside the TransitionControl. How to use the TransitionControl for navigation you could read in this blog post.

If you need further help please let us know.

Greetings,
Konstantina
the Telerik team

[Kamal Mostofi]

Hello,
Thanks for your reply and the link.
Please see the code below and let me know if I placed the navigationframe in the right location in the XAML.

And also I get an error message at <transitions:SlideAndZoomTransition/> line. It can't find the method.

Please note that this page is my main page in the application.

<telerik:RadPage xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
  x:Class="Anjomanbus.Home"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
         xmlns:telerikTransitions="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"
  mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
   xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" xmlns:my="clr-namespace:System;assembly=mscorlib">

    <Grid x:Name="LayoutRoot">
        <Canvas >
            <Canvas.Background>
                <ImageBrush ImageSource="/Anjomanbus;component/Themes/onlybackground.jpg" Stretch="UniformToFill" />
            </Canvas.Background>
        </Canvas>
        <ScrollViewer x:Name="PageScrollViewer"  >

            <StackPanel x:Name="ContentStackPanel" >
                <telerik:RadFrameContainer x:Name="content"></telerik:RadFrameContainer>
                <telerik:RadFrame />
                <telerikNavigation:RadMenu Background="Transparent">
                    <telerikNavigation:RadMenuItem Header="Contact" Foreground="Yellow" Click="RadMenuItem_Click" />
                    <telerikNavigation:RadSeparator />
                    <telerikNavigation:RadMenuItem x:Name="mnuproducts" Header="Product" Foreground="Yellow" Click="mnuproducts_Click" />
                    <telerikNavigation:RadSeparator />
                    <telerikNavigation:RadMenuItem x:Name="mnuaboutus" Header="About us" Foreground="Yellow" Click="mnuabout_Click" />
                </telerikNavigation:RadMenu>
            </StackPanel>

        </ScrollViewer>
        <Grid x:Name="layoutlogo" Width="500" Height="400">
            <Canvas>
                <Canvas.Clip>
                    <RectangleGeometry RadiusX="20" RadiusY="20" Rect="0,0,760,490" />
                </Canvas.Clip>
                <Canvas.Background>
                    <ImageBrush ImageSource="/Anjomanbus;component/Themes/justlogo_s.jpg" Stretch="None"></ImageBrush>
                </Canvas.Background>
            </Canvas>
        </Grid>
        <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>
    </Grid>

</telerik:RadPage>

Many thanks,
Kamal

[Konstantina]

Hello Kamal,

Thank you for contacting us.

The code looks fine. To make it work you will have to change the transition's namespace:

<transitions:SlideAndZoomTransition />

to telerikTransitions, which is defined like so:

xmlns:telerikTransitions="clr-namespace:Telerik.Windows.Controls.TransitionEffects;assembly=Telerik.Windows.Controls"

If you have any other questions please let us know.

Kind regards,
Konstantina
the Telerik team

[Kamal Mostofi]

Hi,
thanks for your reply. I tried it but it isn't working. How do I clip the menu to the transitionframe? Do I need to? When I click on my menu item, it uses FadeTransition that I declared in the code behind.

thanks,
Kamal

[Kamal Mostofi]

Hi,

I fixed my issue and everything works perfectly. I am over the moon. Many thanks for your help.

Kamal