Click here to Skip to main content
15,868,158 members
Articles / Desktop Programming / WPF

Simple WPF Page Transitions

Rate me:
Please Sign up or sign in to vote.
4.92/5 (60 votes)
20 May 2011CPOL2 min read 214.4K   19.3K   104   61
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:

XML
<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:

C#
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)


Written By
Architect
United States United States
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

 
QuestionStrange behavior if a loaded user control is running an animation Pin
daokfella2-Jan-19 19:15
daokfella2-Jan-19 19:15 
AnswerRe: Strange behavior if a loaded user control is running an animation Pin
daokfella2-Jan-19 19:54
daokfella2-Jan-19 19:54 
QuestionExcellent Job Pin
Heydar_IR26-Apr-18 2:15
Heydar_IR26-Apr-18 2:15 
QuestionMemory Issue Pin
Member 1332693627-Jul-17 23:14
Member 1332693627-Jul-17 23:14 
PraiseThank you very much Pin
Member 1038115016-May-17 18:20
Member 1038115016-May-17 18:20 
QuestionFixed the slide transition Pin
Member 86618441-Mar-17 18:34
Member 86618441-Mar-17 18:34 
AnswerRe: Fixed the slide transition Pin
Jason.LYJ1-Mar-18 19:57
professionalJason.LYJ1-Mar-18 19:57 
Questionvery good and simple example Pin
Matt W. Allen10-Jun-16 6:08
Matt W. Allen10-Jun-16 6:08 
QuestionWhat If UserControls are static Pin
Robin Purbia16-Mar-16 3:35
Robin Purbia16-Mar-16 3:35 
GeneralMy vote of 5 Pin
Lee P Richardson22-Oct-15 11:15
Lee P Richardson22-Oct-15 11:15 
QuestionError Pin
wylo suavez28-Aug-15 14:28
wylo suavez28-Aug-15 14:28 
QuestionHow to Close the Loaded UserControl Pin
Shivaraj Hosamani9-Mar-15 3:59
Shivaraj Hosamani9-Mar-15 3:59 
QuestionThanks for saving my sanity! Pin
KraftyMCSD1-Nov-14 21:05
KraftyMCSD1-Nov-14 21:05 
GeneralGreat Pin
Member 1036890029-Sep-14 0:15
professionalMember 1036890029-Sep-14 0:15 
Questiondon't know how to implent the wpfPageTransition in my project Pin
othman daid8-Sep-14 5:38
othman daid8-Sep-14 5:38 
SuggestionNavigate Event Pin
NoxCaos10-Aug-14 10:21
NoxCaos10-Aug-14 10:21 
QuestionAwesome Transition Effects Pin
Member 109802205-Aug-14 1:10
Member 109802205-Aug-14 1:10 
QuestionWay to make it with pages without user control? Pin
Erçin Dedeoğlu14-Feb-14 0:15
Erçin Dedeoğlu14-Feb-14 0:15 
Suggestionstrange kind of Threading Pin
Mr.PoorEnglish25-Nov-13 1:09
Mr.PoorEnglish25-Nov-13 1:09 
AnswerGenerally Pin
gamekoff28-Oct-13 21:18
gamekoff28-Oct-13 21:18 
QuestionStop application when transition is in progress Pin
Member 973361410-Sep-13 3:31
Member 973361410-Sep-13 3:31 
QuestionWhat if i have my button on my Page? Pin
Ralph L. Villasoto15-Aug-13 17:32
Ralph L. Villasoto15-Aug-13 17:32 
AnswerRe: What if i have my button on my Page? Pin
Randi Assalaarachchi26-Jan-16 22:40
Randi Assalaarachchi26-Jan-16 22:40 
SuggestionI added 3 transitions type PinPopular
pat_vrs15-Aug-13 9:43
pat_vrs15-Aug-13 9:43 
GeneralMy vote of 5 Pin
mjcg1230-Jul-13 9:45
mjcg1230-Jul-13 9:45 

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

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