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 ?

score 9 · Accepted Answer · answered Sep 29 '14 at 15:36

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

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.

Thanks, that's really helpful. Is there any chance to add navigation transition to the content on the page. I've tried Transitions.UseSlideTransition(this.Content) and foreach(var item in MainGrid.Children) Transitions.UseSlideTransition(item) but they don't work.. — damian131, Sep 30 '14 at 07:29
Don't know. I use custom storyboards for that - which give a great amount of freedom over animation (plus they are fun to work with!) I do use the tilt effect though on clickable elements. Say you've got a grid a user can click/tap on - add this as an attribute: toolkit:TiltEffect.IsTiltEnabled="True" — James, Sep 30 '14 at 08:16
Just replacing the `RootFrame` as `TransitionFrame` solved my problem of the transitions not showing. Thanks! — patrickjason91, Apr 16 '15 at 07:34

navigation transitions - windows phone toolkit

1 Answers1