如何实现具有层次结构的 TreeView <三> (WPF/TreeView/Style/Template)

数据模板 (DataTemplate) 和数据绑定 (Data Binding)

为了把数据和界面进行关联，我们要做 3 件事:

1、在 MainWindow.xaml 中添加一个 TreeView 控件

<TreeView x:Name="tv">
</TreeView>

2、将数据绑定到 TreeView 控件上

在 WPF 中实现数据绑定的方法主要有2种: 在 XAML 中声明或在 Code 中指定。详细信息请参考 MSDN:

Windows Presentation Foundation 数据绑定 <一>

Windows Presentation Foundation 数据绑定 <二>

由于此处的 TreeView 顶层节点需要 ParentID 为 NULL 的数据，所以我采用了在 Code 中指定的方式。

/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        // 添加 MainWindow.Loaded 事件
        this.Loaded += new RoutedEventHandler(MainWindow_Loaded);
    }

    private void MainWindow_Loaded(object sender, RoutedEventArgs e)
    {
        // 在代码中为 TreeView 控件设置 ItemsSource 属性
        var dc = new CSDNBlogDataContext();
        var items = dc.Departments.Where(item => item.ParentID == null);
        tv.ItemsSource = items.ToArray();
    }
}

关于 LINQ 请参考 MSDN:

LINQ 查询表达式 (C# 编程指南)

101 LINQ Samples

完成以上工作并运行程序，将看到类似下图中显示的界面:

从上面的图片可以看出，每一个 ListViewItem 都绑定了一个 Department 对象，由于我们尚未告诉 ListViewItem 如何显示 Department 对象的内容(即属性)，所以系统默认分配了一个 TextBlock 控件，并将 Department.ToString() 的信息给呈现了出来。那 Department 的对象内容该如何显示呢?

3、为 TreeView 控件添加数据模板 (DataTemplate)

数据模板 (DataTemplate 类) 用于描述数据对象的可视化结构。

打个比方，当前工程中用到的数据对象是 Department，而每个 Department 都拥有4个属性: DepartmentID、ParentID、Name 和 Type。当我们将每个 Department 与 TreeViewItem 进行关联(即数据绑定)之后，我们应该告诉 TreeViewItem 如何呈现与其关联的 Department 对象，简单理解就是如何显示 Department 的那4个属性。而 DataTemplate 就是用来定义这个结构的东东。

通常，描述数据对象的可视化结构，直接使用 DataTemplate 就可以了。但是当前工程中的 Department 是可以包含“子部门”的数据项，而且其深度未知。所以，此处使用的是 HierarchicalDataTemplate 类，即允许包含“子数据项”的 DataTemplate.

例如:

a、使用一个 TextBlock 对象，仅用于呈现与该 ListViewItem 关联的 Department 对象的 Name 属性

<TreeView.ItemTemplate>
    <HierarchicalDataTemplate ItemsSource="{Binding Path=Children}">
        <TextBlock Text="{Binding Path=Name}"/>
    </HierarchicalDataTemplate>
</TreeView.ItemTemplate>

b、稍微复杂一点的结构，呈现 Name(Type) 形式的2个属性。

<TreeView.ItemTemplate>
    <HierarchicalDataTemplate ItemsSource="{Binding Path=Children}">
        <!--<TextBlock Text="{Binding Path=Name}"/>-->
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Path=Name}"/>
            <TextBlock Text="("/>
            <TextBlock Text="{Binding Path=Type}"/>
            <TextBlock Text=")"/>
        </StackPanel>
    </HierarchicalDataTemplate>
</TreeView.ItemTemplate>

通过上面2个简单的示例，我们应该对 DataTemplate 是如何描述数据对象的可视化结构有了一个直观的了解。

接下来，将介绍如何实现文本的纵向显示，这里有个概念需要先说明下:

一个字符串 (String) 可以被看作是一个字符数组 (Char[])

根据这一特性，我们可以将一个字符串作为数据源绑定到某个支持 ItemsSource 或 IsItemsHost 属性的控件上。例如: 将 Name 属性指定给 StackPanel、Grid、ListBox 或者 ItemsControl 等对象。

同时，基于 WPF 的数据转换规则，该字符串中的每个 Char 对象都将被自动转换为 String 对象输出到用户界面。

根据上述特征，修改一下 DataTemplate 就能实现文本的纵向显示了:

<TreeView.ItemTemplate>
    <HierarchicalDataTemplate ItemsSource="{Binding Path=Children}">
        <!--<TextBlock Text="{Binding Path=Name}"/>-->
        <!--<StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Path=Name}"/>
            <TextBlock Text="("/>
            <TextBlock Text="{Binding Path=Type}"/>
            <TextBlock Text=")"/>
        </StackPanel>-->
        <ItemsControl ItemsSource="{Binding Path=Name}">
            <ItemsControl.Style>
                <Style TargetType="{x:Type ItemsControl}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ItemsControl}">
                                <Grid>
                                    <ItemsPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ItemsControl.Style>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock x:Name="block" RenderTransformOrigin="0.5,0.5" Text="{Binding}" TextAlignment="Center"/>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding}" Value="(">
                            <Setter TargetName="block" Property="RenderTransform">
                                <Setter.Value>
                                    <RotateTransform Angle="90"/>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding}" Value=")">
                            <Setter TargetName="block" Property="RenderTransform">
                                <Setter.Value>
                                    <RotateTransform Angle="90"/>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding}" Value="-">
                            <Setter TargetName="block" Property="RenderTransform">
                                <Setter.Value>
                                    <RotateTransform Angle="90"/>
                                </Setter.Value>
                            </Setter>
                        </DataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </HierarchicalDataTemplate>
</TreeView.ItemTemplate>

此时，数据绑定和数据模板定义已经完成。下一节将介绍:

1、如何布局 TreeView 控件，实现节点的横向排列 (从左到右，自上而下) 的视图。

2、为 TreeViewItem 设置控件模板 (ControlTemplate) 和触发器 (Trigger)，令其在不同状态下呈现出不同的颜色、边框及背景等。