[WPF自定義控制項庫]好用的VisualTreeExtensions

1. 前言

A long time ago in a galaxy far, far away....微軟在Silverlight Toolkit里提供了一個好用的VisualTreeExtensions，裡面提供了一些查找VisualTree的擴展方法。在那個時候(2009年)，VisualTreeExtensions對我來說正好是個很棒的Linq和擴展方法的示例代碼，比那時候我自己寫的FindChildByName之類的方法好用一萬倍，所以我印象深刻。而且因為很實用，所以我一直在用這個類(即使是在WPF中)，而這次我也把它添加到Kino.Wpf.Toolkit中，可以在 這裡 查看源碼。

2. VisualTreeExtensions的功能

public static class VisualTreeExtensions
{
    /// 獲取 visual tree 上的祖先元素
    public static IEnumerable<DependencyObject> GetVisualAncestors(this DependencyObject element) { }

    /// 獲取 visual tree 上的祖先元素及自身
    public static IEnumerable<DependencyObject> GetVisualAncestorsAndSelf(this DependencyObject element) { }

    /// 獲取 visual tree 上的子元素
    public static IEnumerable<DependencyObject> GetVisualChildren(this DependencyObject element) { }

    /// 獲取 visual tree 上的子元素及自身
    public static IEnumerable<DependencyObject> GetVisualChildrenAndSelf(this DependencyObject element) { }

    /// 獲取 visual tree 上的後代元素
    public static IEnumerable<DependencyObject> GetVisualDescendants(this DependencyObject element) { }


    /// 獲取 visual tree 上的後代元素及自身
    public static IEnumerable<DependencyObject> GetVisualDescendantsAndSelf(this DependencyObject element) { }

    /// 獲取 visual tree 上的同級別的兄弟元素
    public static IEnumerable<DependencyObject> GetVisualSiblings(this DependencyObject element) { }

    /// 獲取 visual tree 上的同級別的兄弟元素及自身.
    public static IEnumerable<DependencyObject> GetVisualSiblingsAndSelf(this DependencyObject element) { }
}

VisualTreeExtensions封裝了VisualTreeHelper並提供了各種查詢Visual Tree的方法，日常中我常用到的，在Wpf上也沒問題的就是以上的功能。使用代碼大致這樣:

foreach (var item in this.GetVisualDescendants().OfType<TextBlock>())
{
}

3.使用問題

VisualTreeExtensions雖然好用，但還是有些問題需要註意。

3.1 不要在OnApplyTemplate中使用

FrameworkElement在生成當前模板並構造Visual Tree時會調用OnApplyTemplate函數，但這時候最好不要使用VisualTreeExtensions去獲取Visual Tree中的元素。所謂的最好，是因為WPF、Silverlight、UWP控制項的生命周期有一些出入，我一時記不太清楚了，總之根據經驗運行這個函數的時候可能Visual Tree還沒有構建好，VisualTreeHelper獲取不到子元素。無論我的記憶是否出錯，正確的做法都是使用 GetTemplateChild 來獲取ControlTemplate中的元素。

3.2 深度優先還是廣度優先

<StackPanel Margin="8">
    <GroupBox Header="GroupBox" >
        <TextBox Margin="8" Text="FirstTextBox"/>
    </GroupBox>
    <TextBox Margin="8"
             Text="SecondTextBox" />
</StackPanel>

假設有如上的頁面，執行下麵這句代碼:

this.GetVisualDescendants().OfType<Control>().FirstOrDefault(c=>c.IsTabStop).Focus();

這段代碼的意思是找到此頁面第一個可以接受鍵盤焦點的控制項並讓它獲得焦點。直覺上FirstTextBox是這個頁面的第一個表單項，應該由它獲得焦點，但GetVisualDescendants的查找方法是廣度優先，因為SecondTextBox比FirstTextBox深了一層，所以SecondTextBox獲得了焦點。

3.3 Popup的問題

Popup沒有自己的Visual Tree，打開Popup的時候，它的Child和Window不在同一個Visual Tree中。以ComboBox為例，下麵是ComboBox的ControlTemplate中的主要結構:

<Grid Name="templateRoot"
      SnapsToDevicePixels="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"
                          Width="0" />
    </Grid.ColumnDefinitions>
    <Popup Name="PART_Popup" 
           AllowsTransparency="True"
           Margin="1"
           Placement="Bottom"
           Grid.ColumnSpan="2"
           PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}"
           IsOpen="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
        <theme:SystemDropShadowChrome x:Name="shadow"
                                      Color="Transparent"
                                      MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}"
                                      MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
           ...
        </theme:SystemDropShadowChrome>
    </Popup>
    <ToggleButton Name="toggleButton"/>
    <ContentPresenter Name="contentPresenter"/>
</Grid>

在實時可視化樹視圖中可以看到有兩個VisualTree，而Popup甚至不在裡面，只有一個叫PopupRoot的類。具體可參考 Popup 概述 這篇文檔。

不過ComboBox的Popup在邏輯樹中是存在的，如果ComboBoxItem想獲取ComboBox的VisualTree的祖先元素，可以配合邏輯樹查找。

3.4 查找根元素

GetVisualAncestors可以方便地查找各級祖先元素，一直查找到根元素，例如要找到根元素可以這樣使用：

element.GetVisualAncestors().Last()

但如果元素不在Popup中，別忘了直接使用GetWindow更快捷：

Window.GetWindow(element)

5. 其它方案

很多控制項庫都封裝了自己的查找VisualTree的工具類，下麵是一些常見控制項庫的方案：

• WindowsCommunityToolkit的VisualTree
• Extended WPF Toolkit的VisualTreeHelperEx
• MahApps.Metro的TreeHelper
• Modern UI for WPF (MUI)的VisualTreeHelperEx
• WinRT XAML Toolkit 的VisualTreeHelperExtensions

6. 結語

VisualTreeExtensions的代碼很簡單，我估計在UWP中也能使用，不過UWP已經在WindowsCommunityToolkit中提供了一個新的版本，只因為出於習慣，我還在使用Silverlight Toolkit的版本。而且Toolkit中的FindDescendantByName(this DependencyObject element, string name)讓我回憶起了我當年拋棄的FindChildByName，一點都不優雅。

延續VisualTreeExtensions的習慣，多年來我都把擴展方法寫在使用-Extensions尾碼命名的類里，不過我不記得有這方面的相關規範。

7. 參考

VisualTreeHelper Class (System.Windows.Media) _ Microsoft Docs

FrameworkElement.GetTemplateChild(String) Method (System.Windows) Microsoft Docs

Popup 概述 Microsoft Docs

8. 源碼

VisualTreeExtensions.cs at master · DinoChan_Kino.Toolkit.Wpf