WPF MVVM 在用户控件之间切换 [英] WPF MVVM Switching Between Usercontrols

问题描述

我是 MVVM 的新手.我找到了这篇文章，它解决了我的一些问题.

用户控件 2:

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

class Usercontrol1ViewModel : INotifyPropertyChanged{公共 ICommand 导航命令 { 获取；放;}公共 Usercontrol1ViewModel(){navCommand = new BaseCommand(导航);}私有无效导航(对象对象){NavigationViewModel mainViewModel = new NavigationViewModel();mainViewModel.SelectedViewModel = new Usercontrol2ViewModel();}公共事件 PropertyChangedEventHandler PropertyChanged；私有无效 OnPropertyChanged(string propName){if (PropertyChanged != null){PropertyChanged(this, new PropertyChangedEventArgs(propName));}}}

NavigationView 模型类

Class NavigationViewModel : INotifyPropertyChanged{公共 ICommand btn1Command { 获取；放;}公共 ICommand btn2Command { 获取；放;}私有对象 selectedViewModel；公共对象 SelectedViewModel{得到 { 返回 selectedViewModel;}设置 { selectedViewModel = 值；OnPropertyChanged("SelectedViewModel");}}公共导航视图模型(){btn1Command = new BaseCommand(Opencontrl1);btn2Command = new BaseCommand(Opencontrl2);}私有无效 Opencontrl1(对象 obj){SelectedViewModel = new Usercontrol1ViewModel();}私有无效 Opencontrl2(对象 obj){SelectedViewModel = new Usercontrol2ViewModel();}公共事件 PropertyChangedEventHandler PropertyChanged；私有无效 OnPropertyChanged(string propName){if (PropertyChanged != null){PropertyChanged(this, new PropertyChangedEventArgs(propName));}}}

后面的主窗口代码；

公共部分类 MainWindow : Window{公共主窗口(){初始化组件();this.DataContext = new NavigationViewModel();}}

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

解决方案

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

<块引用>

主窗口.xaml

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

<块引用>

导航视图模型

class NavigationViewModel : INotifyPropertyChanged{公共雇员视图模型雇员视图模型 { 获取；放;}公共部门视图模型 部门视图模型 { 获取；放;}私有对象 selectedViewModel；公共对象 SelectedViewModel{得到 { 返回 selectedViewModel;}设置 { selectedViewModel = 值；OnPropertyChanged("SelectedViewModel");}}公共导航视图模型(){SelectedViewModel = new EmployeeViewModel(OpenEmp);}私有无效 OpenEmp(对象 obj){如果(obj.ToString()==部门"){SelectedViewModel = new DepartmentViewModel();}}公共事件 PropertyChangedEventHandler PropertyChanged；私有无效 OnPropertyChanged(string propName){if (PropertyChanged != null){PropertyChanged(this, new PropertyChangedEventArgs(propName));}}}

<块引用>

员工视图

 <网格><堆栈面板><TextBlock Text="这是员工视图"/><Button Content="Navigate to Dept View" Command="{Binding Navigate}"/></StackPanel></网格>

<块引用>

员工视图模型

 类 EmployeeViewModel{私有只读操作<对象>导航;公共 ICommand 导航 { 获取；放;}公共员工视图模型(操作<对象>导航){导航 = 新的 BaseCommand(OnNavigate);this.navigate = 导航；}私有无效 OnNavigate(对象 obj){导航.调用(部门")；}}

I am new to MVVM. I found this artcle and it resolve my haf of problems.

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

However, I need to navigate from one usercontrol to another from the button click event of one usercontrol not from the button on the main window.

Usercontrol 1:

Usercontrol 2:

This is what I have tried sofar;

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 model class

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

        }

    }

}

Main window code behind;

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

Can somebody guide me how to achieve this with MVVM?

解决方案

Try the below code. I used the sample code in the article and I am the author of the MSDN article :)

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

这篇关于WPF MVVM 在用户控件之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！