天天看點

在Silverlight中使用HierarchicalDataTemplate為TreeView實作遞歸樹狀結構

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

在Silverlight中使用HierarchicalDataTemplate為TreeView實作遞歸樹狀結構
在Silverlight中使用HierarchicalDataTemplate為TreeView實作遞歸樹狀結構