0

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 ?

kaycee
  • 1,199
  • 4
  • 24
  • 42

1 Answers1

0

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

Community
  • 1
  • 1
HichemSeeSharp
  • 3,240
  • 2
  • 22
  • 44
  • still... how can u make the choice of the visible View ? – kaycee Jun 27 '12 at 09:50
  • Answer Updated ! MVVM is kind a lot of work for few functionalities, but it's worth it. – HichemSeeSharp Jun 27 '12 at 11:22
  • hi, i appreciate your answer. and this is why i still insist doing it with MVVM. i don't understand the last part of your answer. Command property doesn't exist for TreeViewItem. if you can demonstrate selection of the desired view i will appreciate that very much. – kaycee Jun 27 '12 at 15:09
  • i'll post my implementation later on... i think there's a better and pretty way to do it. – kaycee Jun 27 '12 at 16:05
  • I'm sorry it was a mistake about commands in treeviewitem but you can always work arround take a look at [this](http://stackoverflow.com/questions/2266890/wpf-treeviewitem-bound-to-an-icommand) – HichemSeeSharp Jun 27 '12 at 23:36