WPF如何实现含两类分层子节点的TreeView并解决显示异常问题

WPF 完全支持该场景，你的问题核心有两点：

1. HierarchicalDataTemplate 仅支持绑定单个子节点集合，而你的 ViewModelConfiguration 同时持有 Zones、Probes 两个独立集合，没有合并为统一的子节点数据源
2. 没有为 ViewModelConfiguration 类型定义对应的数据模板，WPF 无法识别该类型节点的渲染规则和子节点来源

需要修改的内容如下： #

1. 调整视图模型结构

给 ViewModelConfiguration 新增合并的子节点集合，将 Zones 和 Probes 根节点统一纳入：

public class ViewModelConfiguration 
{
     // 原有属性保留，注意集合内元素类型要和你模板定义的DataType对齐
     public ObservableCollection<VMProbe> Probes { get; set; }
     public ObservableCollection<VMZones> Zones { get; set; }
     // 新增合并的子节点集合
     public ObservableCollection<object> Children { get; set; }
     // 新增配置名称属性，用来显示Configuration 1/2
     public string ConfigName { get; set; }

     public ViewModelConfiguration(string configName) 
     {
         ConfigName = configName;
         Probes = new ObservableCollection <VMProbe> {...};
         Zones = new ObservableCollection <VMZones> {...};
         // 合并两个根节点到子集合
         Children = new ObservableCollection<object>
         {
             Zones,
             Probes
         };
     }
}

// 构造配置节点时传入名称
public VMTreeView() 
{
     Configurations = new ObservableCollection<ViewModelConfiguration>();
     Configurations.Add(new ViewModelConfiguration("Configuration 1"));
     Configurations.Add(new ViewModelConfiguration("Configuration 2"));
}

2. 调整XAML模板

新增 ViewModelConfiguration 对应的数据模板，同时修正原有模板的文本错误：

<TreeView ItemsSource="{Binding Configurations}">
    <TreeView.Resources>
        <!-- 新增配置节点的模板 -->
        <HierarchicalDataTemplate DataType="{x:Type vm:ViewModelConfiguration}"
                                  ItemsSource="{Binding Children}">
            <TextBlock Text="{Binding ConfigName}"/>
        </HierarchicalDataTemplate>

        <HierarchicalDataTemplate x:Key ="ZoneTemplate" DataType="{x:Type common:VMZonesPlan}" ItemsSource="{Binding ZonePlans}">
            <TextBlock Text="{Binding ZoneName}"/>
            <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate DataType="{x:Type common:VMZone}">
                    <ui:EditableTextBlock  Text="{Binding ZoneName}"/>
                </DataTemplate>
            </HierarchicalDataTemplate.ItemTemplate>
        </HierarchicalDataTemplate>

        <!-- 移除x:Key，按DataType自动匹配 -->
        <HierarchicalDataTemplate DataType="{x:Type vm:VMZones}" 
                            ItemsSource="{Binding Zones}" 
                            ItemTemplate="{StaticResource ZoneTemplate}">
            <TextBlock Text="Zones"/>
        </HierarchicalDataTemplate>


        <HierarchicalDataTemplate x:Key ="ProbeTemplate" DataType="{x:Type vm:VMProbeEndeffectors}" ItemsSource="{Binding ProbeEndeffectors}">
            <TextBlock Text="{Binding ProbeName}"/>
            <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding ProbeName}"/>
                </DataTemplate>
            </HierarchicalDataTemplate.ItemTemplate>
        </HierarchicalDataTemplate>

        <!-- 移除x:Key，按DataType自动匹配 -->
        <HierarchicalDataTemplate DataType="{x:Type vm:VMProbe}" 
                                  ItemsSource="{Binding Probes}" 
                                  ItemTemplate="{StaticResource ProbeTemplate}">
            <TextBlock Text="Probes"/>
        </HierarchicalDataTemplate>
    </TreeView.Resources>
</TreeView>

如果需要支持 Zones/Probes 集合的动态增删，额外监听两个集合的变更事件，同步更新 Children 集合即可。

内容的提问来源于stack exchange，提问作者Kay