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.

I had the same issue some time ago, and I found that the phone wasn't playing the animation if the loading function takes too much time. Try to remove everything from your loading and see if the animation came back, then add instructions... But I don't know why we have got such a behavior... and sometimes just adding a variable declaration makes the animation disappear. — Valryon
I'd expect this to be related to memory consumption. Have you looked at profiling this? — Matt Lacey
That's weird because I ain't doing anything in the constructor/OnNavigatedTo of the pivot. — Matthieu Oger
Just to be sure, I re-created an empty project with only the toolkit. It works well, except at the first launch of the pivot where the animation is often not started. The only difference with my project is that I have a lot of components inside my pivot. — Matthieu Oger

Johan Falk Johan Falk · Accepted Answer · 2012-06-28T21:02:01

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) };

Silverlight toolkit animation when navigating to a pivot control

1 Answers