尽管在Silverlight Toolkit中有相关的DEMO来演示如何使用TreeVIEw控件，但其还是有一些功能没
被演示出来。因为在我们平时开发过程中，数据是被动态查询获取的（不是DEMO中的静态文件方式）。
因此今天就演示一下如何使用WCF来获取相应数据并使用TreeVIEw来动态加载相应结点信息。
首先，我们要创建一个WCF服务来获取相应的树形节点数据信息，如下：
{
@H_403_14@public @H_403_14@int ForumID { @H_403_14@get ; @H_403_14@set ; }
@H_403_14@public @H_403_14@int ParendID { @H_403_14@get ; @H_403_14@set ; }
@H_403_14@public @H_403_14@string Forumname { @H_403_14@get ; @H_403_14@set ; }
}
[ServiceContract(namespace = "" )]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
@H_403_14@public @H_403_14@class DateService
{
[OperationContract]
@H_403_14@public List < ForumInfo > GetForumData()
{
List < ForumInfo > forumList = @H_403_14@new List < ForumInfo > ();
forumList.Add( @H_403_14@new ForumInfo() { ForumID = 1 , ParendID = 0 , Forumname = " 笔记本版块 " });
forumList.Add( @H_403_14@new ForumInfo() { ForumID = 2 , Forumname = " 台式机版块 " });
forumList.Add( @H_403_14@new ForumInfo() { ForumID = 3 , ParendID = 1 , Forumname = " Dell笔记本 " });
forumList.Add( @H_403_14@new ForumInfo() { ForumID = 4 , Forumname = " IBM笔记本 " });
forumList.Add( @H_403_14@new ForumInfo() { ForumID = 5 , ParendID = 4 , Forumname = " IBM-T系列 " });
forumList.Add( @H_403_14@new ForumInfo() { ForumID = 6 , Forumname = " IBM-R系列 " });
forumList.Add( @H_403_14@new ForumInfo() { ForumID = 7 , ParendID = 2 , Forumname = " 联想台式机 " });
forumList.Add( @H_403_14@new ForumInfo() { ForumID = 8 , Forumname = " 方正台式机 " });
forumList.Add( @H_403_14@new ForumInfo() { ForumID = 9 , Forumname = " HP台式机 " });
forumList.Add( @H_403_14@new ForumInfo() { ForumID = 10 , ParendID = 7 , Forumname = " 联想家悦H系列 " });
forumList.Add( @H_403_14@new ForumInfo() { ForumID = 11 , Forumname = " 联想IDeaCentre系列 " });
@H_403_14@return forumList;
}
}
从代码中可看出，ForumInfo是使用ParendID来记录父结点信息并以此来创建一个树形结构的，而方法：
GetForumData()即是演示了我们平时查询数据的过程。我们在Silverlight中添加对该服务的引用即可。
我们在Silverlight中添加对Silverlight Toolkit相关DLL引用，然后向XAML文件上拖入一个TREEVIEW
控件。并将其命名为“TreeOflife”，最后我们再放几个TextBlock来显示树形结点被点击后显示的相应的
ForumInfo信息。最后XAML中的内容如下所示：
selecteditemchanged @H_403_14@="TreeOflife_selecteditemchanged" @H_403_14@/>
@H_403_14@< border borderBrush @H_403_14@="Gray" borderThickness @H_403_14@="1" padding @H_403_14@="8" margin @H_403_14@="8,0" GrID.Row @H_403_14@="1" GrID.Column @H_403_14@="1" @H_403_14@>
@H_403_14@< StackPanel x:name @H_403_14@="DetailsPanel" margin @H_403_14@="4" @H_403_14@>
@H_403_14@< StackPanel OrIEntation @H_403_14@="Horizontal" @H_403_14@>
@H_403_14@< TextBlock Text @H_403_14@="版块ID: " FontWeight @H_403_14@="Bold" @H_403_14@/>
@H_403_14@< TextBlock Text @H_403_14@=" {Binding ForumID} @H_403_14@" @H_403_14@/>
@H_403_14@</ StackPanel @H_403_14@>
@H_403_14@< StackPanel OrIEntation @H_403_14@="Horizontal" @H_403_14@>
@H_403_14@< TextBlock Text @H_403_14@="版块名称: " FontWeight @H_403_14@="Bold" @H_403_14@/>
@H_403_14@< TextBlock Text @H_403_14@=" {Binding Forumname} @H_403_14@" @H_403_14@/>
@H_403_14@</ StackPanel @H_403_14@>
@H_403_14@< StackPanel OrIEntation @H_403_14@="Horizontal" @H_403_14@>
@H_403_14@< TextBlock Text @H_403_14@="版块信息: " FontWeight @H_403_14@="Bold" @H_403_14@/>
@H_403_14@< TextBlock x:name @H_403_14@="DetailText" textwrapPing @H_403_14@="Wrap" Text @H_403_14@=" {Binding Forumname} @H_403_14@" @H_403_14@/>
@H_403_14@</ StackPanel @H_403_14@>
@H_403_14@</ StackPanel @H_403_14@>
@H_403_14@</ border @H_403_14@>
下面是相应的XAML.CS文件中的内容，主要是使用递归方式遍历数据列表并创建相关的结点信息：
{
DateServiceClIEnt dataServiceClIEnt = @H_403_14@new DateServiceClIEnt();
ObservableCollection < ForumInfo > forumList = @H_403_14@new ObservableCollection < ForumInfo > ();
@H_403_14@public Page()
{
InitializeComponent();
// 此样式只添加在根结点上
// TreeOflife.ItemContainerStyle = this.Resources["RedItemStyle"] as Style;
dataServiceClIEnt.GetForumDataCompleted += @H_403_14@new EventHandler < GetForumDataCompletedEventArgs > (dataServiceClIEnt_GetForumDataCompleted);
dataServiceClIEnt.GetForumDataAsync();
}
@H_403_14@voID dataServiceClIEnt_GetForumDataCompleted( @H_403_14@object sender, GetForumDataCompletedEventArgs e)
{
@H_403_14@try
{
forumList = e.Result;
AddTreeNode( 0 , @H_403_14@null );
}
@H_403_14@catch
{
@H_403_14@throw @H_403_14@new NotImplementedException();
}
}
@H_403_14@private @H_403_14@voID AddTreeNode( @H_403_14@int parentID, TreeVIEwItem treeVIEwItem)
{
List < ForumInfo > result = (from forumInfo @H_403_14@in forumList
@H_403_14@where forumInfo.ParendID == parentID
select forumInfo).ToList < ForumInfo > ();
@H_403_14@if (result.Count > 0 )
{
@H_403_14@foreach (ForumInfo foruminfo @H_403_14@in result)
{
TreeVIEwItem objTreeNode = @H_403_14@new TreeVIEwItem();
objTreeNode.header = foruminfo.Forumname;
objTreeNode.DataContext = foruminfo;
// 此样式将会添加的所有叶子结点上
// objTreeNode.ItemContainerStyle = this.Resources["RedItemStyle"] as Style;
// 添加根节点
@H_403_14@if (treeVIEwItem == @H_403_14@null )
{
TreeOflife.Items.Add(objTreeNode);
}
@H_403_14@else
{
treeVIEwItem.Items.Add(objTreeNode);
}
AddTreeNode(foruminfo.ForumID, objTreeNode);
}
}
}
@H_403_14@private @H_403_14@voID TreeOflife_selecteditemchanged( @H_403_14@object sender, RoutedPropertyChangedEventArgs < @H_403_14@object > e)
{
TreeVIEwItem item = e.NewValue @H_403_14@as TreeVIEwItem;
ForumInfo fi = item.DataContext @H_403_14@as ForumInfo;
DetailsPanel.DataContext = fi;
}
}
下面演示一下效果，如下图所示：
当前TreeVIEw控件还支持样式定义，比如可以给每个树形结点前添加CheckBox和一个小图标，这里我们使用下
面样式：
@H_403_14@< UserControl.Resources @H_403_14@>
@H_403_14@< Style x:Key @H_403_14@="RedItemStyle" targettype @H_403_14@="controls:TreeVIEwItem" @H_403_14@>
@H_403_14@< Setter Property @H_403_14@="headerTemplate" @H_403_14@>
@H_403_14@< Setter.Value @H_403_14@>
@H_403_14@< DataTemplate @H_403_14@>
@H_403_14@< StackPanel OrIEntation @H_403_14@="Horizontal" @H_403_14@>
@H_403_14@< CheckBox @H_403_14@/>
@H_403_14@< Image Source @H_403_14@="image/default.png" @H_403_14@/>
@H_403_14@< TextBlock Text @H_403_14@=" {Binding} @H_403_14@" Foreground @H_403_14@="Red" FontStyle @H_403_14@="Italic" @H_403_14@/>
@H_403_14@</ StackPanel @H_403_14@>
@H_403_14@</ DataTemplate @H_403_14@>
@H_403_14@</ Setter.Value @H_403_14@>
@H_403_14@</ Setter @H_403_14@>
@H_403_14@< Setter Property @H_403_14@="IsExpanded" Value @H_403_14@="True" @H_403_14@/>
@H_403_14@</ Style @H_403_14@>
@H_403_14@</ UserControl.Resources @H_403_14@>
然后在cs文件中使用下面语句将该样式绑定到TreeVIEw上：
下面就是应用了该样式的运行效果：
当前TreeVIEw中定义样式模版还可以使用ItemTemplate，下面是一段样式代码:
@H_403_14@< controls:TreeVIEw.ItemTemplate @H_403_14@>@H_403_14@< controls:HIErarchicalDataTemplate ItemsSource @H_403_14@=" {Binding Subclasses} @H_403_14@"
ItemContainerStyle @H_403_14@=" {StaticResource ExpandedItemStyle} @H_403_14@" @H_403_14@>
@H_403_14@< StackPanel @H_403_14@>
@H_403_14@< TextBlock Text @H_403_14@=" {Binding Rank} @H_403_14@" FontSize @H_403_14@="8" FontStyle @H_403_14@="Italic" Foreground @H_403_14@="Gray" margin @H_403_14@="0 0 0 -5" @H_403_14@/>
@H_403_14@< TextBlock Text @H_403_14@=" {Binding Classification} @H_403_14@" @H_403_14@/>
@H_403_14@</ StackPanel @H_403_14@>
@H_403_14@</ controls:HIErarchicalDataTemplate @H_403_14@>
@H_403_14@</ controls:TreeVIEw.ItemTemplate @H_403_14@>
运行该样式的效果如下图所示：
好了，今天的内容就先到这里了。
DEMO下载，请点击这里:)
作者: daizhj,代震军
Tags: silverlight,treevIEw,树形,控件
网址: http://blog.csdn.net/daizhj 总结
以上是内存溢出为你收集整理的使用Silverlight Toolkit TreeView树形控件全部内容，希望文章能够帮你解决使用Silverlight Toolkit TreeView树形控件所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）