How to switch between views in MVVM application

Question

I have a login View after successful login it should open Menu View as it has different tabs.Also I want the tabs to open inside the Menu View itself and the view should be closed once the other view is opened. I have refered the following links: Changing the View for a ViewModel and switching views in MVVM wpf. I have done something like this:

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

My First screen is Login View which is perfect but after successful login Menu View Should open.What mistake am I committing?

Answer 1

Here is one of the possible answers. I tried to make it as simple as possible, avoiding Styles for example.

The XAML code (I created the LoginViewModel and the MenuViewModel as UserControls to test it)

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

Here is the minimum testable code for the ModelView classes

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
{
}

Then you just need to specify the DataContext:

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

Remark: I used an explicit instance for the DataContext, but you can work with static properties if you want.