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

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

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

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

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

2. 然后绑定数据源

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

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

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

Java结构图虚拟机

2020-05-06 15:59:07

JavaScript程序员技术

2012-02-02 16:37:51

Silverlight常用控件

2011-07-05 08:56:43

JavaScript

2022-08-04 13:58:54

SeabornFacetGrid代码

2010-07-05 12:37:29

用Visio画UML图

2015-01-08 09:37:54

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

2009-03-05 11:40:31

ListBox开发Silverlight

2012-03-13 14:06:39

JavaJ2EE

2009-12-30 13:30:16

Silverlight

2009-04-13 10:52:59

网络拓扑摩卡网络

2009-08-19 14:15:42

C# 复合控件

2010-07-05 14:48:25

UML静态结构图

2009-09-27 13:57:19

Hibernate树形

2009-12-30 13:51:43

Silverlight

2010-01-04 14:49:30

Silverlight

2010-07-05 15:01:21

UML静态结构图

2010-08-06 11:14:35

SilverlightWindows PhoWindows Pho

2010-07-12 10:57:59

UML静态结构图

2010-07-05 13:08:42

用Visio画UML图
点赞
收藏

51CTO技术栈公众号