重写TreeView，自定义图标，生成通行的下划线，取消默认获得焦点失去焦点的效果，并支持拖拽节点到外界

1、运行效果：

2、前端代码

<UserControl x:Class="iPIS.UI.Base.Tree.VideoTreeControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:iPIS.UI.Base.Tree"
             mc:Ignorable="d" 
             d:DesignHeight="50" d:DesignWidth="80">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/iPIS.UI.Themes.Black;component/Base/Tree/VideoTreeControlImages.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <Style TargetType="TextBlock" x:Key="fontstyle">
                <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:VideoTreeControl},Path=VideoTreeControlFontColor}"></Setter>
                <Setter Property="FontSize" Value="14"></Setter>
                <Setter Property="VerticalAlignment" Value="Center"></Setter>
            </Style>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <TreeView x:Name="tree" 
              AllowDrop="True" 
              ItemsSource="{Binding DataList}"                  
              Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:VideoTreeControl},Path=VideoTreeControlBackground}"
              >
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                    <Grid x:Name="grid"
                          Margin="-1 0 0 0" 
                          Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:VideoTreeControl},Path=VideoTreeControlBackground}"
                          >
                        <StackPanel Grid.Column="1" 
                                    Orientation="Horizontal" 
                                    Cursor="Hand" 
                                    Height="40"
                                    VerticalAlignment="Center"
                                >
                            <Image x:Name="icon" Width="19" Height="16" VerticalAlignment="Center" Margin="0 0 5 0"></Image>
                            <TextBlock Text="{Binding Text}" Style="{StaticResource fontstyle}"></TextBlock>
                            <StackPanel x:Name="cc" 
                                        Orientation="Horizontal" 
                                        Visibility="Collapsed"
                                        Margin="0 0 -1 0"
                                        Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:VideoTreeControl},Path=VideoTreeControlBackground}"
                                        >
                                <TextBlock Style="{StaticResource fontstyle}">(</TextBlock>
                                <TextBlock Text="{Binding FileCount}" Style="{StaticResource fontstyle}"></TextBlock>
                                <TextBlock Style="{StaticResource fontstyle}">)</TextBlock>
                            </StackPanel>
                        </StackPanel>
                        <!--模拟通行下划线-->
                        <Canvas>
                            <Line X1="0" Y1="39" X2="1000" Y2="39" Stroke="#4a4a4a" Margin="-500 0 0 0" StrokeThickness="1"></Line>
                        </Canvas>
                    </Grid>
                    <HierarchicalDataTemplate.Triggers>
                        <DataTrigger Binding="{Binding Type}" Value="-1">
                            <Setter TargetName="icon" Property="Source" Value="{StaticResource icon_default}"></Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Type}" Value="0">
                            <Setter TargetName="icon" Property="Source" Value="{StaticResource icon_yuan}"></Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Type}" Value="1">
                            <Setter TargetName="icon" Property="Source" Value="{StaticResource icon_pian}"></Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Type}" Value="2">
                            <Setter TargetName="icon" Property="Source" Value="{StaticResource icon_xulie}"></Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Type}" Value="-1">
                            <Setter TargetName="cc" Property="Visibility" Value="Visible"></Setter>
                        </DataTrigger>
                    </HierarchicalDataTemplate.Triggers>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>
</UserControl>

3、控件的后台代码

using iPIS.UI.Base.Model;
using iPIS.UI.Base.ViewModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace iPIS.UI.Base.Tree
{
    /// <summary>
    /// VideoTreeControl.xaml 的交互逻辑
    /// </summary>
    public partial class VideoTreeControl : UserControl
    {
        public VideoTreeControl()
        {
            InitializeComponent();
            this.DataContext = new VideoTreeControlViewModel();
            //默认样式
            VideoTreeControlBackground = "#36353a";
            VideoTreeControlFontColor = "#9a9a9a";

            tree.SelectedItemChanged += Tree_SelectedItemChanged;
            tree.MouseDoubleClick += Tree_MouseDoubleClick;
        }

        /// <summary>
        /// 上下文
        /// </summary>
        VideoTreeControlViewModel vm
        {
            get
            {
                return this.DataContext as VideoTreeControlViewModel;
            }
        }

        /// <summary>
        /// 背景颜色
        /// </summary>
        public string VideoTreeControlBackground
        {
            get { return (string)GetValue(VideoTreeControlBackgroundProperty); }
            set { SetValue(VideoTreeControlBackgroundProperty, value); }
        }

        /// <summary>
        /// 字体颜色
        /// </summary>
        public string VideoTreeControlFontColor
        {
            get { return (string)GetValue(VideoTreeControlFontColorProperty); }
            set { SetValue(VideoTreeControlFontColorProperty, value); }
        }

        #region 附加属性

        public static readonly DependencyProperty VideoTreeControlFontColorProperty =
            DependencyProperty.Register("VideoTreeControlFontColor", typeof(string), typeof(VideoTreeControl), new PropertyMetadata(""));

        public static readonly DependencyProperty VideoTreeControlBackgroundProperty =
            DependencyProperty.Register("VideoTreeControlBackground", typeof(string), typeof(VideoTreeControl), new PropertyMetadata(""));
        #endregion

        #region 公开事件
        /// <summary>
        /// 双击节点
        /// </summary>
        public event EventHandler<VideoTreeControlItemModel> DoubleClickTreeItem;

        /// <summary>
        /// 节点选中变更
        /// </summary>
        public event EventHandler<VideoTreeControlItemModel> SelectedItemChanged;
        #endregion

        /// <summary>
        /// 选中时
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Tree_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
        {
            var datamodel = e.NewValue as VideoTreeControlItemModel;
            if (datamodel.Type == VideoTreeControlItemType.Root) return;//过滤root
            SelectedItemChanged?.Invoke(vm, datamodel);
            //获取方式   e.Data.GetData(typeof(Base.Model.VideoTreeControlItemModel))
            DragDrop.DoDragDrop(sender as FrameworkElement, datamodel, DragDropEffects.Copy);

            /*
            DragDrop.DoDragDrop(sender as FrameworkElement, new ImageTreeControlImageModel()
            {
                Text = "我是拖进来的",
                Type = ImageTreeControlImageType.AlreadyMatting,
                ImageSource = new BitmapImage(new Uri("D:\上传资源\xxx.png", UriKind.Absolute))
            }, DragDropEffects.Copy);
            */
        }

        /// <summary>
        /// 双击节点
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Tree_MouseDoubleClick(object sender, MouseButtonEventArgs e)
        {
            var datamodel = tree.SelectedValue as VideoTreeControlItemModel;
            if (datamodel == null || datamodel.Type == VideoTreeControlItemType.Root) return;//过滤root
            DoubleClickTreeItem?.Invoke(vm, datamodel);
        }
    }
}

