Aero-style Treeview

Let's take a look at what aero-style tree looks like in windows.

The above is a tree not implemented by WPF in the system. Most items have three additional States: Mouseover, selected, and selected and focused.

Let's take a look at what the Treeview in WPF looks like by default.

I believe you can see at a glance that this is clearly the XP style. The gap between tree and aero is too big. And the problem is serious. The following is an example.

1. blur the hidden arrow. In addition, snapstodevicepixel and uselayoutrendering cannot solve this problem. As shown in.

The following is the default WPF style. The distance between the triangle and text is also different.

2. treeviewitem only has the selected effect and is in the XP style.

3. When the triangle of the treeviewitem of WPF is Mouseover, it only changes color but does not emit light. Win32 has the luminous effect.

4. The expanded arrow has a larger horizontal displacement than the collapsed arrow. As shown in.

On the right is the default Treeview style of WPF, which is nearly two pixels different from that of Win32.

Next we will solve the problems 1, 2 and 3.

The default triangle implementation method of the treeviewitem of WPF is complicated. As shown in.

The path of this triangle can be described as M0, 0 L6, 0 0, and 6z. The line width is 1 pixel. In this way, although the line is a pixel width, it does not overlap with device pixel. The result is that the left and right sides are half pixels wide. The display on the screen became two pixel-wide, gray lines of 50%. It seems blurred to the naked eye.

I am also wondering why snapstodevicepixel and uselayoutredering are ineffective on this issue. The solution is to align the data in the path to pixels. As follows.

<Streamgeometry X: Key = "treearrow"> m0.5, 0l0. 5, 7 4.5, 3.5z </streamgeometry>

This seems to use decimal places, but the result is aligned to the screen pixel. The results are displayed clearly.

The three States that define the treeviewitem.

It can be seen that this item has two border's, and both the background and the inner border are gradient.

Item state	Element	Brush
Mouse over	Border	# Ffb8d6fb
	Inner border	<Lineargradientbrush endpoint = "0.5, 1" startpoint = "0.5, 0"> <Gradientstop color = "# fffcfdfe" offset = "0"/> <Gradientstop color = "# fff2f7fe" offset = "1"/> </Lineargradientbrush>
	Background	<Lineargradientbrush endpoint = "0.5, 1" startpoint = "0.5, 0"> <Gradientstop color = "# fffafbfd" offset = "0"/> <Gradientstop color = "# ffebf3fd" offset = "1"/> </Lineargradientbrush>
Selected Isactive	Border	# Ff84acdd
	Inner border	<Lineargradientbrush endpoint = "0.5, 1" startpoint = "0.5, 0"> <Gradientstop color = "# fff2f8ff" offset = "0"/> <Gradientstop color = "# ffdfeeff" offset = "1"/> </Lineargradientbrush>
	Background	<Lineargradientbrush endpoint = "0.5, 1" startpoint = "0.5, 0"> <Gradientstop color = "# ffecf5ff" offset = "0"/> <Gradientstop color = "# ffd0e5ff" offset = "1"/> </Lineargradientbrush>
Selected Not isactive	Border	# Ffdadada
	Inner border	<Lineargradientbrush endpoint = "0.5, 1" startpoint = "0.5, 0"> <Gradientstop color = "# fffbfbfc" offset = "0"/> <Gradientstop color = "# fff1f1f1" offset = "1"/> </Lineargradientbrush>
	Background	<Lineargradientbrush endpoint = "0.5, 1" startpoint = "0.5, 0"> <Gradientstop color = "# fff9f9f9" offset = "0"/> <Gradientstop color = "# ffe6e6e6" offset = "1"/> </Lineargradientbrush>

The above values are all manually retrieved from the Treeview implemented by Win32 using paint. net, which is for reference only.

The final optimized treeviewitem style is as follows.

Don't read it wrong. This is WPF. CompleteCodeYou can download it from here.