Simple WPF Page Transitions

• Download source code - 20.2 KB

Introduction / Background

I have a little side project that I am working on which has multiple pages of information that need to be displayed, and I wanted a slicker way to transition between pages (UserControls) than just popping them into and out of existence (bad for the eyes).

My desire was to have better looking transitions, and this led me to develop a very simple control library with several animations built in for more elegant page switches.

The following page transition types are currently included in this version of the control:

• Fade
• Slide
• SlideAndFade
• Grow
• GrowAndFade
• Flip
• FlipAndFade
• Spin
• SpinAndFade

The control itself is very simple... it consists of a UserControl (PageTransition) which contains all of the translation logic. Inside this control, there are several animations in the UserControl.Resources tag, defining all of the available animations. There is also an enum (PageTransitionType) which is mapped as a DependencyProperty that defines which animations are available to the users of the control.

Using the Code

Using the PageTransition control is easy... you just drop the control onto your WPF window (or type it in, using the XAML editor), which will then look something like this:

<pageTransitions:PageTransition Name="pageTransition" Margin="25" TransitionType="Fade" />

Remember to set the TransitionType property to one of the available values (in the list above), which will determine the type of animation that is displayed.

Don't forget to add the namespace of the WpfPageTransitions project/class in your window/control declaration!

At this point, you can make a page change by referencing the PageTransition control on your window and doing something like this in your code-behind:

NewPage newPage = new NewPage();
pageTransition.ShowPage(newPage);   

Points of Interest

An interesting quirk that I came across when doing the animation for the slide-in/out is that using the TranslateTransform for sliding controls in and out of the window area doesn't appear to work correctly. I wasn't really looking for the slide-in/out feature, so I kind of skipped investigating the issue... If anyone has a sample they want to post of using TranslateTransform to move the control around, that would be great.

History

First revision.