Introduction to Treeview in WPF

Recently, WPF is used for development. The project progress is still smooth. In general, WPF is quite convenient. The most significant changes are the listview and Treeview controls, in addition, Treeview seems to be a much-criticized control in WPF, and many people say it is not easy to use. In fact, I think developers have not mastered the MVC ideas inherited in WPF. In view, the Treeview in WPF gives developers more flexibility. developers can easily customize the shape of each node and even the entire tree. At the same time, the new Treeview can accept various collections as itemsource, which is very flexible. As long as you simply understand these new concepts, you can develop them easily.

First, a simple demo

What if this demo is implemented? Start with MVC:

View of Treeview

In the Treeview of WPF, you can customize the display mode of each node, including adding multiple icons to a node, which only need to be configured in XAML, without leaving Complex C #Code. For example:

1:<Treeview Name= "Tvproperties"Width= "250" Padding= "0" Margin= "0" Borderthickness= "1">
 

 
2:<Treeview. itemtemplate>
 

3:<Hierarchicaldatatemplate Datatype= "{X: type local: propertynodeitem }" Itemssource= "{Binding Path = children }">
 

 
4:<Stackpanel Orientation= "Horizontal">
 

5:<Image Verticalalignment= "Center" Source= "{Binding icon }" Width= "16" Height= "16" Margin= "0, 0, 2, 2"> </Image>
 

 
6:<Textblock Verticalalignment= "Center" Text= "{Binding displayname }"> </Textblock>
 

7:<Image Verticalalignment= "Center" Source= "{Binding editicon }" Margin= "2, 0, 0"> </Image>
 

 
8:<Stackpanel. tooltip>
 

9:<Textblock Verticalalignment= "Center" Text= "{Binding name }" Textwrapping= "Wrap" Maxwidth= "200" > </Textblock>
 

 
10:</Stackpanel. tooltip>
 

 
11:</Stackpanel>
 

12:</Hierarchicaldatatemplate>
 

 
13:</Treeview. itemtemplate>
 

 
14:</Treeview>
 

Here I have defined a simple Treeview. The datatype corresponding to each node is propertynodeitem (I will give its definition later). The content of each node includes:

• Icon: An icon is displayed for each node.
• Displayname: the text on each node (only one rough content is displayed here, and the detailed content is displayed in tooltip)
• Editable icon: If a node can be edited, an edit icon will be displayed after the node.
• Tooltip: it is displayed when you move the mouse over it. The tooltip is Px in width and is automatically wrapped.

 

Treeview Model

This is the definition of propertynodeitem just mentioned.

 
1:Internal ClassPropertynodeitem
 

 
2:{
 

 
3:Public StringIcon {Get; set ;}
 

 
4:Public StringEditicon {Get; set ;}
 

 
5:Public StringDisplayname {Get; set ;}
 

 
6:Public StringName {Get; set ;}
 

7:
 

 
8:PublicList <propertynodeitem> children {Get; set ;}
 

 
9:PublicPropertynodeitem ()
 

 
10:{
 

 
11:Children =NewList <propertynodeitem> ();
 

 
12:}
 

 
13:}
 

Children stores subnodes. In the view, we defined the itemsource of hierarchicaldatatemplate as the children of propertynodeitem. As long as children is not empty, the Treeview will continue to render the objects in children and recursion.

 

Controller of Treeview

Here, the controller is written in XAML. CS:

1:Private VoidShowtreeview ()
 

 
2:{
 

 
3:List <propertynodeitem> itemlist =NewList <propertynodeitem> ();
 

 
4:Propertynodeitem node1 =NewPropertynodeitem ()
 

 
5:{
 

 
6:Displayname ="Node No.1",
 

 
7:Name ="This is the discription of node1. this is a folder .",
 

 
8:Icon = folder_icon,
 

9:};
 

 
10: 
 

 
11:Propertynodeitem node1tag1 =NewPropertynodeitem ()
 

 
12:{
 

 
13:Displayname ="Tag No.1",
 

 
14:Name ="This is the discription of tag 1. This is a tag .",
 

 
15:Icon = tag_icon,
 

 
16:Editicon = editable_icon
 

 
17:};
 

18:Node1.children. Add (node1tag1 );
 

 
19: 
 

 
20:Propertynodeitem node1tag2 =NewPropertynodeitem ()
 

 
21:{
 

 
22:Displayname ="Tag No. 2",
 

 
23:Name ="This is the discription of tag 2. This is a tag .",
 

 
24:Icon = tag_icon,
 

 
25:Editicon = editable_icon
 

 
26:};
 

27:Node1.children. Add (node1tag2 );
 

 
28:Itemlist. Add (node1 );
 

 
29: 
 

 
30:Propertynodeitem node2 =NewPropertynodeitem ()
 

 
31:{
 

 
32:Displayname ="Node No. 2",
 

 
33:Name ="This is the discription of Node 2. This is a folder .",
 

 
34:Icon = folder_icon,
 

 
35:};
 

36: 
 

 
37:Propertynodeitem node2tag3 =NewPropertynodeitem ()
 

 
38:{
 

 
39:Displayname ="Tag No. 3",
 

 
40:Name ="This is the discription of tag 3. This is a tag .",
 

 
41:Icon = tag_icon,
 

 
42:Editicon = editable_icon
 

 
43:};
 

 
44:Node2.children. Add (node2tag3 );
 

45: 
 

 
46:Propertynodeitem node2tag4 =NewPropertynodeitem ()
 

 
47:{
 

 
48:Displayname ="Tag No. 4",
 

 
49:Name ="This is the discription of tag 4. This is a tag .",
 

 
50:Icon = tag_icon,
 

 
51:Editicon = editable_icon
 

 
52:};
 

 
53:Node2.children. Add (node2tag4 );
 

54:Itemlist. Add (node2 );
 

 
55: 
 

 
56:This. Tvproperties. itemssource = itemlist;
 

 
57:}
 

The above code is very simple and I will not explain it here