Click here to Skip to main content
Click here to Skip to main content
Go to top

Simple WPF Page Transitions

, 20 May 2011
Rate this:
Please Sign up or sign in to vote.
WPF UserControl enabling simple page transitions, such as slide, grow, spin, etc.

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.

spinfade.png

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Aron Weiler
Technical Lead CareFusion
United States United States
I just looooove software.
 
Check out my technical blog here: The Fyslexic Duck. You can find most of what I've put on CodeProject there, plus some additional technical articles.

Comments and Discussions

 
Questiondon't know how to implent the wpfPageTransition in my project Pinmemberothman daid8-Sep-14 5:38 
SuggestionNavigate Event PinmemberMember 1064006610-Aug-14 10:21 
QuestionAwesome Transition Effects PinmemberMember 109802205-Aug-14 1:10 
QuestionWay to make it with pages without user control? PinmemberFancy Fanta14-Feb-14 0:15 
Suggestionstrange kind of Threading PinmemberMr.PoorEnglish25-Nov-13 1:09 
AnswerGenerally PinmemberMember 1036680928-Oct-13 21:18 
QuestionStop application when transition is in progress PinmemberMember 973361410-Sep-13 3:31 
QuestionWhat if i have my button on my Page? PinmemberRalph L. Villasoto15-Aug-13 17:32 
SuggestionI added 3 transitions type Pinmemberpat_vrs15-Aug-13 9:43 
GeneralMy vote of 5 Pinmembermjcg1230-Jul-13 9:45 
BugShowPage( null ) Exception Pinmemberrusvenom13-May-13 0:45 
Questionhelp PinmemberMember 95703715-May-13 17:35 
GeneralMy vote of 5 Pinmemberjosemartins.grupoma19-Apr-13 4:40 
QuestionExcellent Pinmembercodertuhin27-Mar-13 6:49 
Questionhow to use multiple windows and navigate backward? [modified] PinmemberCesitar Ps19-Mar-13 10:37 
QuestionSlide Function [modified] PinmemberPrasad Dhule10-Mar-13 3:59 
GeneralMy vote of 5 Pinmemberjosemartins.grupoma6-Feb-13 4:29 
GeneralMy vote of 5 PinmemberAriadnesThread21-Jan-13 5:19 
QuestionAnything for .NET 3.5? PinmemberMarc Paliotti6-Sep-12 5:16 
AnswerRe: Anything for .NET 3.5? PinmemberAron Weiler15-Oct-12 12:42 
GeneralMy vote of 5 Pinmembercotopboy Zhang28-May-12 6:23 
QuestionGreat work PinmemberMember 783061516-Mar-12 6:53 
BugBug in Slide-function PinmemberBob vd Bergh20-Jan-12 2:01 
SuggestionDisable pagetransition? PinmemberBob vd Bergh21-Nov-11 5:33 
SuggestionVB version [modified] PinmemberBob vd Bergh18-Nov-11 2:38 
QuestionRe: VB version Pinmemberchofillo16-Apr-12 8:48 
GeneralRe: VB version PinmemberWolfmanLee16-Jun-12 2:35 
GeneralRe: VB version Pinmemberatzdgreat28-Jun-12 1:41 
hi can you send me the convertion to vb.net of this wonderful program? thanks a lot. Smile | :)
GeneralRe: VB version PinmemberSanto Adzelito24-Oct-12 2:50 
SuggestionAlmost perfect ! PinmemberMember 772250924-Jun-11 3:13 
GeneralRe: Almost perfect ! Pinmemberpaulot2130-Jun-11 1:56 
QuestionA Cross Fade Transition would rock! Pinmembernatalie7424-Jun-11 1:19 
GeneralHow to transition within a particular boundary? PinmemberLap Chan31-May-11 13:54 
GeneralRe: How to transition within a particular boundary? PinmemberAron Weiler31-May-11 13:59 
GeneralCreate a new thread to synchronize it in the next step? Pinmembert0bsen24-May-11 9:22 
GeneralRe: Create a new thread to synchronize it in the next step? PinmemberAron Weiler24-May-11 11:40 
GeneralRe: Create a new thread to synchronize it in the next step? Pinmembert0bsen24-May-11 11:43 
GeneralIn Windows Forms, this might leak ressources?! Pinmembert0bsen24-May-11 8:59 
GeneralRe: In Windows Forms, this might leak ressources?! PinmemberAron Weiler24-May-11 11:30 
GeneralNice PinmemberCIDev20-May-11 6:03 
Generalvery good! Pinmember428820-May-11 5:26 
GeneralMy vote of 5 Pinmembersam.hill20-May-11 5:25 
GeneralNice PinmvpSacha Barber20-May-11 5:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140905.1 | Last Updated 20 May 2011
Article Copyright 2011 by Aron Weiler
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid