对Wpf/Silverlight Template 进行了总结，本篇继续上一篇，主要是介绍 HierarchicalDataTemplate 的使用方法。HierarchicalDataTemplate 继承于DataTemplate，被称之为"层级式数据模板"，主要是应用层级比较明显数据集合，其典型的应用就是对TreeView控件进行数据绑定， 接下来就在Silverlight 5 下进行一下演示。最近有个卖凉茶的节目比较火，叫中国好声音，里面的导师和其歌手的分组就是个层级结构，我们暂且先用它来做个例子吧。

首先我们需要准备一下层级的数据集合，定义一个歌手类：

/// 
    /// 歌手类    /// 
 public class Singer { /// 
 /// 歌手编号 /// 
 public int SingerId { get; set; } /// 
 /// 歌手名称 /// 
 public string SingerName { get; set; } /// 
 /// 歌手头像 /// 
 public string SingerHeader { get; set; } }

 然后定义一个 导师类，导师类中有个属性就是歌手的集合，代码如下：

/// 
    /// 导师类    /// 
 public class Teacher { /// 
 /// 导师编号 /// 
 public int TeacherId { get; set; } /// 
 /// 导师名称 /// 
 public string TeacherName { get; set; } /// 
 /// 导师头像 /// 
 public string TeacherHeader { get; set; } /// 
 /// 学生列表 /// 
 public ObservableCollection
       
         SingerList { get; set; } }
       

 接下来用代码组织一个导师与歌手的层级数据集合：

/// 
    /// 好声音数据集合    /// 
 public class GoodVoice { public static ObservableCollection
       
         GoodVoiceData; static GoodVoice() { GoodVoiceData = new ObservableCollection
        
         (); GoodVoiceData.Add(new Teacher() { TeacherId = 1, TeacherName = "刘欢", TeacherHeader = @"Images/刘欢/刘欢.png", SingerList = new ObservableCollection
         
          () { new Singer(){ SingerId=1, SingerName="吉克隽逸",SingerHeader=@"Images/刘欢/吉克隽逸.png"}, new Singer(){ SingerId=2, SingerName="权振东",SingerHeader=@"Images/刘欢/权振东.png"}, new Singer(){ SingerId=3, SingerName="徐海星",SingerHeader=@"Images/刘欢/徐海星.png"}, new Singer(){ SingerId=4, SingerName="袁娅维",SingerHeader=@"Images/刘欢/袁娅维.png"}, } }); GoodVoiceData.Add(new Teacher() { TeacherId = 2, TeacherName = "那英", TeacherHeader = @"Images/那英/那英.png", SingerList = new ObservableCollection
          
           () { new Singer(){ SingerId=5, SingerName="张炜",SingerHeader=@"Images/那英/张炜.png"}, new Singer(){ SingerId=6, SingerName="梁博",SingerHeader=@"Images/那英/梁博.png"}, new Singer(){ SingerId=7, SingerName="张赫宣",SingerHeader=@"Images/那英/张赫宣.png"}, new Singer(){ SingerId=8, SingerName="多亮",SingerHeader=@"Images/那英/多亮.png"}, } }); GoodVoiceData.Add(new Teacher() { TeacherId = 3, TeacherName = "杨坤", TeacherHeader = @"Images/杨坤/杨坤.png", SingerList = new ObservableCollection
           
            () { new Singer(){ SingerId=9, SingerName="金志文",SingerHeader=@"Images/杨坤/金志文.png"}, new Singer(){ SingerId=10, SingerName="关喆",SingerHeader=@"Images/杨坤/关喆.png"}, new Singer(){ SingerId=11, SingerName="平安",SingerHeader=@"Images/杨坤/平安.png"}, new Singer(){ SingerId=12, SingerName="丁丁",SingerHeader=@"Images/杨坤/丁丁.png"}, } }); GoodVoiceData.Add(new Teacher() { TeacherId = 4, TeacherName = "庾澄庆", TeacherHeader = @"Images/庾澄庆/庾澄庆.png", SingerList = new ObservableCollection
            
             () { new Singer(){ SingerId=9, SingerName="金池",SingerHeader=@"Images/庾澄庆/金池.png"}, new Singer(){ SingerId=10, SingerName="王韵壹",SingerHeader=@"Images/庾澄庆/王韵壹.png"}, new Singer(){ SingerId=11, SingerName="吴莫愁",SingerHeader=@"Images/庾澄庆/吴莫愁.png"}, new Singer(){ SingerId=12, SingerName="大山",SingerHeader=@"Images/庾澄庆/大山.png"}, } }); } }
            
           
          
         
        
       

 有了数据集合，我们就可以在Xaml中编写我们的 HierarchicalDataTemplate 模版了，我们定义两个模版，一个TeacherTemplate 代表导师节点，一个SingerTemplate 代表歌手节点，并把TeacherTemplate中的ItemTemplate指定为SingerTemplate，具体代码如下： 

 在Silverlight下，需要在Xaml代码中添加如下命名空间：xmlns:common="clr-namespace:System.Windows;assembly=System.Windows.Controls" 

