详解Silverlight Treeview的HierarchicalDataTemplate使用

来源：互联网发布：CK网站源码编辑：程序博客网时间：2024/05/18 03:02

详解Silverlight Treeview的HierarchicalDataTemplate使用 2009-12-15 05:16:58

标签：silverlighttreeviewHierarchicalDataTemplate

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。http://kevinfan.blog.51cto.com/1037293/243767

在Silverlight项目中，Treeview控件是比较常用的表示层次或者等级的控件，该控件可以非常清晰的显示数据之间的隶属关系。对于Treeview控件的基本使用已经有很多文章介绍，这里我想讲解一下Silverlight Treeivew的HierarchicalDataTemplate的使用方法。

HierarchicalDataTemplate可以叫做"层级式数据模板"，主要是应用层级比较明显数据集合。下面我来一步步演示HierarchicalDataTemplate在Silverlight treeview中的使用方法。在演示中，我将引用另外一个Silverlight控件ListBox进行对比，因为，Treeview和Listbox都属于Itemscontrol，

所以有很多类似相同之处，通过对比能够帮助大家记忆以及使用该控件。

首先建立一个空的项目，

在MainPage页面中建立一个ListBox，在Xaml中写入代码，

运行后会显示:

在上面代码基础上，我们可以添加一个ItemTemplate，对数据进行绑定。

1 <UserControl x:Class="TreeviewDemo.MainPage"
2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6     xmlns:sys="clr-namespace:System;assembly=mscorlib"
7     mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
8   <Grid x:Name="LayoutRoot">
9         <ListBox>
10             <ListBox.ItemTemplate>
11                 <DataTemplate>
12                     <TextBlock Foreground="Blue" Text="{Binding}" />
13                 </DataTemplate>
14             </ListBox.ItemTemplate>
15             <sys:String>树型演示1</sys:String>
16             <sys:String>树型演示2</sys:String>
17             <sys:String>树型演示3</sys:String>
18             <sys:String>树型演示4</sys:String>
19             <sys:String>树型演示5</sys:String>
20         </ListBox>
21     </Grid>
22 </UserControl>
23

运行结果如下：

这里ListBox的选项都变成了蓝色。

就像我们前面所说的，ListBox是一个ItemsControl，任何ItemsControl都是相同的，可以将它们的内容包括到一个容器中。所以，我们可以再次重写上面代码：

1 <UserControl x:Class="TreeviewDemo.MainPage"
2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6     xmlns:sys="clr-namespace:System;assembly=mscorlib"
7     mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
8   <Grid x:Name="LayoutRoot">
9         <ListBox>
10
11
12             <ListBoxItem Content="树型演示1">
13                 <ListBoxItem.ContentTemplate>
14                     <DataTemplate x:Name="myTemplate">
15                         <TextBlock Foreground="Blue" Text="{Binding}" />
16                     </DataTemplate>
17                 </ListBoxItem.ContentTemplate>
18             </ListBoxItem>
19             <ListBoxItem Content="树型演示2" ContentTemplate="{Binding ElementName=myTemplate}" />
20             <ListBoxItem Content="树型演示3" ContentTemplate="{Binding ElementName=myTemplate}" />
21             <ListBoxItem Content="树型演示4" ContentTemplate="{Binding ElementName=myTemplate}" />
22             <ListBoxItem Content="树型演示5" ContentTemplate="{Binding ElementName=myTemplate}" />
23         </ListBox>
24     </Grid>
25 </UserControl>
26

在上面的代码中，ListBox中创建五个ListBoxItem，ListBoxItem的Content属性绑定着不同的选项，而ListBoxItem的ContentTemplate绑定着ListBox的ItemTemplate。

运行结果和上面的相同：

根据上面的基础，我们可以使用同样的概念来理解Silverlight Treeivew控件。

在使用Treeview控件前，需要添加引用，Treeview控件被装配在System.Windows.Controls下，另外在客户端页面需要添加命名空间如下：

xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

Treeview控件也是一个ItemsControl，同样，每次初始化，Treeview控件会为所属选项创建TreeViewItem。如果我们使用和ListBox同样的代码，可以得到下面结果，

运行结果：

同样，也可以添加ItemTemplate到Treeview控件，

1 <UserControl x:Class="TreeviewDemo.MainPage"
2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6     xmlns:sys="clr-namespace:System;assembly=mscorlib"
7     xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
8     mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
9   <Grid x:Name="LayoutRoot">
10         <Controls:TreeView>
11             <Controls:TreeView.ItemTemplate>
12                     <DataTemplate>
13                         <TextBlock Foreground="Green" Text="{Binding}" />
14                     </DataTemplate>
15             </Controls:TreeView.ItemTemplate>
16             <sys:String>树型演示1</sys:String>
17             <sys:String>树型演示2</sys:String>
18             <sys:String>树型演示3</sys:String>
19         </Controls:TreeView>
20     </Grid>
21 </UserControl>
22

运行结果:

从上面，我们可以看出，ListBox和Treeview有很多相似之处，在一些情况下基本可以替换使用，但是，这两个控件也有明显的区别。TreeView控件在建立选项的时候，使用的是TreeViewItem类，而TreeViewItem是HeaderedItemsControl(详细定义可以查看MSDNhttp://msdn.microsoft.com/en-us/library/system.windows.controls.treeviewitem(VS.95).aspx），作为HeaderedItemsControl，可以将控件选项内容赋值到Header或者HeaderTemplate属性中。这里，我们可以简单的理解，HeaderedItemsControl的Header/HeaderTemplate和ContentControl的Content/ContentTemplate功能是相同的，都是呈现内容的载体。所以，在ListBox中，选项是被绑定到ListBoxItem的content属性中，而在Treeview控件中，选项是被绑定到TreeViewItem的Header属性中。同样，TreeView的ItemTemplate绑定也可以使用TreeviewItem的HeaderTemplate属性进行绑定，结果是相同的。根据上面所述，可以得到下面的代码：

1 <UserControl x:Class="TreeviewDemo.MainPage"
2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6     xmlns:sys="clr-namespace:System;assembly=mscorlib"
7     xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
8     mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
9   <Grid x:Name="LayoutRoot">
10         <Controls:TreeView>
11             <Controls:TreeViewItem Header="树型演示1">
12                 <Controls:TreeViewItem.HeaderTemplate>
13                     <DataTemplate x:Name="myTemplate">
14                         <TextBlock Foreground="Green" Text="{Binding}" />
15                     </DataTemplate>
16                 </Controls:TreeViewItem.HeaderTemplate>
17             </Controls:TreeViewItem>
18             <Controls:TreeViewItem Header="树型演示2" HeaderTemplate="{Binding ElementName=myTemplate}" />
19             <Controls:TreeViewItem Header="树型演示3" HeaderTemplate="{Binding ElementName=myTemplate}" />
20         </Controls:TreeView>
21     </Grid>
22 </UserControl>
23

运行结果和上面相同：

相信通过上面的演示，大家已经基本理解ItemsControl的Template使用，根据上述，我们可以延伸到HierarchicalDataTemplate，使用HierarchicalDataTemplate我们需要建立一个例程数据类供TreeView调用。

1 public class Country
2     {
3         public Country()
4         {
5             Privinces = new ObservableCollection<Province>();
6         }
7
8         public string Name { get; set; }
9         public ObservableCollection<Province> Privinces { get; set; }
10     }
11
12 public class Province
13     {
14         public Province()
15         {
16             Citys = new ObservableCollection<City>();
17         }
18
19         public string Name { get; set; }
20         public ObservableCollection<City> Citys { get; set; }
21     }
22
23 public class City
24     {
25         public string Name { get; set; }
26     }

然后建立例程数据，代码如下：

代码

1 tvDemo.ItemsSource = new ObservableCollection<Country> {
2             new Country {
3                 Name = "中国",
4                 Privinces = { new Province
5                   {
6                     Name="山东省",
7                     Citys = {
8                         new City { Name = "济南市" },
9                         new City { Name= "淄博市" }
10                     }
11                   },
12                 new Province
13                   {
14                     Name="广东省",
15                     Citys = {
16                         new City { Name = "广州市" },
17                         new City { Name= "佛山市" }
18                     }
19                   }
20                }
21             },
22             new Country {
23                 Name = "加拿大",
24                 Privinces = { new Province
25                   {
26                     Name="哥伦比亚省",
27                     Citys = {
28                         new City { Name = "温哥华市" },
29                         new City { Name= "维多利亚市" }
30                     }
31                   },
32                 new Province
33                   {
34                     Name="阿尔伯塔省",
35                     Citys = {
36                         new City { Name = "埃德蒙顿市" },
37                         new City { Name= "卡尔加里市" }
38                     }
39                   }
40                }
41             }
42         };

首先我们使用TreeView的ItemTemplate来显示该数据树形结构，前台代码：

1         <Controls:TreeView x:Name="tvDemo">
2             <Controls:TreeView.ItemTemplate>
3                <DataTemplate>
4                         <TextBlock Text="{Binding Name}" />
5                </DataTemplate>
6             </Controls:TreeView.ItemTemplate>
7         </Controls:TreeView>

显示结果如下：

这里Treeview控件建立了两个TreeViewItems，并且绑定TreeViewitem的Header属性到Country对象，而且将TreeViewItem的HeaderTemplate设置为TreeView的ItemTemplate。下面，我们需要子数据同时绑定到Treeview控件中，这里我们需要使用HierarchicalDataTemplate。在使用HierarchicalDataTemplate前，需要声明新的命名空间：

xmlns:common="clr-namespace:System.Windows;assembly=System.Windows.Controls"

其实HierarchicalDataTemplate是一个带有多个扩展属性DataTemplate。如果我们不使用这些扩展属性，HierarchicalDataTemplate和普通DataTemplate是相同的，例如，我们修改上面代码：

1 <Controls:TreeView x:Name="tvDemo">
2             <Controls:TreeView.ItemTemplate>
3                 <common:HierarchicalDataTemplate>
4                     <TextBlock Text="{Binding Name}" />
5                 </common:HierarchicalDataTemplate>
6             </Controls:TreeView.ItemTemplate>
7 </Controls:TreeView>
8

显示结果和上面相同：

所谓HierarchicalDataTemplate的扩展属性，主要是ItemsSource和ItemTemplate两个属性。其中ItemsSource属性可以获取TreeView.ItemsSource的数据，ItemTemplate可以获取到TreeViewItem.ItemTemplate模板。根据这两个属性，我们可以修改以上代码，获取到子数据。通常来说，我们会把HierarchicalDataTemplate定义在Resource中，这样可以使代码布局整洁，另外提高易读性。

1     <UserControl.Resources>
2         <common:HierarchicalDataTemplate x:Key="CityTemplate">
3             <StackPanel>
4                 <TextBlock Text="{Binding Name}"/>
5             </StackPanel>
6         </common:HierarchicalDataTemplate>
7         <common:HierarchicalDataTemplate x:Key="ProvinceTemplate" ItemsSource="{Binding Citys}" ItemTemplate="{StaticResource CityTemplate}">
8             <StackPanel>
9                 <TextBlock Text="{Binding Name}" Foreground="Green"/>
10             </StackPanel>
11         </common:HierarchicalDataTemplate>
12         <common:HierarchicalDataTemplate x:Key="CountryTemplate" ItemsSource="{Binding Privinces}" ItemTemplate="{StaticResource ProvinceTemplate}">
13             <TextBlock Text="{Binding Name}" Foreground="Blue"/>
14         </common:HierarchicalDataTemplate>
15     </UserControl.Resources>

在Resource中设置完HierarchicalDataTemplate，在TreeView控件中调用ItemTemplate就可以了。

<Controls:TreeView x:Name="tvDemo" ItemTemplate="{StaticResource CountryTemplate}"></Controls:TreeView>

显示结果如下：

值得注意的是，在定义资源文件的时候，设置CityTemplate，ProvinceTemplate和CountryTemplate的顺序不能交换，否则无法查找到相关资源模板，同时，该资源文件也需要放在TreeView控件声明前，否则也是无法找到相关资源模板。

感谢银光中国网（SilverlightChina.Net) 提供空间发布代码和演示。

在线演示： http://silverlightchina.net/html/tips/2009/1211/391.html

源码下载： http://silverlightchina.net/uploads/soft/091211/1-091211164055.zip

本文出自 “专注Silverlight” 博客，请务必保留此出处http://kevinfan.blog.51cto.com/1037293/243767

左面的树采用的是用户控件中的TreeView,数据绑定完成后，在主页面还需要给此用户控件中的TreeView添加事件，来更新右面的面板

Silverlight之用户控件TreeView用法

Xaml代码：

            <sdk:TreeViewItem Header="系统功能定义" IsExpanded="True" Foreground="#15428b">
                <sdk:TreeViewItem Header="功能树" Foreground="Black" Tag="None"/>
                <sdk:TreeViewItem Header="操作类型定义" Foreground="Black" Tag="None"/>
                <sdk:TreeViewItem Header="功能类型定义" Foreground="Black" Tag="None"/>
            </sdk:TreeViewItem>

            <sdk:TreeViewItem Header="权限分配" IsExpanded="True" Foreground="#15428b">
                <sdk:TreeViewItem Header="功能权限分配" Foreground="Black" Tag="None"/>
                <sdk:TreeViewItem Header="数据权限分配" Foreground="Black" Tag="None"/>
            </sdk:TreeViewItem>

</sdk:TreeView>
</Grid>

使用Silverlight Toolkit TreeView树形控件

     尽管在Silverlight Toolkit中有相关的DEMO来演示如何使用TreeView控件，但其还是有一些功能没
被演示出来。因为在我们平时开发过程中，数据是被动态查询获取的（不是DEMO中的静态文件方式）。
因此今天就演示一下如何使用WCF来获取相应数据并使用TreeView来动态加载相应结点信息。

     首先，我们要创建一个WCF服务来获取相应的树形节点数据信息，如下：

public class ForumInfo
{
    public int ForumID { get; set; }
    public int ParendID { get; set; }
    public string ForumName { get; set; }
}

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class DateService
{

    [OperationContract]
    public List<ForumInfo> GetForumData()
    {
        List<ForumInfo> forumList = new List<ForumInfo>();
        forumList.Add(new ForumInfo() { ForumID = 1, ParendID = 0, ForumName = "笔记本版块"});
        forumList.Add(new ForumInfo() { ForumID = 2, ParendID = 0, ForumName = "台式机版块" });

        forumList.Add(new ForumInfo() { ForumID = 3, ParendID = 1, ForumName = "Dell笔记本" });
        forumList.Add(new ForumInfo() { ForumID = 4, ParendID = 1, ForumName = "IBM笔记本" });
        forumList.Add(new ForumInfo() { ForumID = 5, ParendID = 4, ForumName = "IBM-T系列" });
        forumList.Add(new ForumInfo() { ForumID = 6, ParendID = 4, ForumName = "IBM-R系列" });

        forumList.Add(new ForumInfo() { ForumID = 7, ParendID = 2, ForumName = "联想台式机" });
        forumList.Add(new ForumInfo() { ForumID = 8, ParendID = 2, ForumName = "方正台式机" });
        forumList.Add(new ForumInfo() { ForumID = 9, ParendID = 2, ForumName = "HP台式机" });
        forumList.Add(new ForumInfo() { ForumID = 10, ParendID = 7, ForumName = "联想家悦H系列" });
        forumList.Add(new ForumInfo() { ForumID = 11, ParendID = 7, ForumName = "联想IdeaCentre系列" });

        return forumList;
    }
}

复制代码

     从代码中可看出，ForumInfo是使用ParendID来记录父结点信息并以此来创建一个树形结构的，而方法：
GetForumData()即是演示了我们平时查询数据的过程。我们在Silverlight中添加对该服务的引用即可。

     我们在Silverlight中添加对Silverlight Toolkit相关DLL引用，然后向XAML文件上拖入一个TREEVIEW
控件。并将其命名为“TreeOfLife”，最后我们再放几个TextBlock来显示树形结点被点击后显示的相应的
ForumInfo信息。最后XAML中的内容如下所示：

<controls:TreeView x:Name="TreeOfLife" Margin="5" Grid.Column="0" Grid.Row="1"
          SelectedItemChanged="TreeOfLife_SelectedItemChanged" />

<Border BorderBrush="Gray" BorderThickness="1" Padding="8" Margin="8,0,0,0" Grid.Row="1" Grid.Column="1">
    <StackPanel x:Name="DetailsPanel" Margin="4">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="版块ID: " FontWeight="Bold"  />
            <TextBlock Text="{Binding ForumID}" />
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="版块名称: " FontWeight="Bold"  />
            <TextBlock Text="{Binding ForumName}" />
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="版块信息: " FontWeight="Bold" />
            <TextBlock x:Name="DetailText" TextWrapping="Wrap" Text="{Binding ForumName}"/>
        </StackPanel>
    </StackPanel>
