分享基于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  点左边菜单 控件展示 - 组织树形图)