Silverlight toolkit animation when navigating to a pivot control

Question

I'm using the silverlight toolkit animation in all my pages. It works fine in classic page, panorama page and when closing a pivot.

But when I'm navigating to a pivot control, I often find that the animation doesn't start at all, especially on an average device (like the HTC Trophy). It's a better on a good phone (like the Lumia 800), but the animation does not trigger every time.

Is there a known bug with the pivot control that delays the initialization and causes the animation to be cancelled ? I can't understand why the animation is so erratic, and why it works from time to time. In the People app, for example, when you click on a contact, the pivot always shows the animation. I would like to be able to reproduce this behavior.

FYI, I put this code in the xaml files :

<toolkit:TransitionService.NavigationInTransition>
  <toolkit:NavigationInTransition>
    <toolkit:NavigationInTransition.Backward>
      <toolkit:TurnstileTransition
        Mode="BackwardIn" />
    </toolkit:NavigationInTransition.Backward>
    <toolkit:NavigationInTransition.Forward>
      <toolkit:TurnstileTransition
        Mode="ForwardIn" />
    </toolkit:NavigationInTransition.Forward>
  </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
  <toolkit:NavigationOutTransition>
    <toolkit:NavigationOutTransition.Backward>
      <toolkit:TurnstileTransition
        Mode="BackwardOut" />
    </toolkit:NavigationOutTransition.Backward>
    <toolkit:NavigationOutTransition.Forward>
      <toolkit:TurnstileTransition
        Mode="ForwardOut" />
    </toolkit:NavigationOutTransition.Forward>
  </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

Any clue would help. Thanks.

Answer 1

Probably the loading of the page is too slow, I would start by profiling and see what takes the most time to execute and check the memory usage.

Some tricks I use when the animation doesn't show up:

• Remove as much code as possible from OnNavigatedTo event and the page constructor (as also mentioned by Ashen in the comments)
• Reduce the amount of layout components. One approach is to try replacing as much of the layout as possible with images instead. You can also try creating the components from code when page has loaded instead. (For example for the pivot items not visible at the moment)
• If you have a Bing maps control on the page, remove it from XAML and load it from code instead as that control often stops the animation from appearing. (Due to slow loading)
• Make sure all your images used are set to Content and not Resource when possible. (This should reduce intial app loading time)
• Remove all attributes in the XAML code that has the default value, for example if you got the Margin property is unncessary as 0 already is the default value. Removing the Margin property would increase the speed a little (as less XAML needs to be parsed). If you do this on a lot of controls you might get some noticeable improvement in speed.

And finally set the background of the transition frame to transparent in App.xaml.cs (too reduce the fill rate):

RootFrame = new TransitionFrame() { Background = new SolidColorBrush(Colors.Transparent) };