使用Silverlight Toolkit TreeView(树形控件)

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

     首先，我们要创建一个WCF服务来获取相应的树形节点数据信息，如下：
    
public   class  ForumInfo
{
     int  ForumID {  get ;  set ; }
      ParendID {  string  Forumname {  ; }
}

[ServiceContract(namespace  =   "" )]
[AspNetCompatibilityRequirements(RequirementsMode   AspNetCompatibilityRequirementsMode.Allowed)]
 DateService
{
 
    [OperationContract]
      List < ForumInfo >  GetForumData()
    {
        List  forumList  new ();
        forumList.Add(  ForumInfo() { ForumID  1 , ParendID  0 " 笔记本版块 " });
        forumList.Add( 2 台式机版块  });

        forumList.Add( 3 Dell笔记本  });
        forumList.Add( 4 IBM笔记本 5 IBM-T系列 6 IBM-R系列 7 联想台式机 8 方正台式机 9 HP台式机 10 联想家悦H系列 11 联想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  padding ="8" ="8,0" ="1" >
     StackPanel  ="DetailsPanel" ="4"
         OrIEntation ="Horizontal"
             TextBlock  Text ="版块ID: "  FontWeight ="Bold"    =" {Binding ForumID} " </ StackPanel ="版块名称: " {Binding Forumname} ="版块信息: " ="DetailText"  textwrapPing ="Wrap"  Text "
border >

     下面是相应的XAML.CS文件中的内容，主要是使用递归方式遍历数据列表并创建相关的结点信息：
     
partial  Page : UserControl
{
     DateServiceClIEnt dataServiceClIEnt   DateServiceClIEnt();

     ObservableCollection  ObservableCollection ();

       Page()
     {
         InitializeComponent();

          // 此样式只添加在根结点上
          TreeOflife.ItemContainerStyle = this.Resources["RedItemStyle"] as Style;               
         dataServiceClIEnt.GetForumDataCompleted +=  EventHandler GetForumDataCompletedEventArgs (dataServiceClIEnt_GetForumDataCompleted);
         dataServiceClIEnt.GetForumDataAsync();
     }

      voID  dataServiceClIEnt_GetForumDataCompleted( object  sender, GetForumDataCompletedEventArgs e)
     {
          try
         {
             forumList   e.Result;
             AddTreeNode( null );  
         }
          catch
         {
              throw  NotImplementedException();
         }
     }

      private  AddTreeNode(  parentID, TreeVIEwItem treeVIEwItem)
     {
         List  result   (from forumInfo  in  forumList
                                    where  forumInfo.ParendID  ==  parentID
                                   select forumInfo).ToList ();

          if  (result.Count  )
         {
              foreach  (ForumInfo foruminfo   result)
             {
                 TreeVIEwItem objTreeNode   TreeVIEwItem();
                 objTreeNode.header   foruminfo.Forumname;
                 objTreeNode.DataContext   foruminfo;

                  此样式将会添加的所有叶子结点上
                  objTreeNode.ItemContainerStyle = this.Resources["RedItemStyle"] as Style;
 
                  添加根节点                    (treeVIEwItem  )
                 {
                     TreeOflife.Items.Add(objTreeNode);
                 }
                  else
                 {                    
                     treeVIEwItem.Items.Add(objTreeNode);
                 }
                 AddTreeNode(foruminfo.ForumID, objTreeNode);
             }
         }
     }


       TreeOflife_selecteditemchanged(  e)
     {
         TreeVIEwItem item   e.NewValue  as  TreeVIEwItem;
         ForumInfo fi   item.DataContext   ForumInfo;

         DetailsPanel.DataContext   fi;
     }
}

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

    
    
      当前TreeVIEw控件还支持样式定义，比如可以给每个树形结点前添加CheckBox和一个小图标，这里我们使用下
面样式：
   
@H_672_502@ UserControl.Resources Style  x:Key ="RedItemStyle"  targettype ="controls:TreeVIEwItem" Setter  Property ="headerTemplate"
                 Setter.Value
                     DataTemplate
                        
                             CheckBox  Image  Source ="image/default.png" {Binding}  Foreground ="Red"  FontStyle ="Italic" Setter ="IsExpanded"  Value ="True" Style >     
    然后在cs文件中使用下面语句将该样式绑定到TreeVIEw上：
    
   
TreeOflife.ItemContainerStyle  this .Resources[ RedItemStyle ]   Style;
    
    下面就是应用了该样式的运行效果：
    
   

    
    当前TreeVIEw中定义样式模版还可以使用ItemTemplate，下面是一段样式代码:
controls:TreeVIEw.ItemTemplate controls:HIErarchicalDataTemplate  ItemsSource {Binding Subclasses}
            ItemContainerStyle {StaticResource ExpandedItemStyle} {Binding Rank}  FontSize ="0 0 0 -5" {Binding Classification} controls:HIErarchicalDataTemplate >

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

    
    
    好了，今天的内容就先到这里了。
    
    DEMO下载，请 点击这里:)
    
    
    原文链接: [url]http://daizhj.blog.51cto.com/285189/128209[/url]     作者: daizhj,代震军     Tags: silverlight,treevIEw,树形,控件          网址: [url]http://daizhj.blog.51cto.com/ [/url]     总结

以上是内存溢出为你收集整理的使用Silverlight Toolkit TreeView(树形控件)全部内容，希望文章能够帮你解决使用Silverlight Toolkit TreeView(树形控件)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。