在 MVVM wpf 中切换视图 [英] switching views in MVVM wpf

问题描述

我知道我的问题很常见，但我找到的每一个解决方案都不是我真正需要的.这是我的问题:我希望能够在主窗口中的不同用户控件之间切换.我找到的所有解决方案都包括在主窗口中有一个菜单，每个按钮都带有相应的 userControl，例如:

mainWindow的xaml

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

我的主窗口的 cs :

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

我的第一页的 xaml :

<DockPanel LastChildFill="True"><StackPanel x:Name="navigation" DockPanel.Dock="Left" VerticalAlignment="Center"><Button Content="Employee" Command="{Binding EmpCommand}"></Button><Button Content="Department" Command="{Binding DeptCommand}"></Button></StackPanel></DockPanel></用户控件>

我的第一页查看:

公共部分类 MenuView : UserControl{公共菜单视图(){初始化组件();this.DataContext = new MenuViewModel();}}

我的第一页的视图模型:

class MenuViewModel{公共 ICommand EmpCommand { 获取；放;}公共 ICommand DeptCommand { 获取；放;}公共菜单视图模型(){EmpCommand = new BaseCommand(OpenEmp);DeptCommand = new BaseCommand(OpenDept);}私有无效 OpenEmp(对象 obj){SelectedViewModel = new EmployeeViewModel();}私有无效 OpenDept(对象 obj){SelectedViewModel = new DepartmentViewModel();}}

当然他不知道SelectedViewModel"，因为它绑定到mainWindow的控件

我的导航视图模型:

class NavigationViewModel : INotifyPropertyChanged{私有对象 selectedViewModel；公共对象 SelectedViewModel{得到{返回选定的视图模型；}放{selectedViewModel = 值；OnPropertyChanged("SelectedViewModel");}}公共事件 PropertyChangedEventHandler PropertyChanged；私有无效 OnPropertyChanged(string propName){if (PropertyChanged != null){PropertyChanged(this, new PropertyChangedEventArgs(propName));}}}

非常感谢您的帮助！

解决方案

例如，您可以注入 MenuView 或 MenuViewModel 并引用 MainViewModel:

MainWindow.xaml.cs:

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

MenuViewModel.cs:

class MenuViewModel{公共 ICommand EmpCommand { 获取；放;}公共 ICommand DeptCommand { 获取；放;}私有只读 NavigationViewModel _navigationViewModel;公共菜单视图模型(导航视图模型导航视图模型){_navigationViewModel = 导航视图模型；EmpCommand = new BaseCommand(OpenEmp);DeptCommand = new BaseCommand(OpenDept);}私有无效 OpenEmp(对象 obj){_navigationViewModel.SelectedViewModel = new EmployeeViewModel();}私有无效 OpenDept(对象 obj){_navigationViewModel.SelectedViewModel = new DepartmentViewModel();}}

MenuView.xaml.cs:

公共部分类 MenuView : UserControl{公共菜单视图(){初始化组件();}}

I Know that my problem is a common one but every solution I found is not the one I really need. Here is my problem : I want to be able to switch between different usercontrol in the mainWindow. All the solution I found consist of having a menu in the main window and every button brings the corresponding userControl, like this exemple : https://rachel53461.wordpress.com/2011/12/18/navigation-with-mvvm-2/

But what i want is more like : at the begining, the mainwindows has the UserControl1 into it. In the userControl1 there would be 1 buttons who change the content of the mainWindow with a new userControl (userControl2 for instance)

the xaml of mainWindow

<Window x:Class="DataTemplateSO_Learning.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:DataTemplateSO_Learning"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>       
        <DataTemplate DataType="{x:Type local:EmployeeViewModel}">
            <local:EmployeeView/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:DepartmentViewModel}">
            <local:DepartmentView/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:MenuViewModel}">
            <local:MenuView/>
        </DataTemplate>
    </Window.Resources>
    <DockPanel LastChildFill="True">
        <ContentControl x:Name="Pages" DockPanel.Dock="Right" Content="{Binding SelectedViewModel}"/>
    </DockPanel>
</Window>

the cs of my mainWindow :

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

the xaml of my first page :

<UserControl x:Class="DataTemplateSO_Learning.MenuView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:DataTemplateSO_Learning"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <DockPanel LastChildFill="True">
        <StackPanel x:Name="navigation" DockPanel.Dock="Left" VerticalAlignment="Center">
            <Button Content="Employee" Command="{Binding EmpCommand}"></Button>
            <Button Content="Department" Command="{Binding DeptCommand}"></Button>
        </StackPanel>
    </DockPanel>
</UserControl>

my first page View :

public partial class MenuView : UserControl
{
    public MenuView()
    {
        InitializeComponent();
        this.DataContext = new MenuViewModel();
    }
}

the viewModel of my first page :

class MenuViewModel 
{
    public ICommand EmpCommand { get; set; }
    public ICommand DeptCommand { get; set; }

    public MenuViewModel()
    {
        EmpCommand = new BaseCommand(OpenEmp);
        DeptCommand = new BaseCommand(OpenDept);
    }

    private void OpenEmp(object obj)
    {
        SelectedViewModel = new EmployeeViewModel();
    }
    private void OpenDept(object obj)
    {
        SelectedViewModel = new DepartmentViewModel();
    }
}

of course he doesn't know "SelectedViewModel" because it's bind to the control of mainWindow

my navigationViewModel :

class NavigationViewModel : INotifyPropertyChanged
{
    private object selectedViewModel;

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

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

}

Thank you very much for your help !

解决方案

You could for example inject the MenuView or MenuViewModel with a reference to the MainViewModel:

MainWindow.xaml.cs:

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

MenuViewModel.cs:

class MenuViewModel
{
    public ICommand EmpCommand { get; set; }
    public ICommand DeptCommand { get; set; }

    private readonly NavigationViewModel _navigationViewModel;

    public MenuViewModel(NavigationViewModel navigationViewModel)
    {
        _navigationViewModel = navigationViewModel;
        EmpCommand = new BaseCommand(OpenEmp);
        DeptCommand = new BaseCommand(OpenDept);
    }

    private void OpenEmp(object obj)
    {
        _navigationViewModel.SelectedViewModel = new EmployeeViewModel();
    }
    private void OpenDept(object obj)
    {
        _navigationViewModel.SelectedViewModel = new DepartmentViewModel();
    }
}

MenuView.xaml.cs:

public partial class MenuView : UserControl
{
    public MenuView()
    {
        InitializeComponent();
    }
}

这篇关于在 MVVM wpf 中切换视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！