TransitionContainer: Easy transitions between views

Transitions, which is another word for animating between views, is a great way of keeping the user engaged as he interacts with your application. Most applications would contain a wide variety of views, where each view aids in interacting with a specific functionality of the application. When switching to a different view, a gradual animated change is far superior than an instant switch. It gives a context to the user telling him where he was earlier and where he is going to next.

TransitionContainer is my custom control that can do a wide variety of transitions, 2D as well as 3D. It contains a bunch of transitions, which come out of the box as well as a really simple framework for creating custom transitions. The transitions that come by default or also implemented using the same framework.

Before I go into details about the framework, lets have a look at a video of the transitions in action. Below you can see my favorite transitions: Genie, Cube and Slide… you can tell where I get my inspiration from

TransitionContainer and the framework

The TransitionContainer is a host element that takes care of all the nitty-gritties of applying transitions between views. A quick snippet of XAML shows its usage:

<Controls:TransitionContainer x:Name="_transContainer">

    <Image x:Name="_image1"
           Source="/Resources/img1.jpg"
           Stretch="Fill" />

    <Image x:Name="_image2"
           Source="/Resources/img2.jpg"
           Stretch="Fill" />

</Controls:TransitionContainer>

Here the container contains a set of Images. In general it can contain any UIElement (aka views). TransitionContainer.Transition property points to an instance of a class that implements the transition. A transition between two views can be invoked by calling TransitionContainer.ApplyTransition(string, string). The two string parameters point to the names of the two children between which the transition is applied. In the example above, the transition between the images can be applied by calling:

_transContainer.ApplyTransition("_image2", "_image1");

You can see that it is really easy to use the control. Just dump all your views inside the TransitionContainer, set a Transition and call ApplyTransition(). Easy.

Transitions

Transitions are pluggable classes and you can switch the transition to use at runtime (and at will ). Each transition derives from the abstract class Transition:

public abstract class Transition
{
    public abstract void Setup(Grid container, VisualBrush prevBrush, VisualBrush nextBrush);

    public abstract void PlayTransition(Grid container, TransitionContainer transContainer);
}

ApplyTransition() internally calls the Setup() method first followed by PlayTransition(). In Setup() you can create all the elements that are needed during the transition. PlayTransition() is where the actual transition will be seen on screen. Here you can run Storyboards on the elements you created earlier. At the end of the transition, you are supposed to call TransitionContainer.FinishTransition(). This does some cleaning work, fires a TransitionCompleted event and then brings the new view for user interaction.

[I am in the process of refactoring the APIs so that only the TransitionContainer would need to be passed into the Transition. The first parameter (Grid container) is unnecessarily exposing an implementation detail]

I use the convention of suffixing all my transition classes with -Transition, as in GenieTransition. As a side note, the GenieTransition is actually very thin wrapper around my GenieAnimation class.

Technorati Tags: wpf, xaml, genie, transition, customcontrol

Similar Posts:

• Using Attached Properties for view transitions, the ViewManager
• Don’t forget to pass the Input brush to the Shader
• Huge limitation of a MarkupExtension
• TransitionContainer added to FluidKit
• Quick tip to get a striped background