I have a an app that has several pages. When I move between pages (using the NavigationService) I have an animation that makes the text fly out – think standard WP animations or Zune Client.
The animations themselves look reasonable but the problem seems to be the gap between when the animation finishes and the new page is loaded. There seem to be a slight delay when all the elements have completed the fly out and when the new page is shown.
It’s making my page transitions feel a little clunky.
How can I make the target page appear the instant the transitions have completed to avoid this?
fwiw – i’m just using the navigation service to navigate between pages.
this.NavigationService.Navigate(new Uri("/SomePage.xaml", UriKind.Relative));
I recently was trying to solve the same problem in one of my applications. My solution involved two main pieces:
Moving work from page transition time to app startup time
In my app, I have a main page that contains a long list of items, and then a details page that contains a lot of rich detail on a particular item. Navigating forward from my main page to the details page was taking a long time and looked really unpolished. The main problem was that it was taking a substantial amount of time (ie: well over one full second) just to parse the XAML and instantiate the new page. To get around this, I took the entire contents of my details page and moved it into a UserControl and I instantiate a global instance of this control on application startup. The actual details page is now an empty shell containing the minimal XAML required to instantiate the page. In the code behind for that page, I handle adding the singleton UserControl as the sole child element of the page, and then in the OnNavigatedFrom handler, I remove the UserControl from the page. This allows me to shift the XAML parsing and scene initialization logic from page navigation time to app startup time. Now obviously this makes my application take longer to startup, but given the usage pattern of my app that tradeoff is well worth it.
Using animation trickery to hide the unavoidable work
The previous steps didn’t completely solve the problem however as there was still some time needed to bind/set all the actual content of the details page, as well as the time required on the compositor thread to do the initial layout and rendering of the page. Unfortunately, there isn’t a whole lot you can do about this. I attempted to work around it as much as possible with smoke and mirrors by playing with my page transition animations. For instance, I originally had an animation that would rotate the contents of the page off the screen using a full 90 degree rotation, and then rotate on the contents of the new page using another 90 degree rotation. I changed those to only rotate part way while simultaneously fading the opacity to/from 0. If this animation is performed quickly enough, the human brain then does an amazing job of filling in the blanks and tricks the viewer into believing that the page rotated all the way. My ForwardOut animation actually only rotates by 50 degrees, but the viewer doesn’t really notice that, and in their mind they are still extrapolating the rest of the animation long after the real animation has completed. This helps mask the unavoidable work required during the page navigation.