Share a Silverlight-based "tree structure chart" Control

The traditional tree menu is only applicable for display. This control provides a visual Organization Chart display, and implements a crud drag-and-drop operation on the tree structure. It can be used for OA personnel maintenance or department relationship diagram.

 

1. To use this control, you only need to define the template of the root node:

< 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. Bind the data source

Branch branch = New Branch ();
Branch. Name = " Finance Department " ;

Branch. embranchment = New Observablecollection <branch> ()
{
New Branch () {name = " Finance Department 1 " },
New Branch () {name = " Finance Department 2 " },
New Branch () {name = " Finance Department 3 " }
};

Branch. appendbranch + =NewAction <branch> (branch_appendbranch );
This. Unallocatebranchnode. Branch = branch;

 

3. The core uses a general pull prototype.

Private Void Binddragevent ()
{
Bool Isdragging = False ;
Point lastposition = New Point ( 0 , 0 );

Popup rootpopup =NewPopup ();
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) =>
{< br> If (! Isdragging)
return ;

...
Matrixtransform Mt =NewMatrixtransform ();
Mt. Matrix = Rt. value;

Ghostcontainer. rendertransform = MT;

};
};
}

 

4.Source codeDownload

Https: // 199.47.216.171/u/10032723/easyoa.rar

 

5. Preview

 

Http://rapidsl2.guozili.25u.com/(admin/admin point left menu control display-organization tree chart)