WP7 how to use toolkit TransitionFrame?

Question

I've downloaded the most recent Windows.Phone.Controls.Toolkit and in the app.xaml.cs changed

RootFrame = new PhoneApplicationFrame();

to

RootFrame = new TransitionFrame();

I expected some change in the transition between pages, but nothing happened at all.

Do I need to do something more to achieve more interesting transitions?

Answer 1

You have to add reference xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

and try Turnstile effect by adding:

<toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
        <toolkit:NavigationInTransition.Backward>
            <toolkit:TurnstileTransition Mode="BackwardIn"/>                
        </toolkit:NavigationInTransition.Backward>
        <toolkit:NavigationInTransition.Forward>
            <toolkit:TurnstileTransition Mode="ForwardIn"/>
        </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
        <toolkit:NavigationOutTransition.Backward>
            <toolkit:TurnstileTransition Mode="BackwardOut"/>
        </toolkit:NavigationOutTransition.Backward>
        <toolkit:NavigationOutTransition.Forward>
            <toolkit:TurnstileTransition Mode="ForwardOut"/>
        </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>

to each page you want to have transition effect.

Or you can try other effects such as: Slide, Swivel, Rotate and Roll.

Answer 2

For posterity:

If you don't want to have to write all that XAML for every page, create a helper class and apply the transitions in your page's constructor.

Transitions.cs

public class Transitions {

    /// <summary>
    /// Set the Turnstile transition for this UIElement
    /// </summary>
    /// <param name="element"></param>
    public static void UseTurnstileTransition(UIElement element)
    {
        TransitionService.SetNavigationInTransition(element,
            new NavigationInTransition() {
                Backward = new TurnstileTransition() {
                    Mode = TurnstileTransitionMode.BackwardIn
                },
                Forward = new TurnstileTransition() {
                    Mode = TurnstileTransitionMode.ForwardIn
                }
            }
        );

        TransitionService.SetNavigationOutTransition(element,
            new NavigationOutTransition() {
                Backward = new TurnstileTransition() {
                    Mode = TurnstileTransitionMode.BackwardOut
                },
                Forward = new TurnstileTransition() {
                    Mode = TurnstileTransitionMode.ForwardOut
                }
            }
        );
    }
}

ExamplePage.xaml.cs

public partial class ExamplePage : PhoneApplicationPage {
    public ExamplePage() {
        InitializeComponent();

        Transitions.UseTurnstileTransition(this);
    }
}