</Border>

复制代码

下面是相应的XAML.CS文件中的内容，主要是使用递归方式遍历数据列表并创建相关的结点信息：

public partial class Page : UserControl
{
     DateServiceClient dataServiceClient = new DateServiceClient();

     ObservableCollection<ForumInfo> forumList = new ObservableCollection<ForumInfo>();

     public Page()
     {
         InitializeComponent();

         //此样式只添加在根结点上
         //TreeOfLife.ItemContainerStyle = this.Resources["RedItemStyle"] as Style;

         dataServiceClient.GetForumDataCompleted+=new EventHandler<GetForumDataCompletedEventArgs>(dataServiceClient_GetForumDataCompleted);
         dataServiceClient.GetForumDataAsync();
     }

     void dataServiceClient_GetForumDataCompleted(object sender, GetForumDataCompletedEventArgs e)
     {
         try
         {
             forumList = e.Result;
             AddTreeNode(0, null);
         }
         catch
         {
             throw new NotImplementedException();
         }
     }

     private void AddTreeNode(int parentID, TreeViewItem treeViewItem)
     {
         List<ForumInfo> result = (from forumInfo in forumList
                                   where forumInfo.ParendID == parentID
                                   select forumInfo).ToList<ForumInfo>();

         if (result.Count > 0)
         {
             foreach (ForumInfo foruminfo in result)
             {
                 TreeViewItem objTreeNode = new TreeViewItem();
                 objTreeNode.Header = foruminfo.ForumName;
                 objTreeNode.DataContext = foruminfo;

                 //此样式将会添加的所有叶子结点上
                 //objTreeNode.ItemContainerStyle = this.Resources["RedItemStyle"] as Style;

                 //添加根节点
                 if (treeViewItem == null)
                 {
                     TreeOfLife.Items.Add(objTreeNode);
                 }
                 else
                 {
                     treeViewItem.Items.Add(objTreeNode);
                 }
                 AddTreeNode(foruminfo.ForumID, objTreeNode);
             }
         }
     }

     private void TreeOfLife_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
     {
         TreeViewItem item = e.NewValue as TreeViewItem;
         ForumInfo fi = item.DataContext as ForumInfo;

         DetailsPanel.DataContext = fi;
     }
}

复制代码

    下面演示一下效果，如下图所示：

      当前TreeView控件还支持样式定义，比如可以给每个树形结点前添加CheckBox和一个小图标，这里我们使用下
面样式：

<UserControl.Resources>
        <Style x:Key="RedItemStyle" TargetType="controls:TreeViewItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <CheckBox />
                            <Image Source="image/default.png"/>
                            <TextBlock Text="{Binding}" Foreground="Red" FontStyle="Italic" />
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="IsExpanded" Value="True" />
        </Style>
</UserControl.Resources>

复制代码

    然后在cs文件中使用下面语句将该样式绑定到TreeView上：

TreeOfLife.ItemContainerStyle = this.Resources["RedItemStyle"] as Style;

    下面就是应用了该样式的运行效果：

当前TreeView中定义样式模版还可以使用ItemTemplate，下面是一段样式代码:

<controls:TreeView.ItemTemplate>
    <controls:HierarchicalDataTemplate ItemsSource="{Binding Subclasses}"
            ItemContainerStyle="{StaticResource ExpandedItemStyle}">
        <StackPanel>
            <TextBlock Text="{Binding Rank}" FontSize="8" FontStyle="Italic" Foreground="Gray" Margin="0 0 0 -5" />
            <TextBlock Text="{Binding Classification}" />
        </StackPanel>
    </controls:HierarchicalDataTemplate>
</controls:TreeView.ItemTemplate>

复制代码

    运行该样式的效果如下图所示：

    好了，今天的内容就先到这里了。

    DEMO下载，请点击这里:)


    原文链接:http://www.cnblogs.com/daizhj/archive/2009/01/08/1372088.html

    作者: daizhj, 代震军

    Tags: silverlight,treeview,树形,控件

    网址: http://daizhj.cnblogs.com/