基于silverlight一个“树形结构图”控件

开发 后端
传统的树形菜单只适用于展示,本控件提供了一个可视化的组织图展示,并实现了一个对树形图的CRUD拖拽操作,可用于OA的人员维护或是部门关系图。

传统的树形菜单只适用于展示,本控件提供了一个可视化的组织图展示,并实现了一个对树形图的CRUD拖拽操作,可用于OA的人员维护或是部门关系图。

1. 使用此控件只需要定义根节点的模板:

  1. <localControls:BranchNode Grid.Column="0" x:Name="unAllocateBranchNode" Margin="30"> 
  2.             <localControls:BranchNode.Template> 
  3.                 <ControlTemplate TargetType="localControls:BranchNode"> 
  4.                     <Grid x:Name="rootPanel" VerticalAlignment="Top" Height="{TemplateBinding Height}"> 
  5.                         <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" DataContext="{TemplateBinding Branch}"> 
  6.                             <Border x:Name="titlePanel" HorizontalAlignment="Stretch"  Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3" BorderThickness="1"> 
  7.                                 <Border.Resources> 
  8.                                     <SolidColorBrush x:Key="normalBorder" Color="#9fa8b7"/> 
  9.                                     <SolidColorBrush x:Key="hightlightBorder" Color="Red"/> 
  10.                                 </Border.Resources> 
  11.                                 <StackPanel> 
  12.                                     <StackPanel Orientation="Horizontal"> 
  13.                                         <ContentPresenter Content="{Binding Name}" VerticalAlignment="Center" Margin="5"/>                          
  14.                                     </StackPanel> 
  15.  
  16.                                     <ItemsControl ItemsSource="{Binding Embranchment}"> 
  17.                                         <ItemsControl.ItemsPanel> 
  18.                                             <ItemsPanelTemplate> 
  19.                                                 <StackPanel/> 
  20.                                             </ItemsPanelTemplate> 
  21.                                         </ItemsControl.ItemsPanel> 
  22.                                         <ItemsControl.ItemTemplate> 
  23.                                             <DataTemplate> 
  24.                                                 <localControls:BranchNode Branch="{Binding}" Margin="3"/> 
  25.                                             </DataTemplate> 
  26.                                         </ItemsControl.ItemTemplate> 
  27.                                     </ItemsControl> 
  28.  
  29.                                 </StackPanel> 
  30.  
  31.                             </Border> 
  32.                         </StackPanel> 
  33.                     </Grid> 
  34.                 </ControlTemplate> 
  35.             </localControls:BranchNode.Template> 
  36.         </localControls:BranchNode> 

2. 然后绑定数据源

  1. Branch branch = new Branch();  
  2.             branch.Name = "财务部";   
  3.             branch.Embranchment = new ObservableCollection<Branch>()  
  4.             {  
  5.                 new Branch(){Name="财务部1"},  
  6.                 new Branch(){Name="财务部2"},  
  7.                 new Branch(){Name="财务部3"}  
  8.             };  
  9.                
  10.             branch.AppendBranch += new Action<Branch>(branch_AppendBranch);  
  11.             this.unAllocateBranchNode.Branch = branch

3. 核心使用了通用的推拽原型

  1. private void BindDragEvent()  
  2.         {  
  3.             bool isDragging = false;  
  4.             Point lastPosition = new Point(0, 0);  
  5.  
  6.             Popup rootPopup = new Popup();  
  7.             BranchNode ghostContainer = null;  
  8.             Branch parentBranch = null;  
  9.             Border lastTitlePanel = null;  
  10.             ...  
  11.             this.titlePanel.MouseLeftButtonDown += (source, eventArgs) => 
  12.             {  
  13.                 this.IsHitTestVisible = false;  
  14.  
  15.                 isDragging = true;  
  16.                 lastPosition = eventArgs.GetPosition(null);  
  17.                 ...  
  18.                 ghostContainer.MouseLeftButtonUp += (s, e) => 
  19.                 {     
  20.                     rootPopup.Child = null;  
  21.                     ...  
  22.                     isDragging = false;  
  23.                     this.ReleaseMouseCapture();  
  24.                     this.IsHitTestVisible = true;  
  25.                 };  
  26.  
  27.                 ghostContainer.MouseMove += (s, e) => 
  28.                 {  
  29.                     if (!isDragging)  
  30.                         return;  
  31.  
  32.                     ...  
  33.                     MatrixTransform mt = new MatrixTransform();  
  34.                     mt.Matrix = rt.Value;  
  35.  
  36.                     ghostContainer.RenderTransform = mt;  
  37.  
  38.                 };  
  39.             };  
  40.         } 

4. 源代码下载: https://199.47.216.171/u/10032723/EasyOA.rar

5. 预览

http://rapidsl2.guozili.25u.com/  (admin/admin  点左边菜单 控件展示 - 组织树形图)

 

 

原文链接:http://www.cnblogs.com/guozili/archive/2012/07/08/2581422.html

责任编辑:张伟 来源: guozili的博客
相关推荐

2020-05-06 15:59:07

JavaScript程序员技术

2020-05-09 11:20:02

Java结构图虚拟机

2012-02-02 16:37:51

Silverlight常用控件

2022-08-04 13:58:54

SeabornFacetGrid代码

2011-07-05 08:56:43

JavaScript

2015-01-08 09:37:54

数据中心结构图机房结构图

2010-07-05 12:37:29

用Visio画UML图

2012-03-13 14:06:39

JavaJ2EE

2009-03-05 11:40:31

ListBox开发Silverlight

2009-04-13 10:52:59

网络拓扑摩卡网络

2009-08-19 14:15:42

C# 复合控件

2009-12-30 13:30:16

Silverlight

2010-07-05 15:01:21

UML静态结构图

2010-07-05 14:48:25

UML静态结构图

2009-09-27 13:57:19

Hibernate树形

2010-08-06 11:14:35

SilverlightWindows PhoWindows Pho

2010-01-04 14:49:30

Silverlight

2009-12-30 13:51:43

Silverlight

2010-07-05 13:08:42

用Visio画UML图

2010-07-12 10:57:59

UML静态结构图
点赞
收藏

51CTO技术栈公众号