navigation transitions - windows phone toolkit

Question

I'm developing a windows phone 8.1 silverlight app and I want to provide simple navigation transitions between my pages.

I found Windows Phone Toolkit on the Nuget. Unfortunately navigation transitions from the transition service just don't work. What am I doing wrong? (I'm using Caliburn Micro as mvvm framework)

Bootstrapper.cs

public sealed class Bootstrapper : PhoneBootstrapperBase
    {
        public PhoneContainer Container { get; set; }

        public Bootstrapper()
        {
            StartRuntime();
        }

        protected override void Configure()
        {

            Container = new PhoneContainer();

            Container.RegisterPhoneServices(RootFrame);
            Container.Singleton<MainViewModel>()

            AddCustomConventions();
        }

        static void AddCustomConventions()
        {
            //ellided  
        }

        protected override object GetInstance(Type service, string key)
        {
            return Container.GetInstance(service, key);
        }

        protected override IEnumerable<object> GetAllInstances(Type service)
        {
            return Container.GetAllInstances(service);
        }

        protected override void BuildUp(object instance)
        {
            Container.BuildUp(instance);
        }

        protected override PhoneApplicationFrame CreatePhoneApplicationFrame()
        {
            return new TransitionFrame();
        }


    }

MainView.xaml

...
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
...

<Grid x:Name="LayoutRoot">
        <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>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        ...

    </Grid>

App.xaml.cs

public sealed partial class App : Application
    {
        public static PhoneApplicationFrame RootFrame { get; private set; }

        public App()
        {
            InitializeComponent();

            if (!Debugger.IsAttached) return;
            Application.Current.Host.Settings.EnableFrameRateCounter = false;

            PhoneApplicationService.Current.UserIdleDetectionMode = IdleDetectionMode.Disabled;

        }
    }

Alternatively, what is the other method for providing navigation transitions in the windows phone SL 8.1 app ?

Answer 1

Here's how I do it (pieced together from various sources I can't quite remember now):

1. Create a class called something like Transitions with the transitions (you don't have to add all of them, just the ones you need):

   //Turnstile transition
   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
               }
           }
       );
   }
   
   //Slide transition
   public static void UseSlideTransition(UIElement element)
   {
       TransitionService.SetNavigationInTransition(element,
           new NavigationInTransition()
           {
               Backward = new SlideTransition()
               {
                   Mode = SlideTransitionMode.SlideRightFadeIn
               },
               Forward = new SlideTransition()
               {
                   Mode = SlideTransitionMode.SlideLeftFadeIn
               }
           }
       );
   
       TransitionService.SetNavigationOutTransition(element,
           new NavigationOutTransition()
           {
               Backward = new SlideTransition()
               {
                   Mode = SlideTransitionMode.SlideRightFadeOut
               },
               Forward = new SlideTransition()
               {
                   Mode = SlideTransitionMode.SlideLeftFadeOut
               }
           }
       );
   }
   
   //Slide up/down transition
   public static void UseSlideUpDownTransition(UIElement element)
   {
       TransitionService.SetNavigationInTransition(element,
           new NavigationInTransition()
           {
               Backward = new SlideTransition()
               {
                   Mode = SlideTransitionMode.SlideUpFadeIn
               },
               Forward = new SlideTransition()
               {
                   Mode = SlideTransitionMode.SlideDownFadeIn
               }
           }
       );
   
       TransitionService.SetNavigationOutTransition(element,
           new NavigationOutTransition()
           {
               Backward = new SlideTransition()
               {
                   Mode = SlideTransitionMode.SlideUpFadeOut
               },
               Forward = new SlideTransition()
               {
                   Mode = SlideTransitionMode.SlideDownFadeOut
               }
           }
       );
   }
   
   //Swivel transition
   public static void UseSwivelTransition(UIElement element)
   {
       TransitionService.SetNavigationInTransition(element,
           new NavigationInTransition()
           {
               Backward = new SwivelTransition()
               {
                   Mode = SwivelTransitionMode.BackwardIn
               },
               Forward = new SwivelTransition()
               {
                   Mode = SwivelTransitionMode.ForwardIn
               }
           }
       );
   
       TransitionService.SetNavigationOutTransition(element,
           new NavigationOutTransition()
           {
               Backward = new SwivelTransition()
               {
                   Mode = SwivelTransitionMode.BackwardOut
               },
               Forward = new SwivelTransition()
               {
                   Mode = SwivelTransitionMode.ForwardOut
               }
           }
       );
   }
   
   //Rotate transition
   public static void UseRotateTransition(UIElement element)
   {
       TransitionService.SetNavigationInTransition(element,
           new NavigationInTransition()
           {
               Backward = new RotateTransition()
               {
                   Mode = RotateTransitionMode.In90Clockwise
               },
               Forward = new RotateTransition()
               {
                   Mode = RotateTransitionMode.In180Clockwise
               }
           }
       );
   
       TransitionService.SetNavigationOutTransition(element,
           new NavigationOutTransition()
           {
               Backward = new RotateTransition()
               {
                   Mode = RotateTransitionMode.Out180Counterclockwise
               },
               Forward = new RotateTransition()
               {
                   Mode = RotateTransitionMode.Out90Counterclockwise
               }
           }
       );
   }
   
   //Roll transition (doesn't have any modes)
   public static void UseRollTransition(UIElement element)
   {
       TransitionService.SetNavigationInTransition(element,
           new NavigationInTransition()
           {
               Backward = new RollTransition()
               {
                   //Mode = RollTransitionMode.In90Clockwise
               },
               Forward = new RollTransition()
               {
                   //Mode = RollTransitionMode.In180Clockwise
               }
           }
       );
   
       TransitionService.SetNavigationOutTransition(element,
           new NavigationOutTransition()
           {
               Backward = new RotateTransition()
               {
                   //Mode = RotateTransitionMode.Out180Counterclockwise
               },
               Forward = new RotateTransition()
               {
                   //Mode = RotateTransitionMode.Out90Counterclockwise
               }
           }
       );
   }
   

2) Add the transition you want to use in the the page constructor of all pages you want the transitions to apply to:

public MainPage()
    {
        InitializeComponent();

        this.Loaded += new RoutedEventHandler(MainPage_Loaded);

        //Setup page transitions using custom class file
        //1. Turnstile transition
        Transitions.UseTurnstileTransition(this);
        //2. Slide transition
        //Transitions.UseSlideTransition(this);
        //3. Slide up/down transition
        //Transitions.UseSlideUpDownTransition(this);
        //4. Swivel transition
        //Transitions.UseSwivelTransition(this);
        //5. Rotate transition
        //Transitions.UseRotateTransition(this);
        //6. Roll transition
        //Transitions.UseRollTransition(this);
    }

3) Lastly, you need to change your RootFrame in App.xaml.cs from PhoneApplicationFrame to TransitionFrame:

//RootFrame = new PhoneApplicationFrame();
RootFrame = new TransitionFrame();

After that, your normal page transitions should be changed to which ever one you've selected in your page constructor - by keeping them all commented there you can try out different ones. Just tried this out in a blank app and it worked - hope it helps.