導航轉換 - windows手機工具包

Question

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

我在Nuget上找到了Windows Phone Toolkit。不幸的是，轉換服務的導航轉換不起作用。我究竟做錯了什麼？ （我使用微卡利作爲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. 創建一個類調用類似與過渡效果（你不必添加所有他們的，你只需要的那些）：

   //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(); 

之後，您的正常頁面過渡應改爲有史以來哪一個你」已經在你的頁面構造函數中被選中了 - 通過保持它們在那裏的所有評論，你可以嘗試不同的。剛剛在一個空白的應用程序中試過了這個，它工作 - 希望它有幫助。