How to bind an object and its properties to a treeview

Question

I got a list of Devices. These only have Names and a List of DeviceInfos. These DeviceInfos have a Key and Values. Now I want to build a treeView which shows every Device and as treeviewitems all the values. And I don't know how to bind this in XAML.

I'm using .NET Framework 4.8

    public class Device
    {
        public string Name {get; set;}
        public List<DeviceInfo> deviceInfos {get; set;}
    }
    
    public class DeviceInfo
    {
        public int key {get; set;}
        public value values {get; set;}
    }
    
    public class values
    {
         public string Type {get; set;}
         public string TypeName {get; set;}
    }
    
    public List<Device> devices {get; set;}

    <TreeView ItemsSource="{Binding devices}" Margin="2">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding Device}">
                <TreeViewItem Header="{Binding name}">
                    <TreeViewItem ItemsSource="{Binding deviceInfos}" Header="{Binding TypeName}">
                    </TreeViewItem>
                </TreeViewItem>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>

The planed result should look something like this:

+ Device  
    + DeviceInfo.Value.Type  
        DeviceInfo.ValueTypeName  
+ Device3  
    + DeviceInfo.Value.Type  
        DeviceInfo.ValueTypeName  
    + DeviceInfo.Value.Type  
        DeviceInfo.ValueTypeName  
    + DeviceInfo.Value.Type  
        DeviceInfo.ValueTypeName  
+ Device3  
    + DeviceInfo.Value.Type  
        DeviceInfo.ValueTypeName

Edit
Sorry for the unclear question. I got it working for the root. So I see the deviceName and I can unfold it. but I can't show the DeviceInfos. The propertychanged is handled elsewhere. I just left it out for shortening.

This part is working:

<TreeView ItemsSource="{Binding devices}" Margin="2">
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding Device}">
            <TreeViewItem Header="{Binding name}">
            </TreeViewItem>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

Answer 1

You should define a template per type:

<TreeView ItemsSource="{Binding devices}" Margin="2">
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type local:Device}" ItemsSource="{Binding deviceInfos}">
            <TextBlock Text="{Binding Name}" />
        </HierarchicalDataTemplate>
        <DataTemplate DataType="{x:Type local:DeviceInfo}">
            <TextBlock Text="{Binding values.Type}" />
        </HierarchicalDataTemplate>
    </TreeView.Resources>
</TreeView>

If you want to be able to expand a DeviceInfo, it must have an IEnumerable property. Your values types doesn't seem to be an IEnumerable which effectively makes DeviceInfo a leaf in the tree.

Answer 2

You should add your project Fody.PropertyChanged from Nuget and

public class Device : INotifyPropertyChanged
{
    public string name {get;set;}
    public ObservableCollection<DeviceInfo> deviceInfos {get;set;}
    public event PropertyChangedEventHandler PropertyChanged = (sender, e) 
}

public class DeviceInfo : INotifyPropertyChanged
{
    public int key {get;set;}
    public values value {get;set;}
    public event PropertyChangedEventHandler PropertyChanged = (sender, e) => { };
}

public class values : INotifyPropertyChanged
{
     public string Type {get;set;}
     public string TypeName {get;set;}
     public event PropertyChangedEventHandler PropertyChanged = (sender, e) => { };
}

Then you can do your bindings to the ObservableCollection<Device> devices {get;set;}

Edit: I dont know hwo to use treeview because i never need it. But you can achieve your goal by tweaking the bindings for a few times.

This line of code looks wrong <HierarchicalDataTemplate ItemsSource="{Binding Device}"> because there is no property named 'Device'