WPF TreeView 三层绑定模板

在WPF应用程序中，使用TreeView来展示三层数据结构是一个常见的需求。为此，你需要定义适当的数据绑定和模板。以下是一个完整的示例代码，展示如何实现这一点。

数据模型

首先，我们需要定义三层数据模型。假设我们有三层数据结构：RootItem包含ChildItem，ChildItem又包含SubChildItem。

public class SubChildItem
{
    public string Name { get; set; }
}

public class ChildItem
{
    public string Name { get; set; }
    public ObservableCollection<SubChildItem> SubChildItems { get; set; } = new ObservableCollection<SubChildItem>();
}

public class RootItem
{
    public string Name { get; set; }
    public ObservableCollection<ChildItem> ChildItems { get; set; } = new ObservableCollection<ChildItem>();
}

视图模型

接下来，我们定义一个视图模型来供TreeView绑定使用。

public class MainViewModel
{
    public ObservableCollection<RootItem> RootItems { get; set; } = new ObservableCollection<RootItem>();

    public MainViewModel()
    {
        // 初始化数据
        var rootItem = new RootItem { Name = "Root 1" };
        var childItem = new ChildItem { Name = "Child 1" };
        var subChildItem = new SubChildItem { Name = "SubChild 1" };

        childItem.SubChildItems.Add(subChildItem);
        rootItem.ChildItems.Add(childItem);
        RootItems.Add(rootItem);
    }
}

XAML模板和绑定

为了展示三层数据结构，我们需要定义TreeView的HierarchicalDataTemplate。

<Window x:Class="WpfApp.TreeViewThreeLayers"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TreeViewThreeLayers" Height="350" Width="525">
    <Window.DataContext>
        <local:MainViewModel />
    </Window.DataContext>
    <Grid>
        <TreeView ItemsSource="{Binding RootItems}">
            <TreeView.Resources>
                <!-- 数据层次模板 SubChildItem -->
                <HierarchicalDataTemplate DataType="{x:Type local:SubChildItem}" ItemsSource="{Binding}">
                    <TextBlock Text="{Binding Name}" />
                </HierarchicalDataTemplate>
                
                <!-- 数据层次模板 ChildItem -->
                <HierarchicalDataTemplate DataType="{x:Type local:ChildItem}" ItemsSource="{Binding SubChildItems}">
                    <TextBlock Text="{Binding Name}" />
                </HierarchicalDataTemplate>

                <!-- 数据层次模板 RootItem -->
                <HierarchicalDataTemplate DataType="{x:Type local:RootItem}" ItemsSource="{Binding ChildItems}">
                    <TextBlock Text="{Binding Name}" />
                </HierarchicalDataTemplate>
            </TreeView.Resources>
        </TreeView>
    </Grid>
</Window>

代码解释

1. 数据模型：

   • SubChildItem、ChildItem和RootItem定义了三层数据结构。
   • 每个类包含一个ObservableCollection属性，用于包含下一层的数据。

2. 视图模型：

   • MainViewModel包含一个ObservableCollection<RootItem>，保存根数据。
   • 构造函数用于初始化示例数据。

3. XAML模板和绑定：

   • TreeView直接绑定到MainViewModel的RootItems。
   • 使用HierarchicalDataTemplate定义每个数据层次的模板。
   • ItemsSource属性指定绑定到下一层的数据集合。
   • DataContext直接绑定到主窗口的MainViewModel。

这样，你就可以在TreeView中展示三层嵌套的数据结构了。每一层的数据会按照你定义的模板展示，并且会自动展开包含下一层的数据。