mvvm navigation treeview

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.

enter image description here

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 ?

HichemSeeSharp HichemSeeSharp · Accepted Answer · 2012-06-27T08:55:25

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

mvvm navigation treeview

1 Answers