分享基於silverlight的一個“樹形結構圖”控件

本文轉載自查看原文 2012-07-08 12:19 3992 EasySL/ EF/ MVVM/ 源代碼/ Code First/ silverlight

傳統的樹形菜單只適用於展示，本控件提供了一個可視化的組織圖展示，並實現了一個對樹形圖的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 >

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;

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;

                };
            };
        }

4. 源代碼下載

https://199.47.216.171/u/10032723/EasyOA.rar

5. 預覽

http://rapidsl2.guozili.25u.com/ (admin/admin 點左邊菜單控件展示 - 組織樹形圖)

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 GoJS組織結構圖 linux ----Inode的結構圖架構組織結構圖 GoJS組織結構圖2 3-2 項目整體結構圖介紹 flutter框架結構圖 Resnet34結構圖 JAVA項目分層結構圖系統的軟件結構圖【caffe】繪制網絡結構圖