changing transition animation at runtime

[Cristovao]

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?

[Todor]

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

[Appy]

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.





---------------

[Vitalii]

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.

[Todor]

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

[Vitalii]

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.

[Deyan]

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

[Vitalii]

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!

[Vitalii]

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?

[Todor]

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