Turnstile Transition

It has always bugged me that the cool native turnstile animations for Windows Phone 7 are not natively available to developers. Rather then sit around and mope about it, I’ve implemented my own Turnstile transition.

I know that there are a couple of other turnstile controls out there, but they require you to use a custom itemscontrol and they animate on the ui thread. That’s not very cool, we should be able to turnstile what we like, regardless of what itemscontrol or contentcontrol our items are hosted in and it’s also better to animate them on the compositor thread, as we can do calculations or data retrieval when navigating (who actually does that?).

Without further ado, I present my turnstile transition based on the excellent Silverlight Toolkit for Windows Phone 7.

As you have come to expect from me, the transition is very easy to use. Just set up your normal page transitions as you would using the toolkit.

First, you have to replace the normal PhoneApplicationFrame with the TransitionFrame from the toolkit in the App.xaml.cs.

// Do not add any additional code to this method
private void InitializePhoneApplication()
{
if (phoneApplicationInitialized) return;

// Create the frame but don't set it as RootVisual yet; this allows the splash
// screen to remain active until the application is ready to render.
//RootFrame = new PhoneApplicationFrame();
RootFrame = new Microsoft.Phone.Controls.TransitionFrame();
RootFrame.Navigated += CompleteInitializePhoneApplication;

// Handle navigation failures
RootFrame.NavigationFailed += RootFrame_NavigationFailed;

// Ensure we don't initialize again
phoneApplicationInitialized = true;
}

Then in your page, set up the turnstile transition like so;

<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<krempel:ItemTurnstileTransition XMode="BackwardIn" YMode="BottomToTop" />
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<krempel:ItemTurnstileTransition XMode="ForwardIn" YMode="BottomToTop" />
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>

<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<krempel:ItemTurnstileTransition XMode="BackwardOut" YMode="TopToBottom" />
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<krempel:ItemTurnstileTransition XMode="ForwardOut" YMode="TopToBottom" />
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>

</toolkit:TransitionService.NavigationOutTransition>

You can change the XMode and the YMode to your wishes, but I suggest you leave it like this, as it gives the best experience.

Now that the transitionframe and the transition are in place, it’s time to let the transition know what elements it should turnstile.

<Button krempel:ItemTurnstileTransition.IsTurnstileItem="True" x:Name="ButtonHTMLTextBlock" Content="HTMLTextBlock" Click="ButtonHTMLTextBlock_Click" />

You can do this by setting the attached property to true. Now the transition will animate the button, regardless of what itemscontrol or contentcontrol it is in!

How cool is that!?

Source code is available at Krempel’s WP7 Codeplex project and NuGet package will follow suit!

Any questions are welcome in the comments section.

About these ads

~ by Matthijs Krempel on May 9, 2012.