TreeView 绑定到列表<Itemes>

TreeView binding to List<Itemes>

我有一个项目列表,列表中的每个项目都包含另一个项目列表。

public List<JobesGroup> JobeGroups { get; set; } = new List<JobesGroup>() 
{
   new JobesGroup()
   {
       ID=1,
       GroupName="test1",
       Jobes=new List<Jobe>()
       {
           new Jobe()
           {
               ID=1,
               JobeName="sss"
           },
           new Jobe()
           {
               ID=2,
               JobeName="aaa"
           }
       }
   },
   new JobesGroup()
   {
       ID=2,
       GroupName="test2",
       Jobes=new List<Jobe>()
       {
           new Jobe()
           {
               ID=3,
               JobeName="ddd"
           },
           new Jobe()
           {
               ID=4,
               JobeName="fff"
           }
       }
   }
};

我希望 TreeView 主要项目显示 GroupName 而子项目不显示 JobName。如何将其绑定到 TreeView?

您有一个分层数据结构,这意味着一个项目包含另一个项目集合。 TreeView can display hierarchical data using HierarchicalDataTemplates. Such a template defines the apprearance of an item and specifies the ItemsSource for the next level. It can also define a data template for the next level explicitly by using the ItemTemplate property. This can either be a HierarchicalDataTemplate or a DataTemplate 取决于提供分层或 non-hierarchical 数据的级别。如果未指定其他项目模板,相同的数据模板将应用于所有级别的所有项目。

第一级是 JobesGroup 项,第二级是 Jobes 项。

  • 第一级:需要一个 HierarchicalDataTemplate 来定义 GroupName 的显示方式,并将 Jobes 属性 指定为下一级的 ItemsSource
  • 第二层: JobeName 的简单 DataTemplate 就足够了,因为下面没有更多的层。它定义了 JobeName 的显示方式。
<TreeView ItemsSource="{Binding JobeGroups}">
   <TreeView.ItemTemplate>
      <HierarchicalDataTemplate DataType="{x:Type local:JobesGroup}"
                                ItemsSource="{Binding Jobes}">
         <TextBlock Text="{Binding GroupName}"/>
         <HierarchicalDataTemplate.ItemTemplate>
            <DataTemplate DataType="{x:Type local:Jobe}">
               <TextBlock Text="{Binding JobeName}"/>
            </DataTemplate>
         </HierarchicalDataTemplate.ItemTemplate>
      </HierarchicalDataTemplate>
   </TreeView.ItemTemplate>
</TreeView>