changing transition animation at runtime

10 posts, 1 answers
  1. Cristovao
    Cristovao avatar
    24 posts
    Member since:
    Jun 2012

    Posted 29 Feb 2012 Link to this post

    I have my rootframe setup:

      RootFrame = new RadPhoneApplicationFrame();
    

    Now on certain conditions I'd like my page to transtion with RadSwivelTransition  other with RadContinuumAndSlideTransition 


    any thoughs on how-to?


  2. Answer
    Todor
    Admin
    Todor avatar
    778 posts

    Posted 01 Mar 2012 Link to this post

    Hi Cristovao,

    When you want to change the transition, you can do it through the Transition property of the RadPhoneApplicationFrame:

    ((RadPhoneApplicationFrame)Application.Current.RootVisual).Transition = new RadContinuumAndSlideTransition();

    I hope this helps. Let me know if you need additional assistance here.

    Greetings,
    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 >>
  3. DevCraft banner
  4. Appy
    Appy avatar
    2 posts
    Member since:
    Feb 2012

    Posted 01 Mar 2012 Link to this post

    Transitions are some kind of animation framework that provides different animations. It helps users to add some  attractive visual effects to their apps and implement some typical windows phone animations which are a key part of the metro experience.





    ---------------
  5. Vitalii
    Vitalii avatar
    104 posts
    Member since:
    Jul 2013

    Posted 06 Oct 2013 Link to this post

    And how to set page transition dynamically?

    I defined it globally for all pages
    var frame = new RadPhoneApplicationFrame
        {
            Transition = new RadSlideAndSwivelTransition()     
        };
     
    RootFrame = frame;

    I overloaded it for one page 
    <telerikPrimitives:RadTransitionControl.Transition>
            <telerikPrimitives:RadFadeTransition/>
        </telerikPrimitives:RadTransitionControl.Transition>

    And now i'd like to run this animation only once. Since that, i'd like to set another animation for this page. How can i do that? Transition doesnt have a name, so i cent refer it.
  6. Todor
    Admin
    Todor avatar
    778 posts

    Posted 10 Oct 2013 Link to this post

    Hello Vitalii,

    You can use RadTransitionControl's static method SetTransition in order to set a specific transition for some of your pages. For example, you can override OnNavigatedTo and set it to one transition in the beginning and another next time. Here's an example:
    static bool isFirst = true;
     
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);
     
        if (e.NavigationMode == NavigationMode.Back)
        {
            return;
        }
     
        if (isFirst)
        {
            RadTransitionControl.SetTransition(this, new RadSlideTransition());
            isFirst = false;
        }
        else
        {
            RadTransitionControl.SetTransition(this, new RadFadeTransition());
        }
    }

    This way you will have Slide Transition first time and then Fade Transitions.

    I hope this information helps.

    Regards,
    Todor
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  7. Vitalii
    Vitalii avatar
    104 posts
    Member since:
    Jul 2013

    Posted 10 Oct 2013 Link to this post

    Nice, thanks.

    How can i speed up page loading (maybe pre-load some elements or styles)?
    I have a splashscreen, and then a pivot, but animation of first pivot appearance is almost not visible: it just slows down a bit, and then page appears without animation.
  8. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 15 Oct 2013 Link to this post

    Hi Vitalii,

    Thanks for writing.

    Pre-loading styles cannot be done in a straightforward manner on Windows Phone. You should use some tricks to achieve that. For instance, you can first display a page with a busy indicator and fetch the needed data. Once the data is fetched, you can simply navigate to your main page and remove the busy indicator page from the back stack. We do that with our Telerik Examples demo app.

    Regards,
    Deyan
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  9. Vitalii
    Vitalii avatar
    104 posts
    Member since:
    Jul 2013

    Posted 15 Oct 2013 Link to this post

    Yep, i'm switching for this approach right now (before, i started loading in OnNavigatedTo), which made pages quite glitchy. Using OnLoaded makes transaction much smoothier.

    But i have main pivot page, which takes some time to be loaded on its own.

    Anyway, thanks for answer and recommendation!
  10. Vitalii
    Vitalii avatar
    104 posts
    Member since:
    Jul 2013

    Posted 16 Oct 2013 Link to this post

    Well.. problem is that OnNavigatedTo is called before animation starts. So does Loaded.

    On the other hand, OnNavigatedFrom() is called after animation finish (so i see intro animation 2 times).

    Is there another event, which fires after To animation finished, or before From animation starts?
  11. Todor
    Admin
    Todor avatar
    778 posts

    Posted 18 Oct 2013 Link to this post

    Hello Vitalii,

    I'm not sure I understand exactly your scenario, but here are the options that you have when it comes to the transitions between pages.

    1. You initiate navigation. This point is before the transitions.
    2. The new page's constructor, old page's OnNavigatedFrom and new page's OnNavigatedTo are fired. This points are after the old page's transition is finished and before the new page's transition has started.
    3. After the transition of the new page is finished RadTransitionControl's NewContentTransitionEnded event is fired. If this is the place where you need to execute your logic, you will need to get the instance of RadTransitionControl, so that you can subscribe to its event. You can use or ElementTreeHelper:
    RadTransitionControl transitionControl = ElementTreeHelper.FindVisualDescendant<RadTransitionControl>(App.Current.RootVisual);

    I hope this information helps.

    Regards,
    Todor
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top
DevCraft banner