如何在 MVVM 应用程序中切换视图

Question

成功登录后我有一个登录视图，它应该打开菜单视图，因为它有不同的选项卡。此外，我希望选项卡在菜单视图本身内打开，并且一旦打开另一个视图，该视图应该关闭。 我参考了以下链接： Changing the View for a ViewModel 和 switching views in MVVM wpf。 我做过这样的事情：

MainWindow.xaml

<Window x:Class="JGC_ngCMS_Win.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:JGC_ngCMS_Win.View"
    xmlns:VM="clr-namespace:JGC_ngCMS_Win.ViewModel"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
    <VM:MainWindowViewModel/>
</Window.DataContext>
<Window.Resources>
    <DataTemplate x:Key="View1Template" DataType="{x:Type VM:LoginViewModel}">
        <local:LoginView></local:LoginView>
    </DataTemplate>
    <DataTemplate x:Key="View2Template" DataType="{x:Type VM:MenuViewModel}">
        <local:MenuView />
    </DataTemplate>
    <DataTemplate x:Key="View3Template" DataType="{x:Type VM:UserModuleMapViewModel}">
        <local:UserModuleMapView />
    </DataTemplate>
</Window.Resources>
<Grid>
    <ContentPresenter Content="{Binding ViewModelsView.CurrentItem}" Grid.Row="1"/> 
    <ContentControl Content="{Binding  }">
        <ContentControl.Style>
            <Style TargetType="{x:Type ContentControl}">
                <Setter Property="ContentTemplate" Value="{StaticResource View1Template}" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding SwitchView}" Value="1">
                        <Setter Property="ContentTemplate" Value="{StaticResource View2Template}" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </ContentControl.Style>
    </ContentControl>
    <ContentControl Content="{Binding ViewModel}" />
</Grid>

MainWindowViewModel.cs

public class MainWindowViewModel : ViewModelBase
{
    private ViewModelBase _currentViewModel;

    readonly static LoginViewModel _loginViewModel = new LoginViewModel();
    readonly static MenuViewModel _menuViewModel = new MenuViewModel();
    readonly static UserModuleMapViewModel _usermodulemapViewModel = new UserModuleMapViewModel();

    public ViewModelBase CurrentViewModel
    {
        get
        {
            return _currentViewModel;
        }
        set
        {
            if (_currentViewModel == value)
                return;
            _currentViewModel = value;
            OnPropertyChanged("CurrentViewModel");
        }
    }



    public ICommand FirstViewCommand { get; private set; }
    public ICommand SecondViewCommand { get; private set; }


    public MainWindowViewModel()
    {

        CurrentViewModel = MainWindowViewModel._menuViewModel;
        FirstViewCommand = new RelayCommand(() => ExecuteFirstViewCommand());
        SecondViewCommand = new RelayCommand(() => ExecuteSecondViewCommand());

        //ViewModels = new ObservableCollection<ViewModelBase>()
        //  {
        //     new LoginViewModel(),
        //        new MenuViewModel()
        //        //new ViewModel3()
        //  };
        //ViewModelsView = CollectionViewSource.GetDefaultView(ViewModels);
    }





    public void ExecuteFirstViewCommand()
    {
        CurrentViewModel = MainWindowViewModel._usermodulemapViewModel;
    }

    private void ExecuteSecondViewCommand()
    {
        CurrentViewModel = MainWindowViewModel._menuViewModel;
    }

我的第一个屏幕是完美的登录视图，但成功登录后菜单视图应该打开。我犯了什么错误？

Answer 1

这是可能的答案之一。 我试图让它尽可能简单，例如避免使用样式。

XAML 代码（我创建了 LoginViewModel 和 MenuViewModel 作为 UserControls 来测试它）

<Window x:Class="JGC_ngCMS_Win.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:JGC_ngCMS_Win.View"
        xmlns:VM="clr-namespace:JGC_ngCMS_Win.ViewModel"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <ContentPresenter Content="{Binding CurrentViewModel}">
            <ContentPresenter.Resources>
                <DataTemplate  DataType="{x:Type VM:LoginViewModel}">
                    <local:LoginView/>
                </DataTemplate>
                <DataTemplate DataType="{x:Type VM:MenuViewModel}">
                    <local:MenuView />
                </DataTemplate>
            </ContentPresenter.Resources>
        </ContentPresenter>
    </Grid>
</Window>

这是 ModelView 类的最少可测试代码

class ViewModelBase:INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
}

class MainWindowViewModel:ViewModelBase
{
    readonly LoginViewModel _loginViewModel = new LoginViewModel();
    readonly MenuViewModel _menuViewModel = new MenuViewModel();

    private ViewModelBase _currentViewModel;
    public ViewModelBase CurrentViewModel
    {
        get
        {
            return _currentViewModel;
        }
        set
        {
            if (_currentViewModel == value)
                return;
            _currentViewModel = value;
            OnPropertyChanged("CurrentViewModel");
        }
    }

    //Just for test
    public void switchView()
    {
        if (CurrentViewModel == _loginViewModel) { CurrentViewModel = _menuViewModel; }
        else { CurrentViewModel = _loginViewModel; }
    }

}

class LoginViewModel:ViewModelBase
{
}

class MenuViewModel:ViewModelBase
{
}

那么你只需要指定DataContext：

    ViewModel.MainWindowViewModel mainVM = new ViewModel.MainWindowViewModel();
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = mainVM;
    }

备注：我为 DataContext 使用了显式实例，但如果需要，您可以使用静态属性。