My friend and colleague Jared Bienz over on the ISV Evangelism Team just released a new project today out on CodePlex called Transitionals.  In the wake of all the recent upsurgence of interest in WPF, this cool effect couldn’t have come at a better time for most of us.  As described on the Transitionals project page, the Transitionals library allows a WPF developer to add cool object transition effects, just like those used in Video Editing and in PowerPoint (ok - sometimes this gets over used, but it can be tastefully done).  Some of the effects in the first release of this open source project include Checkerboard, Diagonal Wipe,Melt, Door, Dots, Double Rotate, Explosion, Fade and Blur and many more!  Of course, the entire library is extensible, so you can define your own Transitions and use them in your own applications.

The Transitions library integrates into your WPF application at the XAML level.  Adding a transition effect is easy:

1. Add a reference to the Transitionals.dll assembly to your project
   
2. Add the appropriate XML namespaces to your WPF document:

   xmlns:trans="clr-namespace:Transitionals;assembly=Transitionals"

   xmlns:transc="clr-namespace:Transitionals.Controls;assembly=Transitionals"

   xmlns:transt="clr-namespace:Transitionals.Transitions;assembly=Transitionals"

   xmlns:refl="clr-namespace:System.Reflection;assembly=mscorlib"

3. Add a TransitionElement object to the XAML of your window or user control that specifies the transformations you wantinside the TransitionElement.Transition property:

   <transc:TransitionElement x:Name="TransitionBox">

       <transc:TransitionElement.Transition>

           <transt:RotateTransition Angle="45" />

       </transc:TransitionElement.Transition>

   </transc:TransitionElement>

4. Alternatively, you can set the TransactionElement.TransactionSelector property to something like the built-in RandomTransitionSelector class to choose between a set of your favorite Transitions:

   <transc:TransitionElement x:Name="TransitionBox">

       <transc:TransitionElement.TransitionSelector>

           <trans:RandomTransitionSelector>

               <transt:DoorTransition/>

               <transt:DotsTransition/>

               <transt:RotateTransition Angle="45" />

               <transt:RollTransition/>

           </trans:RandomTransitionSelector>

       </transc:TransitionElement.TransitionSelector>

   </TransitionElement>

5. Now all that's left is to assign the pieces of content you want managed by the TransitionElement.  These go in the Content property as shown in this sample.  In this case, we've added 2 button controls (AButton and BButton) and are using their Button.Click events to swap between two separate User Controls:

   UserControlA userControlA = new UserControlA();

   UserControlB userControlB = new UserControlB();

   private void AButton_Click(object sender, RoutedEventArgs e)

   {

       TransitionBox.Content = userControlA;

   }

   private void BButton_Click(object sender, RoutedEventArgs e)

   {

       TransitionBox.Content = userControlB;

   }

6. Presto!  When you run the application, the transition will take place when you click between the buttons.

To get more information about the Transitionals project, be sure to check out these fine resources:

• Jared's blog:  http://blogs.msdn.com/jbienz
• ISV Evangelist's Blog: http://blogs.msdn.com/usisvde/default.aspx
• CodePlex Project Page: http://shrinkster.com/xhp

Now - someone needs to build a "blink" and a "gradient wipe" transition so that the circle will be complete...