建站
咨詢
售后
建站咨詢
新聞中心
-.NET頻道向您推薦《讓你的代碼“炫”起來——WPF開發(fā)教程》專題。我們來看看Windows系統(tǒng)中的Aero風格的Tree是什么樣子的。
網(wǎng)站建設哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、小程序設計、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了內(nèi)蒙古免費建站歡迎大家使用！
上面這樣都是系統(tǒng)中非WPF實現(xiàn)的Tree。多數(shù)Item都有MouseOver，Selected和Selected and Focused三種附加狀態(tài)。
我們再來看看WPF中的TreeView在默認情況的是什么樣子的。
相信大家一眼就可以看出來，這明明就是XP風格的嘛。和Aero風格的Tree差距實在是太大了。而且問題很嚴重。下面列舉一二。
1. 收起的三角箭頭模糊。而且此模糊用SnapsToDevicePixel和UseLayoutRendering都無法解決。如下圖所示。
下面的那個就是WPF的默認風格。而間三角與文本之間的間距也不一樣。
2. TreeViewItem只有Selected的效果，而且是XP風格的。
3. WPF的TreeViewItem的三角在MouseOver時，只變色，而沒有發(fā)光效果。而Win32的是有發(fā)光效果的。
4. 展開的三角箭頭與收起的三角箭頭相比，水平位移過大。如下圖所示。
右邊是WPF的TreeView默認風格，與Win32的相差了將近兩個像素。
下面我們來解決問題1，2和3。
WPF的TreeViewItem默認的三角實現(xiàn)方式比較復雜。如下圖所示。
這個三角的Path可以描述為M0,0 L6,0 0,6Z。線寬為1個像素。這樣，垂直的那條線，雖然是一個像素寬，但是不與Device Pixel重合。結果就是左右各是半個像素寬。最終顯示在屏幕上了就成了兩個像素寬的，50%的灰色的線。肉眼看上去就是模糊了。
我也很奇怪為什么SnapsToDevicePixel和UseLayoutRedering 在這個問題上會失去效力。解決方案就是讓Path的Data也對齊到像素就可以。如下。
這個看上去都是用小數(shù)，結果卻是對齊到了屏幕像素點。顯示結果就能很清晰了。
再就是定義TreeViewItem的那三個狀態(tài)。
從圖中可以看出，這個Item是有兩個Border的，背景和內(nèi)Border都是漸變色。
|
Item State |
Element |
Brush |
|
Mouse Over |
Border |
#FFB8D6FB |
|
Inner Border |
|
|
|
Background |
|
|
|
Selected IsActive |
Border |
#FF84ACDD |
|
Inner Border |
|
|
|
Background |
|
|
|
Selected Not IsActive |
Border |
#FFDADADA |
|
Inner Border |
|
|
|
Background |
|
上面的值都是用Paint.NET從Win32實現(xiàn)的TreeView的截圖中手工取出的值，僅供參考。
最后優(yōu)化完成的TreeViewItem的樣式如下所示。不要看錯了，這個可是WPF的哦。
標題名稱：詳解如何打造Aero風格的TreeView
本文網(wǎng)址：http://m.5511xx.com/article/djeogje.html
