Aero風格的TreeView

我們來看看Windows系統中的Aero風格的Tree是什麼樣子的。

上面這樣都是系統中非WPF實現的Tree。多數Item都有MouseOver，Selected和Selected and Focused三種附加狀態。

我們再來看看WPF中的TreeView在預設情況的是什麼樣子的。

相信大家一眼就可以看出來，這明明就是XP風格的嘛。和Aero風格的Tree差距實在是太大了。而且問題很嚴重。下面列舉一二。

1. 收合的三角箭頭模糊。而且此模糊用SnapsToDevicePixel和UseLayoutRendering都無法解決。如所示。

下面的那個就是WPF的預設風格。而間三角與文本之間的間距也不一樣。

2. TreeViewItem只有Selected的效果，而且是XP風格的。

3. WPF的TreeViewItem的三角在MouseOver時，只變色，而沒有光暈效果。而Win32的是有光暈效果的。

4. 展開的三角箭頭與收合的三角箭頭相比，水平位移過大。如所示。

右邊是WPF的TreeView預設風格，與Win32的相差了將近兩個像素。

下面我們來解決問題1，2和3。

WPF的TreeViewItem預設的三角實現方式比較複雜。如所示。

這個三角的Path可以描述為M0,0 L6,0 0,6Z。線寬為1個像素。這樣，垂直的那條線，雖然是一個像素寬，但是不與Device Pixel重合。結果就是左右各是半個像素寬。最終顯示在螢幕上了就成了兩個像素寬的，50%的灰色的線。肉眼看上去就是模糊了。

我也很奇怪為什麼SnapsToDevicePixel和UseLayoutRedering 在這個問題上會失去效力。解決方案就是讓Path的Data也對齊到像素就可以。如下。

<StreamGeometry x:Key="TreeArrow" >M0.5,0L0.5,7 4.5,3.5z</StreamGeometry>

這個看上去都是用小數，結果卻是對齊到了螢幕像素點。顯示結果就能很清晰了。

再就是定義TreeViewItem的那三個狀態。

可以看出，這個Item是有兩個Border的，背景和內Border都是漸層色。

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>

上面的值都是用Paint.NET從Win32實現的TreeView的中手工取出的值，僅供參考。

最後最佳化完成的TreeViewItem的樣式如下所示。

不要看錯了，這個可是WPF的哦。完整的代碼可以從這裡下載到。