Programming WPF, 2nd Edition

Transition Animations

Sometimes it can be useful to use animations to ease the transition between one part of the user interface and another. Many user interfaces present multiple different contexts and allow the user to navigate between them. For example, a modal dialog presents a different context from the main user interface. In navigation-style applications, each page is its own context. Most applications switch between these contexts more or less instantaneously. However, we can provide a smoother experience for the user if we animate the transition from one part of the UI to another (e.g., fade).

Unfortunately, the current version of WPF does not provide any automatic support for transition animations. For example, you can't simply supply a NavigationWindow or Frame with an animation to use when moving from one page to another. You need to do a little more work.

To provide transition animations in a navigation application, we need to handle both the Navigating and the Navigated events. In the Navigating event handler, we can capture a copy of the current page's appearance in the form of a VisualBrush. In the Navigated event, we can use this to provide a transition animation.

Tip

We can't handle it all in a single event. In the Navigated event handler, it's too late to get hold of the old page. And, in the Navigating handler, it's too early to start the animation: we don't yet know whether navigation will definitely occur, because it may be cancelled.

Example 16-35 shows the markup ...