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.

Advertisements

~ by Matthijs Krempel on May 9, 2012.

14 Responses to “Turnstile Transition”

  1. Very nice, would be even better if you also created the continuum animation ;-). Good work!

  2. […] Read the original post by Matthijs Krempel at the windows phone 7 developer […]

  3. Cool! Tried to use it in my latest WP7 creation, but either I’m doing something wrong or I found a bug. Have you seen this exception before? Happens during startup of my MainPage.xaml panorama page:

    at MS.Internal.XcpImports.CheckThread()
    at MS.Internal.XcpImports.Storyboard_SkipToFill(Storyboard storyboard)
    at System.Windows.Media.Animation.Storyboard.SkipToFill()
    at Krempel.WP7.Core.Controls.CustomAnimationTransition.b__3(Exception onError)
    at Microsoft.Phone.Reactive.AnonymousObserver`1.Error(Exception exception)
    at Microsoft.Phone.Reactive.AbstractObserver`1.OnError(Exception exception)
    at Microsoft.Phone.Reactive.AnonymousObservable`1.AutoDetachObserver.Error(Exception exception)
    at Microsoft.Phone.Reactive.AbstractObserver`1.OnError(Exception exception)
    at Microsoft.Phone.Reactive.Observable.c__DisplayClass161`1.c__DisplayClass163.b__160()
    at Microsoft.Phone.Reactive.CurrentThreadScheduler.Trampoline.Run()
    at Microsoft.Phone.Reactive.CurrentThreadScheduler.EnsureTrampoline(Action action)
    at Microsoft.Phone.Reactive.AnonymousObservable`1.Subscribe(IObserver`1 observer)
    at Microsoft.Phone.Reactive.Observable.c__DisplayClass323`1.c__DisplayClass325.b__31e()
    at Microsoft.Phone.Reactive.ThreadPoolScheduler.c__DisplayClass5.b__3(Object _)
    at System.Threading.Timer.ring()

    • Hi peSHir,

      I’ve not tested it with a Panorama page, so it might be a bug!

      I’ll look into it!

      Edit;

      Fixed it, timeout function on the animation (I don’t want to make the user wait just for an animation) was doing invalid cross thread things 😉

      Upgraded NuGet and checked it into Codeplex.

      Thanks for filing it!

  4. No problem! Will upgrade and (re)check now. Thanks!

  5. Tried again in my panorama app (took Krempel.WP7.Core from the test-XAP at http://krempelwp7.codeplex.com/releases/view/87787 just now) and I still get System.UnauthorizedAccessException upon startup, with app showing partial frozen panorama in debug mode. I’ll leave out this cool effect for now; need to get the app finished…

  6. is it possible to set IsTurnstileItem programatically ?

  7. How to apply backward slide transition in windows phone. If I flick backward transition behave like same as I flick forward. Can anybody tell me how to transit page backward … Thanks

  8. Good way of telling, and fastidious paragraph
    to get data concerning my presentation focus, which i am going to convey in
    college.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: