WPF MVVM在用户控件之间切换

时间:2017-11-03 12:36:26

标签: c# wpf xaml mvvm user-controls

我是MVVM的新手。我找到了这个艺术品,它解决了我的问题。

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

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

Usercontrol 1:

enter image description here

Usercontrol 2:

enter image description here

这是我尝试过的;

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实现这一目标吗?

1 个答案:

答案 0 :(得分:2)

尝试以下代码。我使用了文章中的示例代码,我是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));
        }
    }
}
  

EmployeeView

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