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