将实体绑定到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。