Question

I need to design a form with a treeview in the left and a container for some other control in the remaining area. Whenever user selects an item in the treeview some custom control appears on the right. For example, let’s say that the treeview contains values “Audio settings” and “Video settings”, and I have two controls that can be bound to these settings and I want to display them on the form when needed.

Now, from what I’ve read about MVVM, I shouldn’t have properties that will return UserControls or DataTemplates, am I right? It will be messing with “VM shouldn’t know implementation details of the view” as I see it. So, how do I handle this situation properly in terms of MVVM? Should I maybe use converters for this and if so, how would it look?

I can’t provide any code at the moment (mostly because there isn’t any), but I will try to clarify the problem if needed.
Thanks in advance.

Answer 1

This is where the WPF templating system helps out.

The main idea is to have a ContentControl display the appropriate view depending on the selected value in the TreeView.

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:l="clr-namespace:WpfApplication1"
    Title="MainWindow" Height="350" Width="525">
    <DockPanel>

        <ListBox DockPanel.Dock="Left" ItemsSource="{Binding Editors}" SelectedItem="{Binding SelectedEditor}" />

        <ContentControl Content="{Binding SelectedEditor}">
            <ContentControl.Resources>
                <DataTemplate DataType="{x:Type l:VideoViewModel}">
                    <l:VideoView />
                </DataTemplate>
                <DataTemplate DataType="{x:Type l:AudioViewModel}">
                    <l:AudioView />
                </DataTemplate>
            </ContentControl.Resources>
        </ContentControl>

    </DockPanel>
</Window>

AudioView and VideoView are UserControls.

As you can see, the ContentControl‘s content is bound to the SelectedEditor property in the ViewModel, which is also bound to the SelectedItem of the Listbox.

So the ViewModel for the main view looks like this.

public class MainWindowViewModel : INotifyPropertyChanged
{
    public IEnumerable<object> Editors
    {
        get
        {
            yield return new VideoViewModel();
            yield return new AudioViewModel();
        }
    }

    private object selectedEditor;
    public object SelectedEditor
    {
        get { return selectedEditor; }
        set
        {
            if (selectedEditor == value)
                return;
            selectedEditor = value;
            OnPropertyChanged("SelectedEditor");
        }
    }
}

So you can see that the main ViewModel has no GUI data in it.

To handle hooking up a TreeView to a SelectedItem property in a ViewModel see Data binding to SelectedItem in a WPF Treeview