MVVM WP7 - 页面导航和过渡动画答案

【问题标题】：MVVM WP7 - Page navigation and transition animationMVVM WP7 - 页面导航和过渡动画
【发布时间】：2012-09-30 21:06:16
【问题描述】：

我是 WP7 中 MVVM 模型的初学者。我无法实现页面之间的导航以及动画转换。

我想要达到的目标：

当 Page1 导航到 Page2 将开始过渡动画 animation1 但当 Page1 导航到Page3 将启动不同的过渡动画animation2。
ViewModel 可以取消 GoBack 导航，例如搜索模式开启时（TextBox 可见，用户按返回键后，TextBox 将被隐藏，ViewModel 将切换到搜索模式关闭，并防止页面返回）

我创造了这样的东西：

ExtendedPhoneApplicationPage : PhoneApplicationPage - 特殊控件，继承自PhoneApplicationPage，通过接口INavigation调用ViewModel的请求

MainViewModel : INavigation - MainViewModel 即 ViewModel，实现接口 INavigation。

它是如何工作的？

用户点击返回键
ExtendedPhoneApplicationPage 询问 MainViewModel（或实现 INavigation 的不同）现在应该开始什么动画
MainViewModel 将正确的动画返回给 View

MVVM 是否正确？如果没有怎么能做到这一点？

编辑：

可能我上面写的不是很好的解决方案，我读到 ViewModel 应该只能通过 Data Binding 和 Command 与 View 通信。我今天在想这个，我明白了。

在 XAML 中应该是这样的：

<Navigation>
        <NavigationInTransition>
            <NavigationInTransition.ForwardTransitions>
                <ForwardTransition NavigateTo="page2.xaml">
                    <ForwardTransition.Animation>
                        <SlideTransitionAnimation Mode="ForwardIn"/>
                    </ForwardTransition.Animation>
                </ForwardTransition>
                <ForwardTransition NavigateTo="page3.xaml">
                    <ForwardTransition.Animation>
                        <TurnstyleTransitionAnimation Mode="ForwardIn"/>
                    </ForwardTransition.Animation>
                </ForwardTransition>
            </NavigationInTransition.ForwardTransitions>
        </NavigationInTransition>
        <BackKeyPressed IsPrevent="{Binding SomethingBool}" Command="{Binding BackKeyPressed}"/>
</Navigation>

【问题讨论】：

标签： windows-phone-7 mvvm mvvm-light transition

【解决方案1】：

在 App.xaml 中创建资源

  <Style x:Key="PageStyle" TargetType="phone:PhoneApplicationPage">
  <Setter Property="toolkit:TransitionService.NavigationInTransition">
    <Setter.Value>
      <toolkit:NavigationInTransition>
        <toolkit:NavigationInTransition.Backward>
          <toolkit:TurnstileTransition Mode="BackwardIn" />
        </toolkit:NavigationInTransition.Backward>
        <toolkit:NavigationInTransition.Forward>
          <toolkit:TurnstileTransition Mode="ForwardIn" />
        </toolkit:NavigationInTransition.Forward>
      </toolkit:NavigationInTransition>
    </Setter.Value>
  </Setter>
  <Setter Property="toolkit:TransitionService.NavigationOutTransition">
    <Setter.Value>
      <toolkit:NavigationOutTransition>
        <toolkit:NavigationOutTransition.Backward>
          <toolkit:TurnstileTransition Mode="BackwardOut" />
        </toolkit:NavigationOutTransition.Backward>
        <toolkit:NavigationOutTransition.Forward>
          <toolkit:TurnstileTransition Mode="ForwardOut" />
        </toolkit:NavigationOutTransition.Forward>
      </toolkit:NavigationOutTransition>
    </Setter.Value>
  </Setter>
</Style>

对于带有过渡的页面 Style="{StaticResource PageStyle}"

【讨论】：