What is Turnstile?

With the introduction of Windows Phone 7, many developers have found new and interesting ways to design and present their applications. Through the use of beautiful typography, geometric designs and subtle use of motion, the Metro design language enables us to create user experiences that are modern, clean and consistent.

One of the characteristic effects of this design language is the well-known "turnstile" transition, featured in the Windows Phone 7 start screen and in some applications that come with the phone. This animation consists in rotating each element of the screen in 3D in succession in such a way that the whole page seems to move fluidly - an image is worth a thousand words:



This control is an ItemsControl for Silverlight that allows you to recreate the Turnstile effect in your applications.

Demos

Two demos of this control are available on

• http://bit.ly/wptiles and
• http://bit.ly/wptiles3c

Usage

To use the Turnstile in your apps, simply add a reference to VirtualDreams.Turnstile.dll and use it as a regular ItemsControl. For example, you could use the following code:

<UserControl 
    (...)
    xmlns:vd="clr-namespace:VirtualDreams.Turnstile;assembly=VirtualDreams.Turnstile">
    (...)
    <vd:Turnstile x:Name="turnstile">
        <vd:Turnstile.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel/>
            </ItemsPanelTemplate>
        </vd:Turnstile.ItemsPanel>
        <Border />
        <Border />
        <Border />
        <Border />
        <Border />
        <!-- more items -->
     </vd:Turnstile>
</UserControl>

And call the AnimateTiles() method to animate the tiles. For example, in the code-behind of a UserControl called MainPage, you can call:

public MainPage()
{
    InitializeComponent();
    SizeChanged += (s,e) => turnstile.AnimateTiles(EnterMode.Enter, YDirection.BottomToTop, ZDirection.FrontToBack);
}

The Turnstile control supports 4 directions for both entering and exiting:

Tell me more!

For more information on the Turnstile control and how it's built, see the CodeProject article that explains in details how it works at http://www.codeproject.com/KB/windows-phone-7/WP7Turnstile.aspx.

Credits

Roberto Sonnino - 2010
http://virtualdreams.com.br/blog
Twitter: @robertos_br