How to switch between views in MVVM application - wpf

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.