Using toolkit:TransitionService in Windows Phone 8

Question

I'm very new to developing for Windows Phone 8 and I was wondering if I could get some more information on how to use this piece of code in an app:

<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>

I've read some of the examples on http://phone.codeplex.com however, it seems to only be used when a tag uses the NavigateUri attribute.

So my main question is: Does this code get executed whenever any page navigation occurs (even in the back end) or does it have to be implemented in the front end portion where the code resides?

Thank you for the help

Answer 1

I had the same problem. Found the solution here !

What you need to do is head over to App.xaml.cs and change, RootFrame = new PhoneApplicationFrame(); to RootFrame = new TransitionFrame(); in the InitializePhoneApplication() method.

Cheers!

Answer 2

There are pages: page1,page2.If you don't use the code you posted in all pages' xaml code,the page transition never occurs.

If you use the code in all pages' xaml:

case a: page1 -> page2. 

<toolkit:NavigationOutTransition.Forward>
    <toolkit:TurnstileTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>

this transition occurs in page1.

<toolkit:NavigationInTransition.Forward>
    <toolkit:TurnstileTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>

this transition occurs in page2.

case b: page2 -> page1 (back).

 <toolkit:NavigationOutTransition.Backward>
    <toolkit:TurnstileTransition Mode="BackwardOut"/>
 </toolkit:NavigationOutTransition.Backward>

this transition occurs in page2.

<toolkit:NavigationInTransition.Backward>
    <toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>

this transition occurs in page1.