WPF TreeView自定义可视化树样式

最新推荐文章于 2025-03-14 14:56:29 发布

抹香茶

最新推荐文章于 2025-03-14 14:56:29 发布

阅读量3w

点赞数 14

分类专栏： WPF 文章标签： WPF 树 TreeView 转换器节点

本文链接：https://blog.csdn.net/qq_20758141/article/details/80345900

版权

本文介绍了如何在WPF中创建自定义样式的TreeView，包括折叠箭头和层级线条。通过两种方式建立树结构，一种是前端XAML直接列出内容，另一种是后台数据绑定。同时，文章讨论了如何设置TreeViewItem的样式模板，并使用转换器来处理特定节点的显示。作者在实现过程中遇到了将样式应用到所有TreeViewItem的问题，期待读者提供解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前项目中效果（没上传，需要的留言）

以下例子最终效果：

TreeView 折叠箭头，带垂直方向、水平方向层级线条（如图）

来看看怎么一步步实现吧~

补充一点，代码本地试过，现剪切的所以可能部分运行显示与截图不完全一样，

但基本结构是没有问题的，可以自己修改内容试试看！~

先做一个基础点的样式（图左侧）

（右侧是打印出来节点生成顺序，具体输出含义看本页的【转换器】）

<一>树结构的建立

写树节点的方式有两种：

【一种是前端xaml直接列出来内容】

【一种是后台绑定】，又分 ①绑定自定义节点类型的数据或者 ②绑定默认类型数据。

（以下都来试试）

-----------------------------------------------------------------------------------------------------------------------

【一种是前端xaml直接列出来内容】

....

<TreeView x:Name="treeView_Set"  Grid.RowSpan="2" FontSize="18" Margin="10,10,10,10" SelectedItemChanged="TreeView_SelectedItemChanged">

	<TreeViewItem TabIndex="1" Header="{DynamicResource ID_ST_2}">
		<TreeViewItem TabIndex="2" Header="{DynamicResource ID_ST_1}"/>
		<TreeViewItem Header="{DynamicResource ID_ST_2}">
			<TreeViewItem TabIndex="10" Header="{DynamicResource ID_ST_3}"/>
			<TreeViewItem TabIndex="20" Header="{DynamicResource ID_ST_3}"/>
			<TreeViewItem TabIndex="30" Header="{DynamicResource ID_ST_3}"/>
			<TreeViewItem TabIndex="40" Header="{DynamicResource ID_ST_3}">
				<TreeViewItem TabIndex="50" Header="{DynamicResource ID_ST_3}"/>
				<TreeViewItem TabIndex="60" Header="{DynamicResource ID_ST_3}"/>
			</TreeViewItem>
		</TreeViewItem>
		<TreeViewItem TabIndex="70" Header="{DynamicResource ID_ST_3}"/>
		<TreeViewItem TabIndex="80" Header="{DynamicResource ID_ST_3}"/>
		<TreeViewItem TabIndex="90" Header="{DynamicResource ID_ST_3}"/>
	</TreeViewItem>
</TreeView>

-----------------------------------------------------------------------------------------------------------------------

【一种是后台绑定】

①绑定自定义节点类型的数据

xaml前台把绑定元设定上，包括绑定格式等等： =====>>>> 目前这样写，不会使用自定义的itemStyle

<TreeView x:Name="treeView_Set"  Grid.RowSpan="2" FontSize="18" Margin="10,10,10,10" SelectedItemChanged="TreeView_SelectedItemChanged">

                            <TreeView.ItemTemplate>
                                <HierarchicalDataTemplate DataType="{x:Type local:TreeViewItemIPU}" ItemsSource="{Binding Path=Children}">
                                    <TextBlock Text="{Binding TreeViewItemName}" />
                                </HierarchicalDataTemplate>
                            </TreeView.ItemTemplate>

                        </TreeView>

后端自定义数据类型，并实现树结构：

TreeViewItemIPU 绑定对象的定义，与前端绑定的对象类型一致（DataType），绑定元Children

再定义对象的属性，与前端绑定使用到的属性一致（TreeViewItemName）

InitDataSource() 实现数据初始化

最后一句 treeView_Set.Items.Add(root); 是将后台生成的树绑定到前端显示

 /// <summary>
    /// 可视化树节点的结构定义
    /// </summary>
    public class TreeViewItemIPU
    {
        private string _treeViewItemName;
        public string TreeViewItemName
        {
            get { return _treeViewItemName; }
            set { _treeViewItemName = value; }
        }
        private List<TreeViewItemIPU> _children = new List<TreeViewItemIPU>();
        public List<TreeViewItemIPU> Children
        {
            get
            {
                return _children;
            }
            set
            {
                if (value != _children)
                {
                    _children = value;
                }
            }
        }

    }

        /// <summary>
        /// 树形结构内容加载（初始化时调用即可）
        /// </summary>
        private void InitDataSource()
        {
            TreeViewItemIPU root = new TreeViewItemIPU() { TreeViewItemName = "Root" };
            TreeViewItemIPU childLevel1 = new TreeViewItemIPU() { TreeViewItemName = "childLevel1" };


            TreeViewItemIPU childLevel1_1 = new TreeV

最低0.47元/天解锁文章