UWP bind a ListView's item as UserControl DataTemplate

Question

I try to implement a Master/detail view and i try to understand how bind the selected item into a UserControl which has two DataTemplate.

I have two kinds of model (i'll call them teacher and student)

My view model:

public class Page_ProfilVM : NotificationBase
{
    public ObservableCollection <AbstractInfosProfilVM> InfosProfil { get; set; }
    private AbstractInfosProfilVM selectedProfil;
    public  AbstractInfosProfilVM SelectedProfil
    {
        get { return selectedProfil; }
        set
        {
            SetProperty(selectedProfil, value, () => selectedProfil = value);
         }   
     }
}

public abstract class AbstractInfosProfilVM : NotificationBase
{
    private string nom;
    public  string Nom
    {
        get { return nom; }
        set { SetProperty(nom, value, () => nom = value); }
    }
}

public class TeacherInfosProfilVM : AbstractInfosProfilVM
{
}
public class StudentInfosProfilVM : AbstractInfosProfilVM
{
}

I correctly show the master View

<!-- ListView -->
<ListView  ItemSource="{x:bind ViewModel.Profils}" 
           SelectionMode="Single" 
           SelectedItem="x:bind ViewModel.SelectedProfil, Mode="TwoWay", Converter={.....}}">

<ListView.ItemTemplate>
    <DataTemplate x:DataType="vm:AbstractProfilVM">
        <!-- Master -->
        <widget:CelProfilMaster CelProfilMasterName={x:Bind Name} CelProfilMasterAge={x:Bind Age} ... />
    </DataTemplate>
</ListView.ItemTemplate>

And i correctly show details of the selected item on the detail view (An User Control with dependency properties). But now i need to select the right dataTempalte for showing teacher's attributes, and student's attributes. but it does'nt work.

<!-- Details-->
<widget:CelluleProfilDetails x:Name = "DetailContent" 
                             CelluleProfilDetailsNom = "{x:Bind ViewModel.SelectedProfil.Nom,Mode=TwoWay,Converter={StaticResource GenericConverter}}"
                             CelluleProfilDetailsPrenom = "{x:Bind ViewModel.SelectedProfil.Prenom, Mode=TwoWay,Converter={StaticResource GenericConverter}}" >

<widget:CelluleProfilDetails.CelluleProfilDetailsContent>
    <ContentPresenter Content="{x:Bind ViewModel.SelectedProfil,Mode=OneWay}">

    <ContentPresenter.Resources>
        <DataTemplate x:DataType="viewModels:TeacherInfosProfilVM" x:Name="T1" >
            <TextBlock Text="{x:Bind Nom}"/>
        </DataTemplate>
        <DataTemplate x:DataType="viewModels:StudentInfosProfilVM" x:Name="T2" >
            <TextBlock Text="{x:Bind Nom}"/>
        </DataTemplate>
    </ContentPresenter.Resources>

    </ContentPresenter>                        
</widget:CelluleProfilDetails.CelluleProfilDetailsContent>

</widget:CelluleProfilDetails>

I try to show the name of Teacher/Student but it only shows the name of the view model. How correctly show teacher's attributes and student's attributes into "CelluleProfilDetails.CelluleProfilDetailsContent" ?

Answer 1

If you are actually looking for data binding concepts that will allow you to load two different data templates based on the data type to your View Model, you should definitely look into the below Video.

I implemented the same in one of my apps and I do not want to post any code here because it will be just another copy paste solution.

See This Video

If you have any issues with explanation of DataTemplateSelector Let me know.