在此之后，在主界面MainPage.xaml 中添加一个TreeView控件，并给该控件增加一个根节点，命名为 RootItem，并把该根节点的ItemTemplate指定为我们刚刚编写的层级模版中的 TeacherTemplate：

 接下来，我们为该树控件的根节点RootItem绑定我们的数据集合就可以展现我们的树形控件了：

this.RootItem.ItemsSource = GoodVoice.GoodVoiceData;

 运行结果如下图：

其实在我们的实际开发项目中有些数据的层级结构是固定的，比如上面的例子，就固定了导师和歌手两个层级，固定的层级的话我们可以对每一层的样式方便的进行控制（直接在每层的模版中制作就可以）。但还有很多的时候，数据的层级是不固定的，我们也来进行一下简单的演示：

首先定义个TreeNode类，代表每层的数据模型：

public class TreeNode    {        /// 
        /// 节点名称 /// 
 public string NodeName { get; set; } /// 
 /// 节点图片 /// 
 public string NodeImage { get; set; } /// 
 /// 是否展开 /// 
 public bool IsOpen { get; set; } /// 
 /// 子节点 /// 
 public ObservableCollection
       
         ChildNode { get; set; } }
       

 同样用代码组织一个层级数据集合：

public class TreeNodeData    {        public static ObservableCollection
       
         TreeNodeList; static TreeNodeData() { TreeNodeList = new ObservableCollection
        
         (); //根节点 TreeNode RootNode = new TreeNode() { NodeName = "根节点", NodeImage = @"Images/Tree/Root.png", IsOpen = true, ChildNode = new ObservableCollection
         
          () }; //子节点A TreeNode Node_A = new TreeNode() { NodeName = "子节点A", NodeImage = @"Images/Tree/Node.png", IsOpen = false, ChildNode = new ObservableCollection
          
           () }; Node_A.ChildNode.Add(new TreeNode() { NodeName = "叶子节点A-1", NodeImage = @"Images/Tree/Leaf.png", IsOpen = false }); Node_A.ChildNode.Add(new TreeNode() { NodeName = "叶子节点A-2", NodeImage = @"Images/Tree/Leaf.png", IsOpen = false }); Node_A.ChildNode.Add(new TreeNode() { NodeName = "叶子节点A-3", NodeImage = @"Images/Tree/Leaf.png", IsOpen = false }); //子节点B TreeNode Node_B = new TreeNode() { NodeName = "子节点B", NodeImage = @"Images/Tree/Node.png", IsOpen = true, ChildNode = new ObservableCollection
           
            () }; Node_B.ChildNode.Add(new TreeNode() { NodeName = "叶子节点B-1", NodeImage = @"Images/Tree/Leaf.png", IsOpen = false }); Node_B.ChildNode.Add(new TreeNode() { NodeName = "叶子节点B-2", NodeImage = @"Images/Tree/Leaf.png", IsOpen = false }); //节点B 子节点B-3 TreeNode Node_B_3 = new TreeNode() { NodeName = "子节点B-3", NodeImage = @"Images/Tree/SubNode.png", IsOpen = false, ChildNode = new ObservableCollection
            
             () }; Node_B_3.ChildNode.Add(new TreeNode() { NodeName = "叶子节点B-3-1", NodeImage = @"Images/Tree/Leaf.png", IsOpen = false }); Node_B_3.ChildNode.Add(new TreeNode() { NodeName = "叶子节点B-3-2", NodeImage = @"Images/Tree/Leaf.png", IsOpen = false }); Node_B.ChildNode.Add(Node_B_3); RootNode.ChildNode.Add(Node_A); RootNode.ChildNode.Add(Node_B); TreeNodeList.Add(RootNode); } }
            
           
          
         
        
       

在Xaml中编写的层级模版：

在这里我们需要注意一个问题：我们在TreeNode类的时候定义个一个布尔值属性 IsOpen， 就是利用这个属性来控制我们这棵树的节点的展开闭合状态的：True 代表该节点展开，False 代表该节点闭合。如果不这么做我们对 TreeView控件进行绑定后，树的初始状态都是闭合的，但是这种方法仅限于WPF 和 Silverlight 5 ，Silverlight4 及以下版本是不灵滴，不知道是不是Silverlight的一个Bug。

 这里我们就利用了上一篇提到的TreeView的ItemContainerStyle属性，对TreeView中的所有TreeviewItem的IsExpander属性进行了绑定。

同样将我们的数据集合绑定到我们的这个TreeView控件上： 

this.MyTree.ItemsSource = TreeNodeData.TreeNodeList;

 由于我们在数据集合中对 根节点 和 子节点B 的IsOpen属性设置为了True，因此这两个节点是展开的，运行结果如下图：

至此，在Silverlight下利用HierarchicalDataTemplate 层级模版绑定TreeView控件的使用方式，演示完毕，至于如何获取TreeView 节点的数据，我们可以在TreeView控件中的SelectedItemChanged事件中进行获取，这里就不贴代码了，大家可以下载源码参看。

作者：

出处：

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利.