在屏幕之间切换 WPF

Switching Between Screens WPF

提问by David Gutierrez

I'm new to using WPF, and I'd like to see what people recommend as best practice when it comes to navigating across multiple screens in a WPF application that is using the MVVM Light Toolkit. Being new to WPF, please excuse me if my terminology is incorrect as I'm not sure if the proper term is "switching views", "navigating pages", "changing windows", or something else (clarification on these terms as related to WPF would be appreciated).

我是使用 WPF 的新手，我想看看人们在使用 MVVM Light Toolkit 的 WPF 应用程序中跨多个屏幕导航时推荐的最佳实践。作为 WPF 的新手，如果我的术语不正确，请原谅我，因为我不确定正确的术语是“切换视图”、“导航页面”、“更改窗口”还是其他东西（澄清这些术语与WPF将不胜感激）。

To clarify what I want to do: I have an application that has 3 full screen pages/views the user should be able to move back and forth from. These views will never be displayed at the same time, so they're most easily compared to tabs in a tab control; except I don't want the tab strip that a tab control usually comes with. Instead I'd like to switch between pages/views programmatically.

澄清我想做什么：我有一个应用程序，它有 3 个全屏页面/视图，用户应该能够来回移动。这些视图永远不会同时显示，因此最容易将它们与选项卡控件中的选项卡进行比较；除了我不想要选项卡控件通常附带的选项卡条。相反，我想以编程方式在页面/视图之间切换。

I've seen a couple different approaches, in the following stack over flow answers:

我在以下 stack over flow 答案中看到了几种不同的方法：

1. https://stackoverflow.com/a/6114865/1081879
2. How to navigate through windows with MVVM Light for WPF?

1. https://stackoverflow.com/a/6114865/1081879
2. 如何使用 MVVM Light for WPF 浏览窗口？

So really I am just wondering which of the above to approaches is the direction I should head in? I've already actually implemented the first answer, but I'm not sure if doing this is an "abuse"/"hack" of data templates or if this is how the framework should be used.

所以我真的只是想知道上述哪种方法是我应该前进的方向？我实际上已经实现了第一个答案，但我不确定这样做是否是对数据模板的“滥用”/“黑客”，或者这是否是应该使用框架的方式。

Finally, perhaps MVVM Light isn't the most suited toolkit I could be using if other toolkits provide this functionality out of the box. Could anyone shed light on this notion, and maybe recommend a more suited toolkit?

最后，如果其他工具包提供开箱即用的功能，那么 MVVM Light 可能不是我可以使用的最合适的工具包。任何人都可以阐明这个概念，并推荐一个更合适的工具包？

Thanks,

谢谢，

采纳答案by David Gutierrez

What I really was looking for in the question was a reference that showed one of the two approaches I listed was actually commonly used and a solid approach.

我在问题中真正寻找的是一个参考资料，它显示了我列出的两种方法之一实际上是常用的并且是一种可靠的方法。

I've finally stumbled onto this: http://msdn.microsoft.com/en-us/library/gg405484%28v=PandP.40%29.aspx

我终于偶然发现了这个：http: //msdn.microsoft.com/en-us/library/gg405484%28v=PandP.40%29.aspx

Which calls out the first way of using data templates for your view models.

其中调用了为视图模型使用数据模板的第一种方法。

回答by eran otzap

a quick and dirty example of navigation (this was written here and not in VS so if something is misspelled please apply a the fix ) :

一个快速而肮脏的导航示例（这是在此处编写的，而不是在 VS 中编写的，因此如果拼写错误，请应用修复程序）：

lets create an hierarchic description of our views :

让我们为我们的视图创建一个分层描述：

  public abstract Class ViewModelBase : INotifyPropertyChanged{} 
  public abstract Class ViewModelNavigationBase : ViewModelBase {} 
  public Class ViewModel1 : ViewModelNavigationBase {}
  public Class ViewModel2 : ViewModelNavigationBase {}
  public Class ViewModel3 : ViewModelNavigationBase {}

  public Class MainViewModel : ViewModelBase 
  {
      private ViewModelNavigationBase  currentViewModel; 
      public ViewModelNavigationBase  CurrentViewModel 
      {
         get{return currentViewModel;}
         set
         {
            currentViewModel = value;
            OnPropertyChanged("CurrentViewModel");                
         }
      }          

      private const int numberOfPages = 3 ;
      private int index;
      private ViewModelNavigationBase[numberOfPages] pages;
      ....
      ... OnNavigateCommand()
      {
          index++;
          index = index % numberOfPages;
          CurrentViewModel = pages[index];
      }

 }

resources :

资源 ：

     <local:MainViewModel x:Key="MainVm" /> 

     <DataTemplate TargetType={x:Type local:ViewModel1}>
         <local:View1 />
     </DataTemplate>

     <DataTemplate TargetType={x:Type local:ViewModel2}>
         <local:View2 />
     </DataTemplate>

     <DataTemplate TargetType={x:Type local:ViewModel3}>
         <local:View3 />
     </DataTemplate>

xaml :

xml :

 <Window x:Name="MainWindow" 
         DataContext={StaticResource MainVm}>
       <StackPanel>
           <ContentControl Content={Binding CurrentViewModel} />
           <Button Content="Navigate" Command="{Binding NavigateCommand}"/>
       </StackPanel>       
 </Window>