Question

I am building a Silverlight app which comprises a TreeView of menu options in a lefthand column and a ContentView in a righthand column. The idea is that the SelectedItemChanged event of the TreeView will change the view in the content area.

What is the ‘purest MVVM’ way of achieving this?

My idea is to have a TreeMenuView and TreeMenuViewModel for managing the menu events, but after that I’m a bit lost. I could use an EventAggregator to send a message from the TreeMenuViewModel to a `ContentViewModel’ that would then set its current ContentView based on the message args- but surely that breaks MVVM, in the sense that a ViewModel shouldn’t know about UI constructs like a View?

Am I missing something simple here?

How does a ViewModel layer drive the View selection?

Answer 1

I would create a ShellViewModel which had:

• ObservableCollection<ViewModelBase> AvailablePages
• int SelectedPageIndex
• ViewModelBase CurrentPage, which returns AvailablePages[SelectedPageIndex]

Your ShellView can be anything you want. If you want to display your AvailablePages in a TreeView, then go ahead. Just remember to bind SelectedIndex to `SelectedPageIndex

In your case, I would create a DockPanel with a TreeView on the Left bound to AvailablePages, and a ContentControl on the right with ContentControl.Content bound to CurrentPage

Edit

Here’s an example

<DockPanel>
    <TreeView DockPanel.Dock="Right"
              ItemsSource="{Binding AvailablePages}"
              SelectedItem="{Binding SelectedPageIndex}">
    ...
    </TreeView>

    <ContentControl Content="{Binding CurrentPage}" />
</DockPanel>

Then use DataTemplates to define how the ContentControl containing CurrentPage will look

<Window.Resources>
    <DataTemplate DataType="{x:Type local:HomePageViewModel}" />
         <local:HomePageView />
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:CustomerViewModel}" />
         <local:CustomerView />
    </DataTemplate>
</Window.Resources>