尽管在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>

运行该样式的效果如下图所示:
    
    
    
    
    好了,今天的内容就先到这里了。

本文转自 daizhenjun 51CTO博客,原文链接:http://blog.51cto.com/daizhj/128209,如需转载请自行联系原作者

使用Silverlight Toolkit TreeView(树形控件)相关推荐

  1. SharePoint2010沙盒解决方案基础开发——关于TreeView树形控件读取列表数据(树形导航)的webpart开发及问题...

    转:http://blog.csdn.net/miragesky2049/article/details/7204882 SharePoint2010沙盒解决方案基础开发--关于TreeView树形控 ...

  2. Silverlight toolkit 中ListPicker控件的用法【转】

    ListPicker控件,从外形上看有点像ComboBox,主要的功能也是可以在多个项目中来选择一个项目,如下图,在平常状态下,看到的是跟一般的文字框相同(如图1),而展开后就会出现项目列表(如图2) ...

  3. treeview控件怎么使用修改发育树_树形控件在生产力工具中的设计

    惊!半年实践血泪史,3000 字深度好文,一个爱树的设计师手把手教你如何设计「树 」! 树形控件是种常见的设计模式,几乎与图形化用户界面同时诞生,通过结构化的组织方式逐级展示内容,让整体信息架构一目了 ...

  4. Silverlight 数据显示和布局控件 示例

    数据显示控件 DataGrid DataGrid 是最基础的数据显示方式,也就是二维表格. <data:DataGrid Name="dataGrid1" Height=&q ...

  5. VS2019/MFC编程入门:树形控件Tree Control 下

    前面一节讲了树形控件Tree Control的简介.通知消息以及相关数据结构,本节继续讲下半部分,包括树形控件的创建.CTreeCtrl类的主要成员函数和应用实例.在内容开始前为大家介绍一款MFC界面 ...

  6. element-ui中el-tree树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...

    在element-ui的el-tree树形控件中默认获取选取当前选中id的方法是this.$refs.tree.getCheckedKeys(); 但是如果子节点不是全部选中的话,父节点算不选中. 由 ...

  7. vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用

    vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用 参考文章: (1)vue的$nextTi ...

  8. vue树形结构html,怎么在vue中利用递归组件实现一个树形控件

    怎么在vue中利用递归组件实现一个树形控件 发布时间:2021-06-11 17:26:48 来源:亿速云 阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...

  9. 树形控件CTreeCtrl的使用详解(一)

    树型视的三个结构TVINSERTSTRUCT.TVITEM.NMTREEVIEW TVINSERTSTRUCT 包含添加新项到树形视控件所使用的信息.这个结构被TVM_INSERTITEM消息使用.这 ...

最新文章

  1. c++ to_string用法
  2. 如何在Java中编写正确的微基准测试?
  3. 平面法向量,点云法向量估计及可视化
  4. JAVA中throw用法例子,Java Optional orElseThrow()用法及代码示例
  5. matlab中(1 )什么意思,matlab中area(1)什么意?mat – 手机爱问
  6. Linux内核进程管理基本概念-进程、运行队列、等待队列、进程切换、进程调度
  7. Python网络编程—TCP套接字之HTTP传输
  8. Difference of Deep linear/ no linear neural networks
  9. ALSA(二), makefile, Autotools, premake
  10. 第十章练习题----2
  11. 1109. 航班预订统计
  12. 用Java控制小电灯-树莓派PI4J
  13. shell_exec() php 执行shell脚本
  14. git 升级_git版本升级
  15. 专访Facebook HipHop作者、阿里研究员赵海平:生物与计算机交织的独特人生
  16. 用Python进行web开发需要学习什么?
  17. NYOJ - 小柯的编译器
  18. springboot + rabbitmq 做智能家居,我也没想到会这么简单
  19. 国际清算银行称:央行数字货币可能导致银行挤兑
  20. Python:实现GrabCut算法(附完整源码)

热门文章

  1. Windows上安装HADOOP单机伪分布式集群
  2. Android中measure过程、WRAP_CONTENT详解以及 xml布局文件解析流程浅析
  3. android开发 BaseAdapter中getView()里的3个参数是什么意思
  4. CBAC(基于内容的访问控制)
  5. Using-更精彩更有用的做法-短签名
  6. WEB前端开发的思考与感悟
  7. LINQ中的延迟查询特性
  8. Microsoft Operations Management Suite 集成 SCO
  9. python学习第一模块练习
  10. Java 蓝牙无线API 简介