WPF学习（4）逻辑树和可视树

前面几节说了一些WPF的基础，包括XAML和布局等。在接下来的几节，我们来说说WPF的核心概念，包括逻辑树和可视树、依赖对象和依赖属性、路由事件、命令这几个部分。本节介绍下逻辑树（Logical Tree）和可视树（Visual Tree）。

逻辑树和可视树

 在WPF中，用户界面是由XAML来呈现的。粗略地讲，从宏观上看，叶子为布局组件和控件所组成的树既是逻辑树，从微观上看，将逻辑树的叶子再放大可看到其内部是由可视化组件（继承自Visual类）组成的，叶子为这些可视化组件组成的树既是可视树。

逻辑树

举个例子来说明：

<Window x:Class="WpfTreeDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
            <RowDefinition Height="100" />
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>
        <TabControl>
            <TabItem Header="第一页">
                <TextBlock Text="This is first page" />
            </TabItem>
            <TabItem Header="第二页">
                <TextBox Text="This is second page" />
            </TabItem>
        </TabControl>
        <Button x:Name="btnOK" Grid.Row="1"  Width="80" Height="80" Click="btnOK_Click">
            <Button.Content>
                <Image Source="/Images/photo.png" x:Name="imgPhoto"/>
            </Button.Content>
        </Button>
        <ListView x:Name="lvStudents" Grid.Row="2">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Index" DisplayMemberBinding="{Binding Index}" />
                    <GridViewColumn Header="Username" DisplayMemberBinding="{Binding Username}" />
                    <GridViewColumn Header="Age" DisplayMemberBinding="{Binding Age}"/>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

 来看一下它的逻辑树：

层级感很强，这也正是XAML强大表现力的体现。如何来操作这棵树呢？最简单的方法当然是设置控件的name属性，然后在cs文件中根据name属性值来获取控件。WPF内置了一个LogicalTreeHelper类，我们可以通过它来遍历树，代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections;
using Microsoft.Windows.Themes;
using System.Diagnostics;

namespace WpfTreeDemo
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            List<Student> students = new List<Student>
            {
                new Student{Index=1,Username="Jello",Age=22},
                new Student{Index=2,Username="Taffy",Age=21}
            };
            this.lvStudents.ItemsSource = students;
            PrintLogicalTree(0, this);

        }
private void btnOK_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("I am a button");
        }
        public void PrintLogicalTree(int depth, object obj)
        {
            Debug.WriteLine(new string(' ', depth) + obj);
            if (!(obj is DependencyObject)) return;
            foreach (var child in LogicalTreeHelper.GetChildren(obj as DependencyObject))
            {
                PrintLogicalTree(depth + 1, child);
            }
        }
    }
    public class Student
    {
        public int Index { get; set; }
        public string Username { get; set; }
        public int Age { get; set; }
    }
}

Debug运行后可以在Debug输出窗口看到界面的逻辑树。

 可视树

想要观察可视树，需要将控件“打碎”来看下，这里我们以TextBox为例，用Blend来“打碎”它，看看这个控件的内部结构：

<LinearGradientBrush x:Key="TextBoxBorder" EndPoint="0,20" MappingMode="Absolute" StartPoint="0,0">
            <GradientStop Color="#ABADB3" Offset="0.05"/>
            <GradientStop Color="#E2E3EA" Offset="0.07"/>
            <GradientStop Color="#E3E9EF" Offset="1"/>
        </LinearGradientBrush>
        <Style x:Key="TextBoxStyle1" BasedOn="{x:Null}" TargetType="{x:Type TextBox}">
            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
            <Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Padding" Value="1"/>
            <Setter Property="AllowDrop" Value="true"/>
            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
            <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Microsoft_Windows_Themes:ListBoxChrome x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true">
                            <ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                        </Microsoft_Windows_Themes:ListBoxChrome>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

主要是ListBoxChrome及ScrollViewer构成的，这也很好理解，将TextBox的功能拆分来看，ListBoxChrome主要可以用来输入，ScrollViewer用于当内容过多时会有滚动条。这里通过name属性一般是不能直接获取控件的，需要借助VisualTreeHelper类和Visual中的方法来获取。也举个例子：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections;
using Microsoft.Windows.Themes;
using System.Diagnostics;

namespace WpfTreeDemo
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            List<Student> students = new List<Student>
            {
                new Student{Index=1,Username="Jello",Age=22},
                new Student{Index=2,Username="Taffy",Age=21}
            };
            this.lvStudents.ItemsSource = students;
            PrintLogicalTree(0, this);

        }
        protected override void OnContentRendered(EventArgs e)
        {
            base.OnContentRendered(e);
            PrintVisualTree(0, this);
        }
        private void btnOK_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("I am a button");
        }
        public void PrintLogicalTree(int depth, object obj)
        {
            Debug.WriteLine(new string(' ', depth) + obj);
            if (!(obj is DependencyObject)) return;
            foreach (var child in LogicalTreeHelper.GetChildren(obj as DependencyObject))
            {
                PrintLogicalTree(depth + 1, child);
            }
        }
        public void PrintVisualTree(int depth, DependencyObject obj)
        {
            Debug.WriteLine(new string(' ', depth) + obj);
            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
            {
                PrintVisualTree(depth + 1, VisualTreeHelper.GetChild(obj, i));
            }
        }
    }
    public class Student
    {
        public int Index { get; set; }
        public string Username { get; set; }
        public int Age { get; set; }
    }
}

之所以在OnContentRendered中调用了一次是因为可视树直到Window完成至少一次布局后才会有节点，否则是空的，而实例化发生在布局完成之前（可以获取逻辑树），

OnContentRendered调用发生在布局完成之后（可以获取可视树）。

这里需要注意几点：

　　1.并不是所有的元素（无与生俱来的呈现行为）都会出现可视树中，只有继承自Visual类或者Visual3D类的元素才会包含其中。

　　2.逻辑树是静态的，而可视树是动态的（当用户切换Theme是会改变）。

　　3.一般情况下，我们不需要考虑可视树，除非要进行控件重塑。