這是項目中一個頁面上的一個功能。我們需要在界面上通過一個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。
4. 檢視效果