一、前言

TreeView控件在项目中使用比较频繁，普通的TreeView并不能满足我们的需求。因此我们需要滴对TreeView进行改造。下面的内容将介绍仿QQ联系人TreeView样式及TreeView数据绑定方法。

二、TreeView仿QQ联系人列表

准确的说不是仿QQ联系人列表，这个TreeView样式作为组织架构来使用更好。废话不多说，先看效果：

 2.1、基本思路

像这种联系人列表一般涉及到多层级数据，而且有很多数据是需要动态更新的，如果通过手动一条条增加数据反而更复杂，而且不方便。因此为了绑定数据方便我们使用分层模板HierarchicalDataTemplate。

分层模板中存在两种样式，一种是分组样式，一种是人员样式。不管是分组还是人员绑定的都是对象，这样我们在对象中添加一个属性来辨别是否为分组-IsGrouping。

默认的TreeView控件四周会有边距，因此需要设置下TreeView的样式。另外鼠标经过和鼠标选中的背景色需要变化，因此还需要设置TreeViewItem的样式。

根据思路，我们需要设置三个样式，TreeView样式，TreeViewItem样式，HierarchicalDataTemplate分层模板样式。另外为了自动计算下一级的边距，我们需要添加一个转换器IndentConverter。还需要一个转换器需要将布尔类型的IsGrouping转换为Visibility，还需要一个转换器来对Visibility取反。

这样三个样式，三个转换器。就可以实现我们上面的效果，另外还可以进行动态数据绑定。

2.2、样式代码

HierarchicalDataTemplate分层模板样式代码

TreeViewItem样式代码

TreeView样式代码

2.3、转换器代码

public class IndentConverter : IValueConverter    {        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)        {            double colunwidth = 10;            double left = 0.0;            UIElement element = value as TreeViewItem;            while (element.GetType() != typeof(TreeView))            {                element = (UIElement)VisualTreeHelper.GetParent(element);                if (element.GetType() == typeof(TreeViewItem))                    left += colunwidth;            }            return new Thickness(left, 0, 0, 0);        }        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)        {            throw new NotImplementedException();        }    }    public class BoolToVisible : IValueConverter    {        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)        {            if ((bool)value)                return Visibility.Visible;            else                return Visibility.Collapsed;        }        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)        {            throw new NotImplementedException();        }    }    public class VisibleToReverse : IValueConverter    {        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)        {            if ((Visibility)value == Visibility.Visible)                return Visibility.Collapsed;            else                return Visibility.Visible;        }        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)        {            throw new NotImplementedException();        }    }

2.4、引用示例

2.5、初始化数据源及绑定对象

public MainWindow()        {            InitializeComponent();            OrgList = new ObservableCollection
     
      ()            {                new OrgModel()                {                    IsGrouping=true,                    DisplayName="单位名称(3/7)",                    Children=new ObservableCollection
      
       ()                    {                        new OrgModel(){                            IsGrouping=true,                            DisplayName="未分组联系人(2/4)",                            Children=new ObservableCollection
       
        ()                            {                                new OrgModel(){                                    IsGrouping=false,                                    SurName="刘",                                    Name="刘棒",                                    Info="我要走向天空！",                                    Count=3                                }                            }                        }                    },                }            };            TreeViewOrg.ItemsSource = OrgList;        }        public ObservableCollection
        
          OrgList { get; set; }        public class OrgModel        {            public bool IsGrouping { get; set; }            public ObservableCollection
         
           Children { get; set; }            public string DisplayName { get; set; }            public string SurName { get; set; }            public string Name { get; set; }            public string Info { get; set; }            public int Count { get; set; }        }
         
        
       
      
     

 

所有代码已经上传到github：