WPF Treeview Win8 Style

On the left side of style 1 provided by the Treeview control of WPF, the arrow in front of the node is good, but the selection effect is really bad. If you want to be more gorgeous, it is necessary to customize the Treeview style. The right side of result 1 is a Win8-style Treeview.

Figure 1 Comparison of Treeview styles

In WPF, the appearance of custom controls is very simple, but for Treeview, the biggest difficulty lies in how to achieve the entire row selection of nodes. This is because the Treeview item template is shown in 2 by default.

Figure 2 default Treeview item Template

The outermost layer is a grid with three columns and two rows. The first column is used to place expander (the arrow before the node), and the remaining columns are placed in the part_header (header content) and subnode list. Because the expander column is empty in front of the subnode list, each layer of the Treeview naturally has indentation, which also leads, the border cannot be filled with the whole line-because it does not know how many layers of indentation are there before the current node. Although there are also some clever methods, for example, when drawing a border, make margin. Left small enough, but this is only applicable to no border background, not when defining the Win8 style.

Therefore, you need to calculate the level (depth) of the current node. Here we provide a good way to get the depth of treeviewitem by traversing up the parent object of treeviewitem In the visualization tree,CodeAs follows:

Public static int getdepth (this treeviewitem item) {int depth = 0; while (item = item. getancestor <treeviewitem> ())! = NULL) {depth ++;} return depth;} public static t getancestor <t> (this dependencyobject source) where T: dependencyobject {do {source = visualtreehelper. getparent (source);} while (source! = NULL &&! (Source is t); Return source as t ;}
 

Here, you need to use the visualtreehelper. getparent method to obtain the parent object. If you use item. Parent directly, null is obtained.

After obtaining the depth, We will redefine the template of treeviewitem, as shown in 3.

Figure 3 custom Treeview item Template

In a custom template, all nodes are arranged hierarchically using stackpanel, so there is no hierarchy at this time, and border can be displayed in the whole line. The hierarchy is implemented by specifying different margin. Left for the grid. This requires the distance to be indented Based on the depth of the current node. The computing process is completed using ivalueconverter:

<Controltemplate. Resources> <! -- Compute node indent converter --> <cw: indentconverter indent = "10" marginleft = "5" X: Key = "indentconverter"/> </controltemplate. resources> <grid margin = "{binding converter = {staticresource indentconverter}, relativesource = {relativesource templatedparent}"/>
 

 
Public sealed class indentconverter: ivalueconverter {public double indent {Get; set;} public double marginleft {Get; set;} public object convert (object value, type targettype, object parameter, cultureinfo culture) {treeviewitem item = value as treeviewitem; If (item = NULL) {return New thickness (0);} return New thickness (this. marginleft + this. indent * item. getdepth (), 0, 0, 0 );}}
 

Here, the indent converter defines two attributes: Indent and marginleft. This is because I adjusted the indent distance from 19 to 12, which makes the tree more interesting, however, the root node is too close to the left border, so marginleft is added to make the root node farther away from the left border, as shown in figure 4.

Figure 4 indent distance comparison

Finally, the style is adjusted. The style 5 in the resource manager tree list in Win8 is similar to that in win7, but it is easier to implement without the gradient and rounded corner. It should be noted that the selected node changes the color when the mouse passes (although not obvious), and the arrow is in the expanded or collapsed state, the cursor changes to blue. There is nothing to say about the style definition, and some colors are also marked in.

Figure 5 Resource Manager in Win8

The most gorgeous aspect of the Win8 Resource Manager tree list is that when the control has no focus and the mouse has not passed, all arrows are hidden and appear only when there is focus, unfortunately, I don't know how to implement this, so I have to put it down first.

All style definitions are stored in \ resources \ win8theme \ Treeview. in the XAML file, this is a resource dictionary. You only need to use <resourcedictionary source = "Resources/win8theme/Treeview. XAML "/> import the resource dictionary, and the Treeview control can be displayed in the Win8 style. Complete code and examples can be downloaded here.