Page specific transitions

13 posts, 1 answers
  1. Stefano
    Stefano avatar
    9 posts
    Member since:
    Jul 2012

    Posted 10 Feb 2011 Link to this post

    hi,
    i've just started with your wonderfull toolkit for WP7 and i have a question:
    is it possible to specify different transitions for the various pages composing my application, instead of defining only one to be used across the entire application ?
    i'm talking about something similar to the Toolbox for Windows Phone where you can declare in XAML the transition to be used with each page.
  2. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 10 Feb 2011 Link to this post

    Hi Stefano,

    You can use the RadTransitionControl.Transition attached property to accomplis this. Just place this code in the definition of your page:

    <telerikPrimitives:RadTransitionControl.Transition>
          <!-- specify here the transition you want to use -->
          <telerikPrimitives:RadTileTransition/>
    </telerikPrimitives:RadTransitionControl.Transition>

    Here is the full sample code:

    <phone:PhoneApplicationPage 
        x:Class="Telerik.Examples.WP.PhoneApplicationFrame.Wizard.Page1"
        xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
        xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"
        xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
        xmlns:local="clr-namespace:Telerik.Examples.WP.PhoneApplicationFrame.Wizard"
        FontFamily="{StaticResource PhoneFontFamilyNormal}"
        FontSize="{StaticResource PhoneFontSizeNormal}"
        Foreground="{StaticResource PhoneForegroundBrush}"
        SupportedOrientations="Portrait" Orientation="Portrait"    
        mc:Ignorable="d" d:DesignHeight="728" d:DesignWidth="480"
        Background="Black"
        shell:SystemTray.IsVisible="False">
        <telerikPrimitives:RadTransitionControl.Transition>
            <telerikPrimitives:RadTileTransition/>
        </telerikPrimitives:RadTransitionControl.Transition>  
    ....

    Please let us know it this works for you.

    Best wishes,
    Valentin.Stoychev
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. DevCraft banner
  4. Stefano
    Stefano avatar
    9 posts
    Member since:
    Jul 2012

    Posted 14 Feb 2011 Link to this post

    thanks a lot,
    i've menaged to include the code and achieve per page transitions but I still have a question: why can i only make some transition to work ? (or better, what am I actually missing ? :) )
    I've tested some and for example with RadFadeTransition or RadScaleTransition or RadSlideTransition I get the desired result, but no luck in using RadTileTransition or RadTurnstileTransition.
    I'm just testing on a simple two pages application, with some random items placed inside a grid.
    Stefano
  5. Answer
    Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 21 Feb 2011 Link to this post

    Hello Stefano,

    I've created a sample project which demonstrates how to use the transitions. Please take a look at it and let us know if you still have any problems.

    Kind regards,
    Valentin.Stoychev
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  6. nodd13
    nodd13 avatar
    4 posts
    Member since:
    Feb 2011

    Posted 22 Feb 2011 Link to this post

    How do I use a custom transition in this scenario. Using the code from the example a custom transition can be defined as:

    <UserControl.Resources>
       <telerikCore:RadFadeAnimation x:Key="fadeInAnimation"
                                       StartOpacity="0.0"
                                       EndOpacity="1.0" />
       <telerikCore:RadFadeAnimation x:Key="fadeOutAnimation"
                                       StartOpacity="1.0"
                                       EndOpacity="0.0" />
       <telerikPrimitives:RadTransition x:Key="MyTransition"
                                           PlayMode="Consecutively"
                                           ForwardInAnimation="{StaticResource fadeInAnimation}"
                                           ForwardOutAnimation="{StaticResource fadeOutAnimation}"
                                           BackwardInAnimation="{StaticResource fadeInAnimation}"
                                           BackwardOutAnimation="{StaticResource fadeOutAnimation}">
       </telerikPrimitives:RadTransition>
    </UserControl.Resources>

    but how do I point the RadTransitionControl.Transition attached property to the new transition.  
  7. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 22 Feb 2011 Link to this post

    Hi Umar,

    you can use the following syntax:
    <phone:PhoneApplicationPage.Resources>
            <telerikCore:RadFadeAnimation x:Key="fadeInAnimation"
                                       StartOpacity="0.0"
                                       EndOpacity="1.0"/>
            <telerikCore:RadFadeAnimation x:Key="fadeOutAnimation"
                                       StartOpacity="1.0"
                                       EndOpacity="0.0"/>
        </phone:PhoneApplicationPage.Resources>
      
      
        <telerikPrimitives:RadTransitionControl.Transition>
            <telerikPrimitives:RadTransition
                                           PlayMode="Consecutively"
                                           ForwardInAnimation="{StaticResource fadeInAnimation}"
                                           ForwardOutAnimation="{StaticResource fadeOutAnimation}"
                                           BackwardInAnimation="{StaticResource fadeInAnimation}"
                                           BackwardOutAnimation="{StaticResource fadeOutAnimation}">
            </telerikPrimitives:RadTransition>
      
        </telerikPrimitives:RadTransitionControl.Transition>

    Let us know if you have more questions!

    Best wishes,
    Valentin.Stoychev
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  8. nodd13
    nodd13 avatar
    4 posts
    Member since:
    Feb 2011

    Posted 22 Feb 2011 Link to this post

    Thanks a lot, that works perfectly.
  9. Stefano
    Stefano avatar
    9 posts
    Member since:
    Jul 2012

    Posted 28 Feb 2011 Link to this post

    Thanks a lot for the samples, i was missing this line
    this.SetValue(RadTileAnimation.ContainerToAnimateProperty, this.TileContainerListBox);
    to properly start the animation.
    Stefano
  10. Derek
    Derek avatar
    39 posts
    Member since:
    Aug 2012

    Posted 14 Mar 2012 Link to this post

    I tried this example and get, RadFadeAnimation is not found.  I'm trying to change the Duration of the fadeout.  
  11. Todor
    Admin
    Todor avatar
    778 posts

    Posted 15 Mar 2012 Link to this post

    Hello Derek,

    Thank you for contacting us.

    Please confirm that you have referenced the assembly: Telerik.Windows.Core.dll
    and that you have added an xmlns statement in the root tag mapping a prefix to the CLR namespace Telerik.Windows.Controls from the assembly Telerik.Windows.Core. Then you can try to rebuild the solution and you should find the RadFadeAnimation. To change the duration of the fadeout, you just have to set the animation's Duration property to a new Duration.

    Please, let me know if you need additional assistance.

    All the best,
    Todor
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  12. Derek
    Derek avatar
    39 posts
    Member since:
    Aug 2012

    Posted 15 Mar 2012 Link to this post

    I believe I have all the refs correct.  I'm on the latest release.
    I reference:
    Telerik.WIndows.Controls.Data
    Telerik.WIndows.Controls.Primitives
    Telerik.WIndows.Core
    Telerik.WIndows.Data

    My xmls statement is:
     xmlns:telerik="http://schemas.telerik.com/windowsphone"

    In Resources for the page...
    <phone:PhoneApplicationPage.Resources>              
                <telerik:RadFadeAnimation x:Key="fadeInAnimation"
                                              StartOpacity="0.0"
                                              EndOpacity="1.0" />
                <telerik:RadFadeAnimation x:Key="fadeOutAnimation"
                                              StartOpacity="1.0"
                                              EndOpacity="0.0" />
        </phone:PhoneApplicationPage.Resources>


    Then:
    <telerik:RadTransitionControl.Transition>
           <telerik:RadTransition PlayMode="Consecutively"
                                            ForwardInAnimation="{StaticResource fadeInAnimation}"
                                            ForwardOutAnimation="{StaticResource fadeOutAnimation}"
                                            BackwardInAnimation="{StaticResource fadeInAnimation}"
                                            BackwardOutAnimation="{StaticResource fadeOutAnimation}">
           </telerik:RadTransition>
     
       </telerik:RadTransitionControl.Transition>

    Yet, this works fine:
    <telerik:RadTransitionControl.Transition>
            <telerik:RadSlideTransition />
        </telerik:RadTransitionControl.Transition>
  13. Todor
    Admin
    Todor avatar
    778 posts

    Posted 16 Mar 2012 Link to this post

    Hello Derek,

    As you can read from my previous post and from our online documentation here, the correct xmlns is:

    xmlns:telerikCore="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"

    You can change the prefix of course, just make sure it is the same as the one that you use in the application.

    I hope this helps.

    Regards,
    Todor
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  14. Derek
    Derek avatar
    39 posts
    Member since:
    Aug 2012

    Posted 16 Mar 2012 Link to this post

    Thanks Todor that worked,

    I didn't noticed Resharper changing the namespace.
Back to Top
DevCraft banner