Toolkit NavigationTransitions sometimes not working

Question

I am trying to use the navigation transitions in the Microsoft Phone Controls Toolkit. I use it with a somewhat default implementation found in most of the blog posts about the topic by defining a Style in the application resources:

<Style x:Key="ReaderTransitionPageStyle"
        TargetType="phone:PhoneApplicationPage">
    <Setter Property="toolkit:TransitionService.NavigationInTransition">
        <Setter.Value>
            <toolkit:NavigationInTransition>
                <toolkit:NavigationInTransition.Backward>
                    <toolkit:SlideTransition Mode="SlideDownFadeIn" />
                </toolkit:NavigationInTransition.Backward>
                <toolkit:NavigationInTransition.Forward>
                    <toolkit:SlideTransition Mode="SlideUpFadeIn" />
                </toolkit:NavigationInTransition.Forward>
            </toolkit:NavigationInTransition>
        </Setter.Value>
    </Setter>
    <Setter Property="toolkit:TransitionService.NavigationOutTransition">
        <Setter.Value>
            <toolkit:NavigationOutTransition>
                <toolkit:NavigationOutTransition.Backward>
                    <toolkit:SlideTransition Mode="SlideDownFadeOut" />
                </toolkit:NavigationOutTransition.Backward>
                <toolkit:NavigationOutTransition.Forward>
                    <toolkit:SlideTransition Mode="SlideUpFadeOut" />
                </toolkit:NavigationOutTransition.Forward>
            </toolkit:NavigationOutTransition>
        </Setter.Value>
    </Setter>
</Style>

Then applying this style to my pages.

However, the transitions rarely work. Sometimes they work correctly, sometimes doesn't. Even if I navigate back and forth between the same two pages, sometimes it animates correctly, sometimes not at all, the page just pops up instantly. And even when it works, the animation is not fluid at all, but rather slow.

Are there any usual reasons which slow down the transitions provided by the toolkit? Should I not make any long processing work in the OnNavigatedTo of the target page?

Are there any other techniques for doing page transition animations, or the only other solution is to do it with custom storyboards?

UPDATE: I have been developing with a HTC Mozart, and today I tried with the Lumia 800 of one of my collegaues, and it is MUCH better, probably because of the stronger hardware. However I am going to try to use Storyboards directly today.

UPDATE: Using storyboards directly did not help, the animations are still inconsistent and stuttering.

Answer 1

I think the reason could be complicated layout and a lot of processing when you navigate to or load a page. You might check it by leaving the pages fairly simple, refraining from any loading or processing - if you still don't see the animations - then I have no idea what is going on. If it gets better - you need to work on perf. Delay most processing until the transition animation completes, move everything you can to asynchronous calls/background thread processing. See this:

http://blogs.msdn.com/b/slmperf/archive/2011/06/13/off-thread-decoding-of-images-on-mango-how-it-impacts-you-application.aspx

Use a BackgroundWorker, be careful about synchronization and frugal about CPU usage.