Pass SelectedItem to the ViewModel of the UserControl inside DataTemplate

Question

I have this really simple MVVM code made with Prism:

2 Models (Person, Company - common interface IContact) with 2 ViewModels (Prism) and 2 Views (UserControl)
1 ViewModel (collection of interface IContact) with 1 View (ListBox bound to the collection and a ContentControl bound to ListBox's SelectedItem with DataTemplateSelector that returns one of the two UserControls based on the type of the SelectedItem)

How can I pass the Model object (either Person or Company) from the ListBox's SelectedItem (IContact) to one of the two ViewModels (either PersonViewModel or CompanyViewModel) that match the View returned by the DataTemplateSelector (either PersonView or CompanyView)?

Thank you!

There is a lot of code, but it is really simple:

I have these Model classes:

public interface IContact
{
    string Address { get; set; }
}

public class Person : IContact
{
    public string Address { get; set; }
}

public class Company : IContact
{
    public string Address { get; set; }
}

I have these ViewModel classes:

public class ContactViewModel : Prism.Mvvm.BindableBase
{
    private ObservableCollection<IContact> _contacts = new ObservableCollection<IContact>();
    public ObservableCollection<IContact> Contacts
    {
        get { return _contacts; }
        set { SetProperty(ref _contacts, value); }
    }
}

public class PersonViewModel : Prism.Mvvm.BindableBase
{
    private Person _person; // I want to set this from the ListBox's SelectedItem
    public Person Person
    {
        get { return _person; }
        set { SetProperty(ref _person, value); }
    }
}

public class CompanyViewModel : Prism.Mvvm.BindableBase
{
    private Company _company; // I want to set this from the ListBox's SelectedItem
    public Company Company
    {
        get { return _company; }
        set { SetProperty(ref _company, value); }
    }
}

I have these View classes:

<UserControl x:Class="ContactView"
             xmlns:prism="http://prismlibrary.com/"
             prism:ViewModelLocator.AutoWireViewModel="True" >
    <UserControl.Resources>
        <DataTemplate x:Key="PersonDataTemplate">
            <local:PersonView>
                // How can I pass the SelectedItem to the ViewModel of this UserControl?
            </local:PersonView>
        </DataTemplate>
        <DataTemplate x:Key="CompanyDataTemplate">
            <local:CompanyView>
                // How can I pass the SelectedItem to the ViewModel of this UserControl?
            </local:CompanyView>
        </DataTemplate>
        <dataTemplateSelectors:contactDataTemplateSelector x:Key="templateSelector"
              PersonDataTemplate="{StaticResource PersonDataTemplate}" 
              CompanyDataTemplate="{StaticResource CompanyDataTemplate}"/>
    </UserControl.Resources>
    <Grid>
        // RowDefinitions here
        <ListBox ItemsSource="{Binding Contacts}" x:Name="myListBox">
            // ItemTemplate here
        </ListBox>
        <ContentControl Grid.Row="1" 
            Content="{Binding ElementName=myListBox, Path=SelectedItem}" 
            ContentTemplateSelector="{StaticResource templateSelector}" />
    </Grid>
</UserControl>

Person:

<UserControl x:Class="PersonView"
             xmlns:prism="http://prismlibrary.com/"
             prism:ViewModelLocator.AutoWireViewModel="True" >
    <Grid>
        <TextBlock Text="{Binding Person.Address}" />
    </Grid>
</UserControl>

Company:

<UserControl x:Class="CompanyView"
             xmlns:prism="http://prismlibrary.com/"
             prism:ViewModelLocator.AutoWireViewModel="True" >
    <Grid>
        <TextBlock Text="{Binding Company.Address}" />
    </Grid>
</UserControl>

And this:

public class ContactDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate PersonDataTemplate { get; set; }
    public DataTemplate CompanyDataTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item is Person)
        {
            return PersonDataTemplate;
        }
        if (item is Company)
        {
            return CompanyDataTemplate;
        }
    }
}

Why don't you add a property to the ContactViewModel if you wan to keep track of the selected item in the ListBox? — mm8
@mm8 The code is very simplified. My goal is not to track the selected item in the ContactViewModel class - that would be a very simple binding to a property. My goal is to pass the selected item from the ContactViewModel to either PersonViewModel or CompanyViewModel trough the ContentControl via DataTemplateSelector that returns either PersonView or CompanyView. — Jinjinov

Haukinger Haukinger · Accepted Answer · 2018-11-27T12:45:19

Do not use view first (a.k.a. ViewModelLocator) here. Go view model first.

Long version:

Make Contacts (the item source of the list box) contain view models. Then directly bind SelectedItem to the content control.

The listbox uses one data template to show the contacts, the content control uses another. You don't even need the selector, just set DataType on your data templates.

When you already have the item at hand that you want to show (i.e. its view model), just bind and show that one. If you want to navigate to a screen in your app (e.g. login dialog), use the ViewModelLocator. It basically is a workaround for not having the view model ready.

Pass SelectedItem to the ViewModel of the UserControl inside DataTemplate

2 Answers

All credit goes to Haukinger!