MVVM Pattern, ViewModel DataContext question

Question

I need to figure out how to communicate between ViewModels. I'm new to MVVM so please be kind.

Here's a dumbed down example

class definitions(assume that I have hooked the Child.PropertyChanged event in the ParentViewModel):

public class ParentViewModel : ViewModelBase
{
    public ChildViewModel Child { get; set; }
}

public class ChildViewModel : ViewModelBase
{
    String _FirstName;
    public String FirstName 
    {
        get { return _FirstName; }
        set
        {
            _FirstName = value;
            OnPropertyChanged("FirstName");
        }
    }
}

Here's what you see in the resource dictionary

<DataTemplate DataType="{x:Type vm:ParentViewModel}">
    <vw:ParentView/>
</DataTemplate>

<DataTemplate DataType="{x:Type vm:ChildViewModel}">
    <vw:ChildView/>
</DataTemplate>

and the code-behind of the ChildView:

public partial class ChildView : UserControl
{
    public QueueView()
    {
        InitializeComponent();
        DataContext = new ChildViewModel();
    }
}

The obvious problem is that when the ChildView gets instantiated (via selection from the DataTemplate) it creates a new ChildViewModel class and the ParentViewModel doesn't have access to it.

So how can I instantiate the DataContext of the View to be the original ViewModel that caused the DataTemplate to be selected?

An obvious fix is to mmerge the properties in the ChildViewModel into the ParentViewModel, but I would rather separate it because for reuse.

I'm sure the answer is trivial, I just would like to know what it is. :)

Thanks in advance.

Answer 1

You should simply remove the line:

DataContext = new ChildViewModel();

The DataContext of the view will be set automatically by WPF. DataTemplates always have their data context set to the data for the template (in this case the ViewModel):

<DataTemplate DataType="{x:Type vm:ChildViewModel}">
    <vw:ChildView/>
</DataTemplate>

The end result is that you can build your view model objects separately (both parent and child classes) and then display them later by simply plugging them into content controls.

Answer 2

The easiest way to communicate between ViewModels using the MVVM approach is to use the Mediator pattern (EventAggregator in Prism). A good example of this approach can be seen in the following links:

1. MVVM Mediator Pattern by Sacha Barber
2. MVVM + Mediator by marlon grech

Also check out the MVVM sample project framework.

Answer 3

Let's say you have a QueueView that uses a QueueViewModel.

public class QueueViewModel : INotifyPropertyChanged
{
    public ParentType Parent { get; set; }

    public QueueViewModel(ParentType parent)
    {
        this.Parent = parent;
        foreach (ChildType child in Parent)
        {
            child.PropertyChanged += delegate(object sender,
                PropertyChangedEventArgs e)
            {
                if (e.PropertyName != "IsSelected")
                    return;

                //do something like this:
                Parent.IsSelected = AllChildrenAreSelected();
            };
        }
    }

}

public class ParentType : INotifyPropertyChanged
{
    private bool _isSelected;

    public IList<ChildType> Children { get; set; }
    public bool IsSelected
    {
        get { return _isSelected; }
        set
        {
            _isSelected = value;
            OnPropertyChanged("IsSelected");
        }
    }
}

public class ChildType : INotifyPropertyChanged
{
    private string _name;
    private bool _isSelected;

    public string Name
    {
        get { return _name; }
        set
        {
            _name = value;
            OnPropertyChanged("Name");
        }
    }

    public bool IsSelected
    {
        get { return _isSelected; }
        set
        {
            _isSelected = value;
            OnPropertyChanged("IsSelected");
        }
    }
}

-- QueueView part

<StackPanel>
<CheckBlock Text="{Binding Path=Parent.Name}" 
            IsChecked="{Binding Parent.IsSelected}"/>
<ItemsControl ItemsSource="{Binding Path=Parent.Children}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>                                    
            <CheckBox Content="{Binding Path=Name}"
                      IsChecked="{Binding Path=IsSelected, Mode=TwoWay}"/>
        </DataTemplate>
    <ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>