Caliburn.Micro TreeView Bind to an class containing a list of another class

Question

Good Morning,

I'm a beginner in programation (and French!) and start using caliburn.micro. I have a class

In the UserViewModel i have

        public BindableCollection<ProfileModel> Profiles { get; set; }

The class ProfileViewModel contains

    public class ProfileModel
{
    public List<UserModel> Users { get; set; } = new List<UserModel>();
    public string ProfileName { get; set; }//12 Char

And the UserModelClass contains

   public class UserModel
{
    public string Name { get; set; }//40 char

Now I am able to bind to a TreeView with the profile name but I don't know how to bind the Users as childs of a Profile

My xaml

<UserControl x:Class="MainUI.Views.UserView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:MainUI.Views"
         mc:Ignorable="d"  
         d:DesignHeight="450" d:DesignWidth="800">
<Grid>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="20"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="20"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="20"/>
        <RowDefinition Height="20"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="20"/>
    </Grid.RowDefinitions>
    <Menu Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="4" Margin="0">
        <MenuItem Header="_File">
            <MenuItem Header="_Open" Name="FileOpen"/>
        </MenuItem>
    </Menu>
    <Button x:Name="GetProfiles" Grid.Row="1" Grid.Column="1">Get Profiles</Button>
    <StackPanel Orientation="Vertical" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="1" Grid.RowSpan="3" MaxHeight="250">
        <TextBlock FontWeight="Bold" Margin="0 10 0 0">Existing Profiles</TextBlock>
        <TextBlock x:Name="SelectedProfile_ProfileName"/>
    </StackPanel>
    <StackPanel Orientation="Vertical" Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="1" Grid.RowSpan="3" MaxHeight="250">
        <TextBlock FontWeight="Bold" Margin="0 10 0 0">Users in profile</TextBlock>
        <ListBox x:Name="Users" DisplayMemberPath="Name"
                 SelectedItem="{Binding Path=SelectedUser,Mode=OneWayToSource}"
                 Height="200"/>
        <TextBlock x:Name="SelectedUser_Name"/>
    </StackPanel>
    <StackPanel Orientation="Vertical" Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="2" Grid.RowSpan="3" MaxHeight="250">
        <TextBlock FontWeight="Bold" Margin="0 10 0 0">Profiles</TextBlock>
        <TreeView x:Name="TVUser"  ItemsSource="{Binding Profiles}">
            <TreeView.ItemContainerStyle>
                <Style TargetType="{x:Type TreeViewItem}">
                    <!--<EventSetter Event="UIElement.MouseLeftButtonUp" Handler="TreeViewItem_MouseLeftButtonUp"/>-->
                    <Setter Property="IsSelected" Value="{Binding IsChecked, Mode=TwoWay}" />
                </Style>
            </TreeView.ItemContainerStyle>
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Profiles}">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock VerticalAlignment="Center" Text="{Binding ProfileName}"/>
                    </StackPanel>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </StackPanel>
</Grid>

How can I make it work

Answer 1

You need to set the DataType and ItemSource for HierarchicalDataTemplate. For example,

<TreeView ItemsSource="{Binding Profiles}">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Users}" DataType="{x:Type vm:ProfileModel}">
            <TextBlock Text="{Binding ProfileName}"/>
            <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate DataType="{x:Type vm:UserModel}">
                    <TextBlock Text="{Binding Name}"/>
                </DataTemplate>
            </HierarchicalDataTemplate.ItemTemplate>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>