具有多个（两个）分层子节点的树视图

Question

我正在尝试构建一个包含一个根元素并包含 2 个子元素的树结构。子元素又包含其他子元素。

根以下的元素是独立的类，彼此无关。

现在我在 WPF 中的显示出现问题，我无法正确显示根目录下的两个元素

整个事情应该是这样的：

Configuration 1
 - Zones
    - Zone 1
    - Zone 2
 - Probes
    - Probe 1
    - Probe 2

Configuration 2
 - Zones
    - Zone 1
    - Zone 2
 - Probes
    - Probe 1
    - Probe 2

这是我的标记：

     <TreeView ItemsSource="{Binding Configurations}">

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

           <HierarchicalDataTemplate x:Key="ZoneHeader" DataType="{x:Type vm:VMZones}" 
                               ItemsSource="{Binding Zones}" 
                               ItemTemplate="{StaticResource ZoneTemplate}">

              <TextBlock x:Uid="TitleText"  Text="ZoneTitle"/>
           </HierarchicalDataTemplate>


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

           <HierarchicalDataTemplate x:Key="ProbeHeader" DataType="{x:Type vm:VMProbe}" 
                                     ItemsSource="{Binding Probes}" 
                                     ItemTemplate="{StaticResource ProbeTemplate}">

              <TextBlock x:Uid="TitleText"  Text="ZoneTitle"/>
           </HierarchicalDataTemplate>

        </TreeView.Resources>
     </TreeView>

这是我的代码：

public class VMTreeView: ViewModelBase 
{
     public ObservableCollection <ViewModelConfiguration> Configurations { get; set; }

     public VMTreeView() 
     {
         Configurations = new ObservableCollection<ViewModelConfiguration>();
         var firstNode = new Configuration(param);
         Configurations.Add(firstNode);
     }
}

public class ViewModelConfiguration 
{
     public ObservableCollection<Probe> Probes { get; set; }
     public ObservableCollection<Zones> Zones { get; set; }

     public ViewModelConfiguration() 
     {
         Probes = new ObservableCollection <Probe> {...};
         Zones = new ObservableCollection <Zones> {...};
     }
}

我已经看到有可能以某种方式我必须改变什么？还是 WPF 不能这样？

Answer 1

您应该定义一个包含自身子级的分层类型：

public class ViewModelConfiguration
{
    public ObservableCollection<ViewModelConfiguration> Children { get; }
        = new ObservableCollection<ViewModelConfiguration>();

    public ViewModelConfiguration(string name) =>
        Name = name;

    public string Name { get; }
}

XAML：

<TreeView ItemsSource="{Binding Configurations}">

    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type local:ViewModelConfiguration}" ItemsSource="{Binding Children}">
            <TextBlock Text="{Binding Name}"/>
        </HierarchicalDataTemplate>
    </TreeView.Resources>
</TreeView>

然后在视图模型中构建探针和区域树：

public class VMTreeView
{
    public ObservableCollection<ViewModelConfiguration> Configurations { get; }
        = new ObservableCollection<ViewModelConfiguration>();

    public VMTreeView()
    {
        var conf1 = new ViewModelConfiguration("Conf. 1");
        var zones = new ViewModelConfiguration("Zones");
        var zone1 = new ViewModelConfiguration("Zone 1");
        var zone2 = new ViewModelConfiguration("Zone 2");
        zones.Children.Add(zone1);
        zones.Children.Add(zone2);
        conf1.Children.Add(zones);

        Configurations.Add(conf1);
        ...
    }
}