WPF TreeView 控件 HierarchicalDataTemplate 绑定节点及自定义节点的 样式

HierarchicalDataTemplate 的含义为分层数据模板，用来定义分层数据样式的模板，一般多用于MenuItem和TreeViewItem

HierarchicalDataTemplate 数据模板包含属性 DataType 和 ItemsSource ，其中 DataType 为 该数据模板需要绑定的数据类型，ItemsSource 为数据模板的子数据源 意味着该节点的子节点的数据源。

本文实现一个DEMO 实现 学校到年级，到班级的层级显示，效果图如下：

Ｄｅｍｏ　不一定是最完美的的，但是这种实现方式会给遇到过这样需求的人提供新的思路， 看到上图 的 效果图 应该有两点值得考虑，第一 节点的如何绑定的， 第二 每个节点的不用样式如何动态绑定，那么带着这两个问题我们往下看

第一步： 我们看下该节点数据的实体类定义：

　TreeViewItemNode 该实体类定义了，每个TreeView控件中的TreeViewITem 需要绑定的数据实体类：

　　

   public class TreeViewItemNode : ICloneable
    {
        public TreeViewItemNode()
        {
            this.Chirldren = new List<TreeViewItemNode>();
        }

        /// <summary>
        /// 获取或设置 节点的名称
        /// </summary>
        public string Name { get; set; }

        /// <summary>
        /// 获取或设置 节点的子节点
        /// </summary>
        public List<TreeViewItemNode> Chirldren { get; set; }

        /// <summary>
        /// 获取或设置  该节点从属于数据那种业务数据类型
        /// </summary>
        public BaseEntity Self { get; set; }

        public object Clone()
        {
            return new TreeViewItemNode() { Name = this.Name, Self =this.Self };
        }
    }

第二步：我们定义每个节点的含义，从效果图上分析，该节点信息分为：学校，年级，班级三大类，如下代码：

  /// <summary>
    /// 基类
    /// </summary>
    public class BaseEntity
    {
        public string Name { get; set; }
    }

    /// <summary>
    /// 班级
    /// </summary>
    public class ClassObj : BaseEntity
    {
    }

    /// <summary>
    /// 年级
    /// </summary>
    public class Grade : BaseEntity
    {

    }

    /// <summary>
    /// 学校
    /// </summary>
    public class School : BaseEntity
    {
    }

备注 ：定义BaseEntity 的意义在于，在TreeViewItemNode 中的Seft 可以是继承这个父类的所有子类，一遍后面设置每个子类的在界面中对应的样式

第三步：构造 TreeViewItemNode 数据集合：

   public class SchoolList : List<TreeViewItemNode>
    {
        public SchoolList()
        {
            // 创建 班级模板类，一遍后面的服用
            TreeViewItemNode classObj1 = new TreeViewItemNode() { Name = "一班", Self = new ClassObj() { Name = "一班" } };
            TreeViewItemNode classObj2 = new TreeViewItemNode() { Name = "二班", Self = new ClassObj() { Name = "二班" } };
            TreeViewItemNode classObj3 = new TreeViewItemNode() { Name = "三班", Self = new ClassObj() { Name = "三班" } };

            TreeViewItemNode parentSchool = new TreeViewItemNode() { Name = "尼特学校" };
            parentSchool.Self = new School() { Name = "尼特学校" };
            parentSchool.Chirldren.Add(new TreeViewItemNode() { Self = new Grade() { Name = "一年级" }, Name = "一年级", Chirldren = new List<TreeViewItemNode>() { classObj1.Clone() as TreeViewItemNode, classObj2.Clone() as TreeViewItemNode, classObj3.Clone() as TreeViewItemNode } });
            parentSchool.Chirldren.Add(new TreeViewItemNode() { Self = new Grade() { Name = "二年级" }, Name = "二年级", Chirldren = new List<TreeViewItemNode>() { classObj1.Clone() as TreeViewItemNode, classObj2.Clone() as TreeViewItemNode, classObj3.Clone() as TreeViewItemNode } });
            parentSchool.Chirldren.Add(new TreeViewItemNode() { Self = new Grade() { Name = "三年级" }, Name = "三年级", Chirldren = new List<TreeViewItemNode>() { classObj1.Clone() as TreeViewItemNode, classObj2.Clone() as TreeViewItemNode, classObj3.Clone() as TreeViewItemNode } });
            
            Add(parentSchool);
        }

        public TreeViewItemNode this[string name]
        {
            get
            {
                foreach (TreeViewItemNode l in this)
                    if (l.Name == name)
                        return l;

                return null;
            }
        }
    }

备注： Schools 中的chirldren包含 年级的节点，年级的节点chirldren中包含班级的节点,嵌套追加的方式。

第四步：查看界面绑定：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        xmlns:model="clr-namespace:WpfApplication1.Model"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <ResourceDictionary>
            <local:SchoolList x:Key="schoolLists"></local:SchoolList>

            <HierarchicalDataTemplate DataType="{x:Type model:TreeViewItemNode}" ItemsSource="{Binding Path=Chirldren}">
                <ContentPresenter Content="{Binding Self}"/>
            </HierarchicalDataTemplate>

            <DataTemplate DataType="{x:Type model:Grade}">
                <TextBlock Foreground="Red" Text="{Binding Path=Name}"/>
            </DataTemplate>

            <DataTemplate DataType="{x:Type model:ClassObj}">
                <TextBlock Foreground="Blue" Text="{Binding Path=Name}"/>
            </DataTemplate>

            <DataTemplate DataType="{x:Type model:School}">
                <TextBlock Foreground="Black" Text="{Binding Path=Name}"/>
            </DataTemplate>

        </ResourceDictionary>
    </Window.Resources>

    <Grid>
        <TreeView ItemsSource="{Binding Source={StaticResource schoolLists}}">
        </TreeView>
    </Grid>
</Window>

代码已经编写完毕，运行后就是本文中一开始的截图。

具体每块代码的含义如下图所示：

 说到这里，该demo的代码已经全部介绍完了，但是有人可能会有这样的疑问，为什么 分层数据模板只有一个 却能显示这么多层的子集数据呢，那是因为，我们的虚拟的节点类是TreeViewItemNode ，在该实体类中的chirldren 是一个该类型的集  合，因为 分层数据模板 HierarchicalDataTemplate 的数据类型为 TreeViewItemNode 并且 子集的数据来源为Chirldren ，因此只要 TreeViewItemNode 类中的Chirldren属性中一直存在着数据，那么该节点会一直嵌套循环的显示Chirldren的数据。