导航转换 - windows手机工具包

我正在开发一个windows phone 8.1 silverlight应用程序，我想在我的页面之间提供简单的导航转换。导航转换 - windows手机工具包

我在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应用程序中提供导航转换的另一种方法是什么？

来源

2014-09-28 damian131

这里是我如何做到这一点（拼凑起来，从我不太记得现在各种来源）：

创建一个类调用类似与过渡效果（你不必添加所有他们的，你只需要的那些）：

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

之后，您的正常页面过渡应改为有史以来哪一个你”已经在你的页面构造函数中被选中了 - 通过保持它们在那里的所有评论，你可以尝试不同的。刚刚在一个空白的应用程序中试过了这个，它工作 - 希望它有帮助。

来源

2014-09-29 15:36:31 James

谢谢，这真的很有帮助。是否有机会将导航转换添加到页面上的内容。我试过Transitions.UseSlideTransition（this.Content）和foreach（MainGrid.Children中的var项目）Transitions.UseSlideTransition（item）但他们不工作。 – damian131 2014-09-30 07:29:44

不知道。我使用自定义的故事板 - 这给了动画上的大量自由（加上它们很有趣，可以使用！）虽然在可点击元素上使用了倾斜效果。假设你有一个网格用户可以点击/点击 - 添加这个作为属性：toolkit：TiltEffect.IsTiltEnabled =“True” – James 2014-09-30 08:16:27

只需将'RootFrame'替换为'TransitionFrame'解决了我没有显示转换的问题。谢谢！ – patrickjason91 2015-04-16 07:34:40

导航转换 - windows手机工具包

回答

相关问题