用戶控件之間的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>

NavigationViewModel

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>

EmployeeViewModel

 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");
    }
}