WPF 的 TreeView 控制元件自帶的樣式如圖 1 的左邊所示，節點前的箭頭還不錯，但是選中效果實在是不給力，如果想更加華麗的話，那麼很有必要把 TreeView 的樣式好好自定義一番。我最後得到的結果如圖 1 的右邊所示，是一個 Win8 風格的 TreeView。

圖 1 TreeView 樣式對比

在 WPF 中，自定義控制元件的外觀是一件非常簡單的事情，但對於 TreeView 來說，最大的困難則在於如何做到節點的整行選擇。這是因為 TreeView 的項模板預設是如圖 2 所示的。

圖 2 TreeView 預設的項模板

最外層是一個三列兩行的 Grid，其中第一列用於放置 Expander（節點前的箭頭），剩下的列則放置 PART_Header（標頭內容）和子節點列表。因為子節點列表前空出了 Expander 那一列，所以 TreeView 的每層自然就有了縮排，同時也導致繪製邊框時，無法令邊框填滿整行——因為不知道當前節點之前有多少層縮排。雖然也有取巧的辦法，例如在繪製邊框時，令 Margin.Left 足夠小，但這僅適用於無邊框背景，在定義 Win8 樣式時不可用。

所以需要有一種辦法來計算出當前節點所在的層次（即深度）才可以。這裡提供了一個好辦法，即通過在視覺化樹中沿著 TreeViewItem 的父物件向上遍歷，從而得到 TreeViewItem 所在的深度，程式碼如下所示：

 1 public static int GetDepth(this TreeViewItem item) {
 2     int depth = 0;
 3     while ((item = item.GetAncestor<TreeViewItem>()) != null) {
 4         depth++;
 5     }
 6     return
 
 depth;
 7 }
 8 public static T GetAncestor<T>(this DependencyObject source)
 9     where T : DependencyObject {
10     do {
11         source = VisualTreeHelper.GetParent(source);
12     } while (source != null && !(source is T));
13     return source as T;
14 }

這裡需要使用 VisualTreeHelper.GetParent 方法來得到父物件，直接用 item.Parent 得到的會是 null。

得到了深度，接下來就將 TreeViewItem 的模板重新定義一下，如圖 3 所示。

圖 3 自定義的 TreeView 項模板

在自定義的模板中，所有節點都是使用 StackPanel 層疊排列的，所以此時是沒有層次關係的，Border 是可以整行顯示的。層次關係則是通過為 Grid 指定不同的 Margin.Left 來實現的，這就需要根據當前節點的深度，計算出需要縮排的距離。計算過程是利用 IValueConverter 來完成的：

1 <ControlTemplate.Resources>
2     <!-- 計算節點縮排的轉換器 -->
3     <cw:IndentConverter Indent="10" MarginLeft="5" x:Key="IndentConverter" />
4 </ControlTemplate.Resources>
5 <Grid Margin="{Binding Converter={StaticResource IndentConverter}, RelativeSource={RelativeSource TemplatedParent}}" />

 1 public sealed class IndentConverter : IValueConverter {
 2     public double Indent { get; set; }
 3     public double MarginLeft { get; set; }
 4     public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
 5         TreeViewItem item = value as TreeViewItem;
 6         if (item == null) {
 7             return new Thickness(0);
 8         }
 9         return new Thickness(this.MarginLeft + this.Indent * item.GetDepth(), 0, 0, 0);
10     }
11 }

這裡的縮排轉換器，我定義了兩個屬性：Indent 和 MarginLeft，這是因為我將縮排距離由 19 調整到了 12，這樣會使樹更好看點，但會導致根節點距離左邊框過近，所以就加入了 MarginLeft，使得根節點離左邊框更遠些，如圖 4 所示。

圖 4 縮排距離對比

最後，就是樣式的調整了。Win8 中的資源管理器樹狀列表的樣式如圖 5 所示，這個樣式與 Win7 差不多，但是沒有了漸變和圓角，實現起來要容易一些。需要注意的是被選中的節點，在滑鼠經過的時候是會改變顏色的（雖然不是很明顯），而且箭頭無論是展開還是收起狀態，在滑鼠經過的時候都會變成藍色。樣式的定義沒有什麼好說的，一些顏色也在下圖中標註出來了。

圖 5 Win8 中的資源管理器

Win8 資源管理器樹狀列表最華麗的一點是，當控制元件沒有焦點且滑鼠未經過的時候，所有箭頭是隱藏的，有焦點的時候才出現，可惜這個不知道該怎麼實現，只好先放下了。

所有的樣式定義我都放在了 \Resources\Win8Theme\TreeView.xaml 檔案中，這是一個資源字典，只要在需要的地方使用 <ResourceDictionary Source="Resources/Win8Theme/TreeView.xaml" /> 匯入資源字典，TreeView 控制元件就可以以 Win8 樣式顯示。完整的程式碼和示例可以在這裡下載。