WPF TreeView自定义可视化树样式

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

 

以下例子 最终效果：

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

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

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

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

 

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

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

<一>树结构的建立

写树节点的方式有两种：

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

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

（以下都来试试）

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

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

<TreeView>

       <TreeViewItem/>

       ....

<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