WPF binding multiple UserControls to a listbox

Question

I have multiple UserControls and i want to show them on a ListBox Lets assume i have an Employee abstract UserControl and i have 2 or more UserControls than use that Employee like AdministrativeEmployee and FactoryEmployee for each of those Employees i have diffrent data but the UserControl is very similar (same size, almost same fields), on the ViewModel side i have an abstract EmployeeViewModel, the AdministrativeEmployeeViewModel and the FatoryEmployeeViewModel, on the EmployeesView i have the ListBox with the databinding and on the EmployeesViewModel i have an ICollection Employees

EmployeesView.xaml:

xmlns:local="clr-namespace:Solution.Controls"

-

    <ListBox ItemsSource={Binding Employees}>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <ContentPresenter Content="{Binding}" Name="Presenter" />
                <DataTemplate.Triggers>
                    <DataTrigger  Value="{x:Type local:AdministrativeEmployeeView}">
                        <Setter TargetName="Presenter" Property="Content">
                            <Setter.Value>
                                <local:AdministrativeEmployeeView />
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                    <DataTrigger Value="{x:Type local:FactoryEmployeeView}">
                        <Setter TargetName="Presenter" Property="Content">
                            <Setter.Value>
                                <local:FactoryEmployeeView/>
                            </Setter.Value>
                        </Setter>
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

EmployeesViewModel.cs:

public ICollection<EmployeeViewModel> Employees { get; set; }

But that show me System.ItemTemplate on the ListBox and not the UserControls for each type of Employee

Answer 1

In ListBox resources define two DataTemplates:

<ListBox ItemsSource="{Binding Employees}">
    <ListBox.Resources>
        <DataTemplate DataType="{x:Type local:AdministrativeEmployee}">
            <local:AdministrativeEmployeeView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type local:FactoryEmployee}">
            <local:FactoryEmployeeView />
        </DataTemplate>
    </ListBox.Resources>            
</ListBox>

Model classes:

public class Employee
{
    public string Name { get; set; }   
}

public class AdministrativeEmployee : Employee
{
}

public class FactoryEmployee : Employee
{
} 

Sample data:

List<Employee> _source = new List<Employee>();
_source.Add(new AdministrativeEmployee { Name = "A test1" });
_source.Add(new FactoryEmployee { Name = "F test1" });
_source.Add(new AdministrativeEmployee { Name = "A test2" });
_source.Add(new FactoryEmployee { Name = "F test2" });
Employees = _source;

AdministrativeEmployeeView:

<UserControl ...>
    <Grid>
        <TextBlock Text="{Binding Name}" Background="Red" />
    </Grid>
</UserControl>

FactoryEmployeeView:

<UserControl ...>
    <Grid>
        <TextBlock Text="{Binding Name}" Background="Green" />
    </Grid>
</UserControl>

Result: