51CTO-.NET頻道向您推薦《讓你的代碼“炫”起來(lái)——WPF開(kāi)發(fā)教程》專題。我們來(lái)看看Windows系統(tǒng)中的Aero風(fēng)格的Tree是什么樣子的。

上面這樣都是系統(tǒng)中非WPF實(shí)現(xiàn)的Tree。多數(shù)Item都有MouseOver，Selected和Selected and Focused三種附加狀態(tài)。

我們?cè)賮?lái)看看WPF中的TreeView在默認(rèn)情況的是什么樣子的。

相信大家一眼就可以看出來(lái)，這明明就是XP風(fēng)格的嘛。和Aero風(fēng)格的Tree差距實(shí)在是太大了。而且問(wèn)題很嚴(yán)重。下面列舉一二。

1. 收起的三角箭頭模糊。而且此模糊用SnapsToDevicePixel和UseLayoutRendering都無(wú)法解決。如下圖所示。

下面的那個(gè)就是WPF的默認(rèn)風(fēng)格。而間三角與文本之間的間距也不一樣。

2. TreeViewItem只有Selected的效果，而且是XP風(fēng)格的。

3. WPF的TreeViewItem的三角在MouseOver時(shí)，只變色，而沒(méi)有發(fā)光效果。而Win32的是有發(fā)光效果的。

4. 展開(kāi)的三角箭頭與收起的三角箭頭相比，水平位移過(guò)大。如下圖所示。

右邊是WPF的TreeView默認(rèn)風(fēng)格，與Win32的相差了將近兩個(gè)像素。

下面我們來(lái)解決問(wèn)題1，2和3。

WPF的TreeViewItem默認(rèn)的三角實(shí)現(xiàn)方式比較復(fù)雜。如下圖所示。

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

我也很奇怪為什么SnapsToDevicePixel和UseLayoutRedering 在這個(gè)問(wèn)題上會(huì)失去效力。解決方案就是讓Path的Data也對(duì)齊到像素就可以。如下。

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

這個(gè)看上去都是用小數(shù)，結(jié)果卻是對(duì)齊到了屏幕像素點(diǎn)。顯示結(jié)果就能很清晰了。

再就是定義TreeViewItem的那三個(gè)狀態(tài)。

從圖中可以看出，這個(gè)Item是有兩個(gè)Border的，背景和內(nèi)Border都是漸變色。

上面的值都是用Paint.NET從Win32實(shí)現(xiàn)的TreeView的截圖中手工取出的值，僅供參考。

最后優(yōu)化完成的TreeViewItem的樣式如下所示。

不要看錯(cuò)了，這個(gè)可是WPF的哦。完整的代碼可以從http://files.cnblogs.com/nankezhishi/TreeView.Themes.Aero.zip下載到。

原文標(biāo)題：Aero風(fēng)格的TreeView

鏈接：http://www.cnblogs.com/nankezhishi/archive/2010/05/25/AeroTreeviewStyle.html

【編輯推薦】

1. 詳解TripleDES實(shí)現(xiàn)C# 加密操作
2. 淺析C# WinForm控件開(kāi)發(fā)前期準(zhǔn)備
3. 詳解C# WinForm自定義控件的使用和調(diào)試
4. C# Attribute的概念與使用淺析
5. C# AttributeUsage的使用淺析