WPF MVVM 在用户控件之间切换

Question

我是 MVVM 的新手。我找到了这篇文章，它解决了我的很多问题。

https://social.technet.microsoft.com/wiki/contents/articles/30898.simple-navigation-technique-in-wpf-using-mvvm.aspx

但是，我需要从一个用户控件的按钮单击事件而不是从主窗口上的按钮导航到另一个用户控件。

用户控件 1：

用户控件 2：

这是我迄今为止尝试过的；

class Usercontrol1ViewModel : INotifyPropertyChanged
{
    public ICommand navCommand { get; set; }


    public Usercontrol1ViewModel()
    {
        navCommand = new BaseCommand(navigate);
    }

    private void navigate(object obj)
    {
       NavigationViewModel mainViewModel = new NavigationViewModel();
       mainViewModel.SelectedViewModel = new Usercontrol2ViewModel();
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string propName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }
}

NavigationView 模型类

Class NavigationViewModel : INotifyPropertyChanged
{

    public ICommand btn1Command { get; set; }

    public ICommand btn2Command { get; set; }

    private object selectedViewModel;

    public object SelectedViewModel

    {

        get { return selectedViewModel; }

        set { selectedViewModel = value; OnPropertyChanged("SelectedViewModel"); }

    }



    public NavigationViewModel()
    {

        btn1Command = new BaseCommand(Opencontrl1);

        btn2Command = new BaseCommand(Opencontrl2);

    }

    private void Opencontrl1(object obj)
    {

       SelectedViewModel = new Usercontrol1ViewModel();

    }

    private void Opencontrl2(object obj)
    {

        SelectedViewModel = new Usercontrol2ViewModel();

    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string propName)
    {

        if (PropertyChanged != null)

        {

            PropertyChanged(this, new PropertyChangedEventArgs(propName));

        }

    }

}

主窗口代码在后面；

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new NavigationViewModel();
    }
}

有人可以指导我如何使用 MVVM 实现这一目标吗？

Answer 1

试试下面的代码。我使用了文章中的示例代码，我是 MSDN 文章的作者 :)

MainWindow.xaml

<Window.Resources>       
    <DataTemplate DataType="{x:Type local:EmployeeViewModel}">
        <local:EmployeeView/>
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:DepartmentViewModel}">
        <local:DepartmentView/>
    </DataTemplate>
</Window.Resources>
<DockPanel LastChildFill="True">             
    <ContentControl x:Name="Pages" DockPanel.Dock="Right" Content="{Binding SelectedViewModel}"/>
</DockPanel>

导航视图模型

class NavigationViewModel : INotifyPropertyChanged
{
    public EmployeeViewModel EmployeeViewModel { get; set; }
    public DepartmentViewModel DepartmentViewModel { get; set; }

    private object selectedViewModel;

    public object SelectedViewModel
    {
        get { return selectedViewModel; }
        set { selectedViewModel = value; OnPropertyChanged("SelectedViewModel"); }
    }


    public NavigationViewModel()
    {
        SelectedViewModel = new EmployeeViewModel(OpenEmp);
    }

    private void OpenEmp(object obj)
    {
        if (obj.ToString() == "Dept")
        {
            SelectedViewModel = new DepartmentViewModel();
        }
    }


    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }
}

员工视图

 <Grid>
    <StackPanel>
        <TextBlock Text="This is employee view"/>
        <Button Content="Navigate to Dept View" Command="{Binding Navigate}"/>
    </StackPanel>
</Grid>

员工视图模型

 class EmployeeViewModel
{
    private readonly Action<object> navigate;

    public ICommand Navigate { get; set; }
    public EmployeeViewModel(Action<object> navigate)
    {
        Navigate = new BaseCommand(OnNavigate);
        this.navigate = navigate;
    }

    private void OnNavigate(object obj)
    {
        navigate.Invoke("Dept");
    }
}