在Silverlight中使用HierarchicalDataTemplate为TreeView实现递归树状结构

Posted 2020-06-17 liuyunfeng

将实体绑定到TreeView控件，实现树状结构的显示，如下图所示。这个功能通过HierarchicalDataTemplate实现。

 

1. 业务实体

作为举例，我定义了一个大家都很熟悉的Folder类型，即文件夹。我们都知道，文件夹又可以包含子文件夹，而且可以多层嵌套。所以，这是一个递归的结构体。

public class Folder

{

public string Name { get; set; }

public ObservableCollection<Folder> Folders { get; set; }

}

2. 准备数据

用下面的代码，模拟一个数据读取操作。下面是硬编码出来的数据。实际情况下，可以读取数据库。

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

var result = new[]{

new Folder(){Name="Test",Folders =new ObservableCollection<Folder>(

new[]{

new Folder(){Name="Test4"},

new Folder(){Name="Test3"},

new Folder(){Name="Test4",Folders=new ObservableCollection<Folder>(

new []{new Folder(){Name ="Test5"}})

}

})}};

 

tvFolders.ItemsSource = result;

}

3. 绑定控件

<UserControl x:Class="SilverlightTreeviewSample.MainPage"

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"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

 

<UserControl.Resources>

<sdk:HierarchicalDataTemplate x:Key="FolderItemTemplate" ItemsSource="{Binding Folders}">

<TextBlock Text="{Binding Name}"></TextBlock>

</sdk:HierarchicalDataTemplate>

<Style TargetType="sdk:TreeViewItem">

<Setter Property="IsExpanded" Value="True"></Setter>

</Style>

 

</UserControl.Resources>

 

<Grid x:Name="LayoutRoot" Background="White">

<sdk:TreeView Name="tvFolders" ItemTemplate="{StaticResource FolderItemTemplate}">

 

</sdk:TreeView>

</Grid>

</UserControl>

请注意，我们这里用到一个特殊的DataTemplate：HierarchicalDataTemplate，并且将其设置为Treeview的ItemTemplate。