コントロールの一覧を表示しよう (VisualTreeHelperとLogicalTreeHelperの違い) その①

WPFでコントロールの一覧を表示しようとすると、
VisualTreeHelperとLogicalTreeHelperというクラスがありますが、
両者の違いは何があるのか。
サンプルソースを作成して検証してみます。

サンプルソース

一覧出力用ソース

    public class WPFControlUtility
    {

        /// <summary>
        /// Visaul要素を出力
        /// </summary>
        /// <param name="tgt"></param>
        public static void ShowVisualControls(DependencyObject tgt)
        {
            ShowVisualControl(tgt);
        }

        private static void ShowVisualControl(DependencyObject tgt, int position = 0)
        {
            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(tgt); i++)
            {
                DependencyObject childObj = VisualTreeHelper.GetChild(tgt, i);
                // ログ出力
                ShowLog(childObj, position);

                if (VisualTreeHelper.GetChildrenCount(childObj) > 0)
                {
                    int nextPosition = position + 1;
                    ShowVisualControl(childObj, nextPosition);
                }
            }
        }

        /// <summary>
        /// Logical要素を出力
        /// </summary>
        /// <param name="tgt"></param>
        public static void ShowLogicalControls(DependencyObject tgt)
        {
            ShowLogicalControl(tgt);
        }

        private static void ShowLogicalControl(DependencyObject tgt,int position = 0)
        {
            if (tgt == null) return;

            ShowLog(tgt, position);
            foreach(var ctl in LogicalTreeHelper.GetChildren(tgt))
            {
                if(ctl is DependencyObject)
                {
                    int nextPosition = position + 1;
                    ShowLogicalControl((DependencyObject)ctl, nextPosition);
                }
            }

        }


        /// <summary>
        /// コントロールの情報を出力
        /// </summary>
        /// <param name="tgt"></param>
        /// <param name="position"></param>
        private static void ShowLog(DependencyObject tgt, int position = 0)
        {
            string tab = null;
            string baseInfo = tgt.ToString();

            for (int i = 0; i < position; i ++)
            {
                tab += "\t";
            }

            // 下記情報を出力
            // 基本情報 : コンテンツ
            Debug.WriteLine(tab + baseInfo);
        }
    }

解析対象のサンプル画面

MainWindow.xaml

<Window x:Class="WpfSampleApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfSampleApplication"
        xmlns:PN="clr-namespace:PFW;assembly=PFW"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0">
            <PN:ChangePage x:Name="changePage" HorizontalAlignment="Center"/>
        </Grid>
        <Grid Grid.Row="1">
            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Width="429">
                <Button Content="国の天気情報" Height="20" Margin="10,0,0,0" Click="Button_Click"></Button>
                <Button Content="各市町村の天気情報 " Height="20" Margin="10,15,0,15" Click="Button_Click_1" />
            </StackPanel>
        </Grid>

    </Grid>
</Window>

ChangePage x:Name="changePage"については
カスタムコントロールを動的に切り替えて表示しています。
イメージとしては下記画像の上部です。
https://cl.ly/0N2n370M2j1p

ログ結果

では実際にログ出力させてみましょう。

ロジカル出力

WpfSampleApplication.MainWindow                                                 
    System.Windows.Controls.Grid                                                
        System.Windows.Controls.RowDefinition                                           
        System.Windows.Controls.RowDefinition                                           
        System.Windows.Controls.Grid                                            
            PFW.ChangePage                                      
                System.Windows.Controls.Grid                                    
                    System.Windows.Controls.UserControl                             
                        WpfSampleApplication.Samples.Cities.CitiesPage                          
                            System.Windows.Controls.Grid                        
                                System.Windows.Controls.RowDefinition                   
                                System.Windows.Controls.RowDefinition                   
                                System.Windows.Controls.Grid                    
                                    System.Windows.Controls.RowDefinition               
                                    System.Windows.Controls.RowDefinition               
                                    System.Windows.Controls.StackPanel              
                                        PFW.PNLabel: 国            
                                        PFW.PNTextBox           
                                    PFW.PNDataGrid Items.Count:0                
                                System.Windows.Controls.Grid                    
                                    System.Windows.Controls.StackPanel              
                                        PFW.PNButton: 確定            
        System.Windows.Controls.Grid                                            
            System.Windows.Controls.StackPanel                                      
                System.Windows.Controls.Button: 国の天気情報                                  
                System.Windows.Controls.Button: 各市町村の天気情報                                     

ビジュアル出力

System.Windows.Controls.Border                                                  
    System.Windows.Documents.AdornerDecorator                                               
        System.Windows.Controls.ContentPresenter                                            
            System.Windows.Controls.Grid                                        
                System.Windows.Controls.Grid                                    
                    PFW.ChangePage                              
                        System.Windows.Controls.Border                          
                            System.Windows.Controls.ContentPresenter                        
                                System.Windows.Controls.Grid                    
                                    System.Windows.Controls.UserControl             
                                        System.Windows.Controls.Border          
                                            System.Windows.Controls.ContentPresenter        
                System.Windows.Controls.Grid                                    
                    System.Windows.Controls.StackPanel                              
                        System.Windows.Controls.Button: 国の天気情報                          
                            System.Windows.Controls.Border                      
                                System.Windows.Controls.ContentPresenter                    
                                    System.Windows.Controls.TextBlock               
                        System.Windows.Controls.Button: 各市町村の天気情報                             
                            System.Windows.Controls.Border                      
                                System.Windows.Controls.ContentPresenter                    
                                    System.Windows.Controls.TextBlock               
        System.Windows.Documents.AdornerLayer                                           

VisualTreeHelperとLogicalTreeHelperの違い

両者の大まかな違いとしては
・LogicalTreeHelperはXAMLで定義された内容(論理ツリー)が表示
・VisualTreeHelperはコントロールの内部情報(ビジュアルツリー)まで表示
のようです。

一見VisualTreeHelperの情報量が多く感じられますが、
XAMLで定義されたカスタムパーツ(ChangePage)の内容までは表示されていません。
LogicalTreeHelperではカスタムパーツの論理ツリーまで表示されています。
ただしこちらは各パーツの子要素までは表示されません。

このあたりの違いを次の記事でもう少し踏み込んで解析したいと思います。
また、目的によってVisualTreeHelperとLogicalTreeHelperの両方を組み合わせるパターンも触れようと思います。