mvvm navigation treeview - wpf

Question

i'm trying to implement a navigation menu using a treeview.
on the left panel there is a treeview and on the right panel the matched view.
since it's MVVM i'm having a difficult to switch between the correct views.
clicking on Menu1 - should display View1.xaml view
clicking on Menu2 - should display View2.xaml view
my code looks like that:
MainView.xaml
<Window x:Class="Menu.View.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Views="clr-namespace:Menu.View"
Title="MainView" Height="300" Width="300">
<Window.Resources>
<DataTemplate DataType="{x:Type Views:Page1}">
<Views:Page1 />
</DataTemplate>
<DataTemplate DataType="{x:Type Views:Page2}">
<Views:Page2 />
</DataTemplate>
</Window.Resources>
<DockPanel>
<Grid DockPanel.Dock="Left">
<TreeView>
<TreeViewItem Header="Menu 1" />
<TreeViewItem Header="Menu 2" />
<TreeViewItem Header="Menu 3" />
</TreeView>
</Grid>
<Grid DockPanel.Dock="Right">
<Views:Page1 />
<Views:Page2 />
</Grid>
</DockPanel>
</Window>
Page1.xaml (the view that should be visible when clicking "Menu 1")
<Grid>
<Label FontSize="24" FontWeight="Bold">1</Label>
</Grid>
Page2.xaml (the view that should be visible when clicking "Menu 2")
<Grid>
<Label FontSize="24" FontWeight="Bold">2</Label>
</Grid>
for every page i have its own ViewModel and i have the main one called MainViewModel.
how should i implement such thing in a MVVM mode ?

Answer 1

I think here is the mistake. You should have put your ViewModels in the DataType. so when you fill the DataContext the DataTemplate do his job. something like :
<DataTemplate DataType="{x:Type ViewModels:Page1ViewModel}">
<Views:Page1 />
</DataTemplate>
<DataTemplate DataType="{x:Type ViewModels:Page2ViewModel}">
<Views:Page2 />
</DataTemplate>
instead of :
<Views:Page1 />
<Views:Page2 />
add a ContentControl and do a binding to it's content like this :
<ContentControl Content="{Binding MyViewModel}"></ContentControl>
myView is property in your MainViewViewModel (which has to implement INotifyPropertyChanged) can be like this :
object _MyView;
public object MyViewModel
{
get
{
return _MyView;
}
set
{
_MyView = value;
OnPropertyChanged("MyViewModel");
}
}
now, in each TreeViewItem add a Command that do update it's Content for ex :
in your MainViewViewModel add CallView1Command property and implement it (see how dealing with commands)
so in Command's excute method you can update MyViewModel according to the View you want to show.
I recommend using Unity to instanciate ViewModels.
Not very well explained, but, Hope it helps anyway