尽管在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下载,请点击这里:) |
|