Question

I tried using the Toolkit for page transitions but all the animations were stuttering. In another question, I was suggested not to use the toolkit, so I’ve implemented all the animations by myself and triggered them manually. For example navigating to another page:

void list_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    ListBox listBox = sender as ListBox;
    if (null == listBox) return;
    Data.Category item = listBox.SelectedItem as Data.Category;
    if (null == item) return;

    Uri uri = new Uri(App.MakeResourcePathTo(item.Page), UriKind.Relative);

    Storyboard storyboard = Application.Current.Resources["FlipForwardOut"] as Storyboard;
    Storyboard.SetTarget(storyboard, LayoutRoot);
    EventHandler completedHandler = delegate { };
    completedHandler = delegate
            {
                NavigationService.Navigate(uri);

                storyboard.Stop();
                storyboard.Completed -= completedHandler;
            };
    storyboard.Completed += completedHandler;
    storyboard.Begin();

    listBox.SelectedIndex = -1;
}

Is the code ok?
There shouln’t be anything else running parallel to that code, as I understand it. That’s exactly what I wanted because then nothing would interfere with my animation and make it slow.

Here is another code snippet. This shows how I handle the back-Animations.

protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
    e.Cancel = true;
    Storyboard storyboard = Application.Current.Resources["FlipBackwardOut"] as Storyboard;
    Storyboard.SetTarget(storyboard, LayoutRoot);
    EventHandler completedHandler = delegate { };
    completedHandler = delegate
    {
        storyboard.Stop();
        storyboard.Completed -= completedHandler;

        NavigationService.GoBack();
    };
    storyboard.Completed += completedHandler;
    storyboard.Begin();
}

Is there anything wrong with that code, which could cause the performance problems?

The animations are very simple, only linear animations:

<Storyboard x:Key="FlipForwardOut">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
        <LinearDoubleKeyFrame KeyTime="0" Value="0"/>
        <LinearDoubleKeyFrame KeyTime="0:0:0.4" Value="70"/>
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)">
        <LinearDoubleKeyFrame KeyTime="0" Value="1"/>
        <LinearDoubleKeyFrame KeyTime="0:0:0.4" Value="0.1"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

One thing I’ve recognized: When I’m navigating to a panorama page, the panorama page’s animations are running parallel to my page-transition animations. The parorama page’s baked-in animations let the title slide in, and also the panorama items slide into place. So, there are some translation-animations running parallel to my page transitions (which are basically rotation and opacity).
Can I somehow prevent the panorama from playing it’s own animations, or delay them until my page transition animation has completed, respectively?

There is another problem with my page transitions: When I navigate to another page and play the animation, when the animation has completed (LayoutRoot has been rotated to Y=70, and it’s opacity=0) then the original layout is displayed for a few miliseconds (with LayoutRoot rotation Y=0 and opacity=1), and then it is navigating to the next page and the animation on the next page starts.
Why is this?

I hope, someone can help me.
I’m quite frustrated after having spent so many hours on this. Regardless of what I tried, the animations showed bad performance, they are stuttering in the Emulator and on the Device.
The animations of the preinstalled apps on the phone have smooth animations. I don’t understand this. 🙁

Answer 1

Your animation code looks to be OK, though there are probably a number of scenarios that you’re not handling, so you might want to take a look at Kevin Marshall’s Page Transitions Sample (which I’ve found to perform better than the Toolkit transitions).
However, on the assumption that your animation code is fine and that you experienced similar stuttering with the toolkit transitions, are you doing anything in the constructor of your pages? It’s common for view models or data to be loaded and/or processed in the constructor, which will cause a delay in the animations because this is being done on the UI thread. You should leave as much initialisation as possible until the OnNavigatedTo override of your page.