使用Silverlight Toolkit TreeView(树形控件)

2016-08-20 10:49:33来源:http://daizhj.blog.51cto.com/285189/128209作者:daizhenjun人点击


尽管在Silverlight Toolkit中有相关的DEMO来演示如何使用TreeView控件,但其还是有一些功能没被演示出来。因为在我们平时开发过程中,数据是被动态查询获取的(不是DEMO中的静态文件方式)。因此今天就演示一下如何使用WCF来获取相应数据并使用TreeView来动态加载相应结点信息。 首先,我们要创建一个WCF服务来获取相应的树形节点数据信息,如下:
publicclassForumInfo{publicintForumID{get;set;}publicintParendID{get;set;}publicstringForumName{get;set;}}[ServiceContract(Namespace="")][AspNetCompatibilityRequirements(RequirementsMode=AspNetCompatibilityRequirementsMode.Allowed)]publicclassDateService{[OperationContract]publicList<ForumInfo>GetForumData(){List<ForumInfo>forumList=newList<ForumInfo>();forumList.Add(newForumInfo(){ForumID=1,ParendID=0,ForumName="笔记本版块"});forumList.Add(newForumInfo(){ForumID=2,ParendID=0,ForumName="台式机版块"});forumList.Add(newForumInfo(){ForumID=3,ParendID=1,ForumName="Dell笔记本"});forumList.Add(newForumInfo(){ForumID=4,ParendID=1,ForumName="IBM笔记本"});forumList.Add(newForumInfo(){ForumID=5,ParendID=4,ForumName="IBM-T系列"});forumList.Add(newForumInfo(){ForumID=6,ParendID=4,ForumName="IBM-R系列"});forumList.Add(newForumInfo(){ForumID=7,ParendID=2,ForumName="联想台式机"});forumList.Add(newForumInfo(){ForumID=8,ParendID=2,ForumName="方正台式机"});forumList.Add(newForumInfo(){ForumID=9,ParendID=2,ForumName="HP台式机"});forumList.Add(newForumInfo(){ForumID=10,ParendID=7,ForumName="联想家悦H系列"});forumList.Add(newForumInfo(){ForumID=11,ParendID=7,ForumName="联想IdeaCentre系列"});returnforumList;}} 从代码中可看出,ForumInfo是使用ParendID来记录父结点信息并以此来创建一个树形结构的,而方法:GetForumData()即是演示了我们平时查询数据的过程。我们在Silverlight中添加对该服务的引用即可。 我们在Silverlight中添加对Silverlight Toolkit相关DLL引用,然后向XAML文件上拖入一个TREEVIEW控件。并将其命名为“TreeOfLife”,最后我们再放几个TextBlock来显示树形结点被点击后显示的相应的ForumInfo信息。最后XAML中的内容如下所示:
<controls:TreeViewx:Name="TreeOfLife"Margin="5"Grid.Column="0"Grid.Row="1"SelectedItemChanged="TreeOfLife_SelectedItemChanged"/><BorderBorderBrush="Gray"BorderThickness="1"Padding="8"Margin="8,0,0,0"Grid.Row="1"Grid.Column="1"><StackPanelx:Name="DetailsPanel"Margin="4"><StackPanelOrientation="Horizontal"><TextBlockText="版块ID:"FontWeight="Bold"/><TextBlockText="{BindingForumID}"/></StackPanel><StackPanelOrientation="Horizontal"><TextBlockText="版块名称:"FontWeight="Bold"/><TextBlockText="{BindingForumName}"/></StackPanel><StackPanelOrientation="Horizontal"><TextBlockText="版块信息:"FontWeight="Bold"/><TextBlockx:Name="DetailText"TextWrapping="Wrap"Text="{BindingForumName}"/></StackPanel></StackPanel></Border> 下面是相应的XAML.CS文件中的内容,主要是使用递归方式遍历数据列表并创建相关的结点信息:
publicpartialclassPage:UserControl{DateServiceClientdataServiceClient=newDateServiceClient();ObservableCollection<ForumInfo>forumList=newObservableCollection<ForumInfo>();publicPage(){InitializeComponent();//此样式只添加在根结点上//TreeOfLife.ItemContainerStyle=this.Resources["RedItemStyle"]asStyle;dataServiceClient.GetForumDataCompleted+=newEventHandler<GetForumDataCompletedEventArgs>(dataServiceClient_GetForumDataCompleted);dataServiceClient.GetForumDataAsync();}voiddataServiceClient_GetForumDataCompleted(objectsender,GetForumDataCompletedEventArgse){try{forumList=e.Result;AddTreeNode(0,null);}catch{thrownewNotImplementedException();}}privatevoidAddTreeNode(intparentID,TreeViewItemtreeViewItem){List<ForumInfo>result=(fromforumInfoinforumListwhereforumInfo.ParendID==parentIDselectforumInfo).ToList<ForumInfo>();if(result.Count>0){foreach(ForumInfoforuminfoinresult){TreeViewItemobjTreeNode=newTreeViewItem();objTreeNode.Header=foruminfo.ForumName;objTreeNode.DataContext=foruminfo;//此样式将会添加的所有叶子结点上//objTreeNode.ItemContainerStyle=this.Resources["RedItemStyle"]asStyle;//添加根节点if(treeViewItem==null){TreeOfLife.Items.Add(objTreeNode);}else{treeViewItem.Items.Add(objTreeNode);}AddTreeNode(foruminfo.ForumID,objTreeNode);}}}privatevoidTreeOfLife_SelectedItemChanged(objectsender,RoutedPropertyChangedEventArgs<object>e){TreeViewItemitem=e.NewValueasTreeViewItem;ForumInfofi=item.DataContextasForumInfo;DetailsPanel.DataContext=fi;}} 下面演示一下效果,如下图所示: 当前TreeView控件还支持样式定义,比如可以给每个树形结点前添加CheckBox和一个小图标,这里我们使用下面样式:
<UserControl.Resources><Stylex:Key="RedItemStyle"TargetType="controls:TreeViewItem"><SetterProperty="HeaderTemplate"><Setter.Value><DataTemplate><StackPanelOrientation="Horizontal"><CheckBox/><ImageSource="image/default.png"/><TextBlockText="{Binding}"Foreground="Red"FontStyle="Italic"/></StackPanel></DataTemplate></Setter.Value></Setter><SetterProperty="IsExpanded"Value="True"/></Style></UserControl.Resources> 然后在cs文件中使用下面语句将该样式绑定到TreeView上:
TreeOfLife.ItemContainerStyle=this.Resources["RedItemStyle"]asStyle; 下面就是应用了该样式的运行效果:
当前TreeView中定义样式模版还可以使用ItemTemplate,下面是一段样式代码:
<controls:TreeView.ItemTemplate><controls:HierarchicalDataTemplateItemsSource="{BindingSubclasses}"ItemContainerStyle="{StaticResourceExpandedItemStyle}"><StackPanel><TextBlockText="{BindingRank}"FontSize="8"FontStyle="Italic"Foreground="Gray"Margin="000-5"/><TextBlockText="{BindingClassification}"/></StackPanel></controls:HierarchicalDataTemplate></controls:TreeView.ItemTemplate> 运行该样式的效果如下图所示: 好了,今天的内容就先到这里了。 DEMO下载,请点击这里:) 原文链接:[url]http://daizhj.blog.51cto.com/285189/128209[/url] 作者: daizhj, 代震军 Tags: silverlight,treeview,树形,控件 网址: [url]http://daizhj.blog.51cto.com/[/url]

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台