WPF MVVM 导航视图

Question

我有一个带有多个视图的 WPF 应用程序。 我想从视图 1 切换到视图 2，然后我可以切换到多个视图。 所以我想在视图 1 上有一个按钮，在同一个窗口中加载 view2。

我试过这些东西，但不能让它工作。

• 如何使用 MVVM Light for WPF 浏览窗口？
• https://galasoft.ch/posts/2011/01/navigation-in-a-wp7-application-with-mvvm-light

从第一个链接来看，问题是我不理解 ViewModelLocator 代码。 他们调用CreateMain(); 函数，但这是在哪里定义的，以及如何从视图内部切换到另一个视图。

Answer 1

首先，您不需要任何这些工具包/框架来实现 MVVM。 它可以像这样简单......让我们假设我们有一个MainViewModel 、 PersonViewModel和一个CompanyViewModel ，每个都有自己的相关视图，每个都扩展了一个abstract基类BaseViewModel 。

在BaseViewModel ，我们可以添加通用属性和/或ICommand实例并实现INotifyPropertyChanged接口。 因为它们都扩展了BaseViewModel类，所以我们可以在MainViewModel类中拥有这个属性，该属性可以设置为我们的任何视图模型：

public BaseViewModel ViewModel { get; set; }

当然，与这个快速示例不同，您将在您的属性上正确实现INotifyPropertyChanged接口。 现在在App.xaml ，我们声明了一些简单的DataTemplate来将视图与视图模型连接起来：

<DataTemplate DataType="{x:Type ViewModels:MainViewModel}">
    <Views:MainView />
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModels:PersonViewModel}">
    <Views:PersonView />
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModels:CompanyViewModel}">
    <Views:CompanyView />
</DataTemplate>

现在，无论我们在应用程序中使用BaseViewModel实例之一的任何地方，这些DataTemplate都会告诉框架显示相关视图。 我们可以这样显示它们：

<ContentControl Content="{Binding ViewModel}" />

所以我们现在需要做的就是从MainViewModel类中设置ViewModel属性以切换到新视图：

ViewModel = new PersonViewModel();

最后，我们如何从其他视图更改视图？ 有几种可能的方法可以做到这一点，但最简单的方法是将子视图中的Binding直接添加到MainViewModel的ICommand 。 我使用RelayComand的自定义版本，但您可以使用任何您喜欢的类型，我猜您会得到图片：

public ICommand DisplayPersonView
{
    get { return new ActionCommand(action => ViewModel = new PersonViewModel(), 
        canExecute => !IsViewModelOfType<Person>()); }
}

在子视图 XAML 中：

<Button Command="{Binding DataContext.DisplayPersonView, RelativeSource=
    {RelativeSource AncestorType={x:Type MainView}}, Mode=OneWay}" />

就是这样！ 享受。

Answer 2

当我第一次开始使用 MVVM 时，我也遇到了不同的 MVVM 框架，尤其是导航部分。 因此，我使用了我发现的这个小教程，它是 Rachel Lim 创建的。 它非常好并且解释得很好。

在以下链接中查看它：

• http://rachel53461.wordpress.com/2011/12/18/navigation-with-mvvm-2/

希望对你有帮助:)

Answer 3

也许这个链接会对你有所帮助。 只需将NavigateTo属性设置为您需要在窗口上显示的视图。

例如，您可以执行以下操作

<Window x:Class="MainWindowView" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                                 xmlns:meffed="http:\\www.codeplex.com\MEFedMVVM"
                                 meffed:ViewModelLocator.NonSharedViewModel="YourViewModel"
                                 WindowStartupLocation="CenterScreen">

    <Button meffed:NavigationExtensions.NavigateTo="firstview"
                    meffed:NavigationExtensions.NavigationHost="{Binding ElementName=_viewContainer}"
                    meffed:NavigationExtensions.NavigateOnceLoaded="False"
                    Visibility="Visible" />

    <ContentControl x:Name="_viewContainer" Margin="0,0,0,10" />
<Window>

然后类文件将是

public partial class MainWindowView : Window
{
    public MainWindowView()
    {           
              InitializeComponent();
    }

        public ContentControl ViewContainer { get { return _viewContainer; } }

    }

然后你可以将每个视图定义为UserControl ，然后使用我上面给出的链接绑定按钮的meffed:NavigationExtensions.NavigateTo="secondView" 。 要定位Window的ContentControl ，只需使用RelativeSource绑定。 例如

meffed:NavigationExtensions.NavigationHost="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Window}},Path=ViewContainer}"

在每个视图中，只需看到您使用[NavigationView("firstview")]等注释类定义背后的代码。

第一次很复杂，但一旦你理解了这个想法就会很容易。

Answer 4

<ContentControl x:Name="K.I.S.S" Content="{Binding ViewModel, Converter={StaticResource ViewLocator}}"/>