WPF TreeView 控件 HierarchicalDataTemplate 绑定节点及自定义节点的样式 - 李辉_123 - 博客园

安宇雨 - 随手采集
2024-06-19 18:52:07
随手采集
0000-未整理-等待研究

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.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的数据。

原网址: 访问
创建于: 2024-06-19 18:52:07
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论