介绍
这篇文章将为大家详细讲解有关WPF自定义TreeView控件样式如何实现QQ联系人列表效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>一、前言
TreeView这个控件对于我来说是用得比较多的,以前做的小聊天软件(好友列表),音乐播放器(播放列表),类库展示器(树形类结构)等都用的是TreeView,普通的TreeView并不能满足我们的需求,因此我们需要滴对TreeView进行改造。
<强>二,TreeView仿QQ联系人列表
准确的说不是仿QQ联系人列表,这个TreeView样式作为组织架构来使用更好。废话不多说,先看效果:
<强>,2.1,基本思路
像这种联系人列表一般涉及到多层级数据,而且有很多数据是需要动态更新的,如果通过手动一条条增加数据反而更复杂,而且不方便,因此为了绑定数据方便我们使用分层模板HierarchicalDataTemplate。
分层模板中存在两种样式,一种是分组样式,一种是人员样式。不管是分组还是人员绑定的都是对象,这样我们在对象中添加一个属性来辨别是否为分组-IsGrouping。
默认的TreeView控件四周会有边距,因此需要设置下TreeView的样式。另外鼠标经过和鼠标选中的背景色需要变化,因此还需要设置节点的样式。
根据思路,我们需要设置三个样式,TreeView样式,节点样式,HierarchicalDataTemplate分层模板样式。另外为了自动计算下一级的边距,我们需要添加一个转换器IndentConverter。还需要一个转换器需要将布尔类型的IsGrouping转换为可见性,还需要一个转换器来对能见度取反。
这样三个样式,三个转换器。就可以实现我们上面的效果,另外还可以进行动态数据绑定。
<强> 2.2,样式代码
HierarchicalDataTemplate分层模板样式代码
& lt; HierarchicalDataTemplate x:关键=癐temNode", ItemsSource=皗Binding 孩子们,模式=TwoWay}“比;
,,& lt; Grid 背景=癟ransparent"比;
,,,& lt; Grid.Resources>
,,,,& lt;转换:BoolToVisible x:关键=癰oolToVisible"/比;
,,,,& lt;转换:VisibleToReverse x:关键=皏isibleToReverse"/比;
,,,& lt;/Grid.Resources>
,,,& lt; Grid MinHeight=?0”, x: Name=皍serinfo",背景=癟ransparent",利润率=?5,0,0,0“,可见性=皗Binding 能见度,ElementName=groupinginfo转换器={StaticResource visibleToReverse}}“比;
,,,,& lt; Grid 身高=?0“,x: Name=癵rid"比;
,,,,,& lt; Border 背景=? 62 acf9",宽度=?0”,身高=?0“,CornerRadius=?“, HorizontalAlignment=癓eft",利润率=?,0,0,0“比;
,,,,,,& lt; TextBlock 文本=皗Binding 姓}“,字形大??3”,前景=癢hite", VerticalAlignment=癈enter", HorizontalAlignment=癈enter"/比;
,,,,,& lt;/Border>
,,,,,& lt; TextBlock 文本=皗Binding 名称}“,利润率=?0,7,0,0“,字形大??3“/比;
,,,,,& lt; TextBlock 文本=皗Binding 信息}“,前景=? 808080“,利润率=?0,30,0,0“/比;
,,,,,& lt; TextBlock 文本=皗Binding 统计,StringFormat={}{0}人}“,前景=? 808080“,HorizontalAlignment=癛ight", VerticalAlignment=癈enter",利润率=?,0,5,0“/比;
,,,,& lt;/Grid>
,,,& lt;/Grid>
,,,& lt; StackPanel MinHeight=?5”, x: Name=癵roupinginfo",取向=癏orizontal",背景=癟ransparent", HorizontalAlignment=癓eft",能见度=皗Binding IsGrouping转换器={StaticResource boolToVisible}}“比;
,,,,& lt; TextBlock 文本=皗Binding DisplayName}“,利润率=?3,0“,VerticalAlignment=癈enter", HorizontalAlignment=癓eft"/比;
,,,& lt;/StackPanel>
,,& lt;/Grid>
& lt;才能/HierarchicalDataTemplate> 节点样式代码
& lt; Style x:关键=癉efaultTreeViewItem", TargetType=皗x: Type 节点}“比;
,,& lt; Setter 财产=癕inHeight",价值=https://www.yisu.com/zixun/" 25 "/>
<往ControlTemplate中加故事板动画TargetType=" {x:类型节点}">
<转换:IndentConverter x:关键=" IndentConverter "/>
<网格背景="透明">