4、控件的datacontext对象

using iPIS.UI.Base.Model;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace iPIS.UI.Base.ViewModel
{
    public class VideoTreeControlViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private ObservableCollection<VideoTreeControlItemModel> _DataList;

        /// <summary>
        /// 数据源
        /// </summary>
        public ObservableCollection<VideoTreeControlItemModel> DataList
        {
            get => _DataList;
            set
            {
                //检查是否有roo，不存在生成默认root
                if (value.Where(c => c.Type == VideoTreeControlItemType.Root).Count() == 0)
                {
                    _DataList = new ObservableCollection<VideoTreeControlItemModel>() {
                        new VideoTreeControlItemModel(){
                            Text = "默认",
                            Children = value,
                            Type = VideoTreeControlItemType.Root//标示为root
                        }
                    };
                }
                else
                    _DataList = value;
                PropertyChanged?.Notify(() => this.DataList);
            }
        }
    }
}

5、数据实体 

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace iPIS.UI.Base.Model
{
    /// <summary>
    /// 视频图片树状控件，数据映射实体
    /// </summary>
    public class VideoTreeControlItemModel
    {
        private string _id = string.Empty;
        /// <summary>
        /// 唯一标示符
        /// </summary>
        public string Id
        {
            get
            {
                //如果调用者未显示给入唯一标识符，将默认生成一个唯一标识符
                if (string.IsNullOrEmpty(_id)) _id = Guid.NewGuid().ToString();
                return _id;
            }
            set
            {
                _id = value;
            }
        }

        /// <summary>
        /// 显示值
        /// </summary>
        public string Text { get; set; }

        /// <summary>
        /// 绑定值
        /// </summary>
        public object Value { get; set; }

        /// <summary>
        /// 类型，-1：根；0：原始视频；1：片段
        /// </summary>
        public VideoTreeControlItemType Type { get; set; } = VideoTreeControlItemType.Original;

        /// <summary>
        /// 子集
        /// </summary>
        public ObservableCollection<VideoTreeControlItemModel> Children { get; set; } = new ObservableCollection<VideoTreeControlItemModel>();

        /// <summary>
        /// 文件个数，Type=root时有效
        /// </summary>
        public int FileCount
        {
            get
            {
                if (Type != VideoTreeControlItemType.Root) return 0;
                List<VideoTreeControlItemModel> outlist = new List<VideoTreeControlItemModel>();
                GetFiles(this, outlist);
                return outlist.Count;
            }
        }

        /// <summary>
        /// 获取当前model下所有的文件实体，包含自己
        /// </summary>
        /// <param name="model">指定的对象</param>
        /// <param name="outlist">匹配到的从这里返回</param>
        private void GetFiles(VideoTreeControlItemModel model, List<VideoTreeControlItemModel> outlist)
        {
            if (outlist == null) outlist = new List<VideoTreeControlItemModel>();

            if (model.Type != VideoTreeControlItemType.Root)
            {
                outlist.Add(model);
            }
            foreach (var item in model.Children)
            {
                GetFiles(item, outlist);
            }
        }
    }

    /// <summary>
    /// 视频树，子项类型
    /// </summary>
    public enum VideoTreeControlItemType
    {
        /// <summary>
        /// 根
        /// </summary>
        Root = -1,
        /// <summary>
        /// 原始视频
        /// </summary>
        Original = 0,
        /// <summary>
        /// 片段
        /// </summary>
        Fragment = 1,
        /// <summary>
        /// 序列化
        /// </summary>
        Sequence = 2
    }
}

---

上面是完整效果的全部源码，下面我讲介绍我在封装的时候遇到的问题，并附上解决方案

1、如何自定义图标

答：系统内置一些图标在资源里面，通过属性值绑定不同的图片，因为图标总共就3个所有无需调用者指定，直接内置，通过类型区分匹配即可

下面圈注关键代码

2、如何生成通行的分割线

答：通过Canvas来画线，线条尽可能的长，已达到通行的效果，并且还要距左为负数，已抵消数字控件的子集缩进

附上关键代码

3、自定义树的背景效果加上上，发现一个很囧的问题，获得焦点和失去焦点的节点背景很丑，默认获得焦点是蓝色背景，失去焦点是白色背景，欧码噶

答：肯定是要干掉，必须干掉

附上关键代码

4、由于问题3，又新出一个诡异的问题，就是遮挡不完全，会出现一个1-2像素的竖线，经过调试查看发现是节点内置了border导致的，然后这个又没办法重写掉

答：几经周折，发现利用Margin可以抵消，真是大快人心

附上bug图

这是获得焦点

这是失去焦点

解决的关键代码