導航過渡 - Windows Phone工具包

Question

我正在開發一個Windows phone 8.1 silverlight應用程序，我想在我的頁面之間提供簡單的導航過渡。

我在Nuget上找到了Windows Phone Toolkit。 不幸的是，轉換服務的導航轉換不起作用。 我究竟做錯了什么？ （我使用Caliburn Micro作為mvvm框架）

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;

        }
    }

或者，在Windows Phone SL 8.1應用程序中提供導航過渡的另一種方法是什么？

Answer 1

這是我如何做到的（從我現在不太記得的各種來源拼湊而成）：

1. 使用轉換創建一個名為Transitions的類（您不必添加所有這些，只需要添加所需的類）：

    //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）在要將轉換應用於的所有頁面的頁面構造函數中添加要使用的轉換：

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）最后，您需要將App.xaml.cs中的RootFrame從PhoneApplicationFrame更改為TransitionFrame：

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

之后，您的正常頁面轉換應該更改為您在頁面構造函數中選擇的那個 - 通過將它們全部注釋在那里，您可以嘗試不同的頁面轉換。 只是在一個空白的應用程序中嘗試了它，它工作 - 希望它有所幫助。