How to use TransitionControl in telerik page

6 posts, 2 answers
  1. Kamal Mostofi
    Kamal Mostofi avatar
    56 posts
    Member since:
    Jan 2010

    Posted 04 Sep 2010 Link to this post

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

    thanks,
    Kamal
  2. Answer
    Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 07 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. Kamal Mostofi
    Kamal Mostofi avatar
    56 posts
    Member since:
    Jan 2010

    Posted 12 Sep 2010 Link to this post

    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: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
  5. Answer
    Konstantina
    Admin
    Konstantina avatar
    2332 posts

    Posted 14 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Kamal Mostofi
    Kamal Mostofi avatar
    56 posts
    Member since:
    Jan 2010

    Posted 18 Sep 2010 Link to this post

    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
  7. Kamal Mostofi
    Kamal Mostofi avatar
    56 posts
    Member since:
    Jan 2010

    Posted 19 Sep 2010 Link to this post

    Hi,

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

    Kamal
Back to Top
DevCraft banner