WPFBlog

Turning a Treeview into an Org Chart (with Connectors!)

Styling a treeview to create an org chart has been done before.
Josh Smith did it like this
Miguel Saez did it like this.

Both use simple styles to transform a treeview to a horizontally laid out org chart. The only thing missing are connection lines between the nodes. In addition, both developers use a grid in the TreeViewItem control template to create the horizontal layout. This is fine, but I didn’t like having to specify the rows of the nodes and item presenters. Why? Cuz I’m lazy. I simplify things with a couple of StackPanels.

The Concept

Here’s what we’re aiming for:

The source code for this project is here: WPFBlog.Info.OrgChart Example Source Code

I’ll explain the key concepts regarding the source code but you’ll probably want to download it and have a look through it before we begin.

The general concept is as follows:

We style the treeview to create an org chart without connectors.
We subclass the treeview and override the OnRender routine.
We look for all the treeview items and then use some VisualTreeHelper hackery to find the visual element that represents a node, in this case a Border.
When we find the node element, we calculate it’s center Point.
We store all the Points in an internal tree data structure that mimicks the organizational structure of the logical tree but only contains Point information.
Then we walk the tree and draw connector lines from Parent to Child using a Pen object exposed as a dependency property.

The Data

Although you can tailor this example to use the data structure of your choosing, I use a simple hierarchical Node structure that can contain anything. Here’s what it looks like:

Using this structure I create a tree structure when the window is loaded and bind it to the window’s data context for later use by our treeview:

public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(Window1_Loaded);            
        }

void Window1_Loaded(object sender, RoutedEventArgs e)
        {
            //create some nodes
            Node root = new Node("Rodriguez Family");
            root.Children.Add(new Node("Parents"));
            root.Children.Add(new Node("Kids"));
            root.Children.Add(new Node("Pets"));
            root.Children[0].Children.Add(new Node("Roland"));
            root.Children[0].Children.Add(new Node("Geraldine"));
            root.Children[2].Children.Add(new Node("Roxy"));
            root.Children[2].Children.Add(new Node("Melbourne"));
            root.Children[2].Children.Add(new Node("Stinky"));
            root.Children[2].Children.Add(new Node("Fatty Bumba"));
            root.Children[1].Children.Add(new Node("Damian"));

//create a dummy root so we can bind to it's children and include our root node
            Node dummyRoot = new Node("dummy");
            dummyRoot.Children.Add(root);

//bind it to the window
            this.DataContext = dummyRoot.Children;
        }
    }

The TreeView Control

In order to draw connector lines we need to be able to inspect the data of our treeview and our treeview needs a Pen to be able to draw with. Note that this could be done outside of a standard treeview, but naturally encapsulating the logic within our own control means we get to reuse this anyplace we could use a standard treeview.

Our custom treeview class is defined like so:

public class OrgChartTreeView : TreeView
    {

#region ConnectorPen
        //dependency property removed for brevity, included in downloadable source code
        #endregion

protected override void OnRender(System.Windows.Media.DrawingContext drawingContext)
        {
            //this tree structure will hold the location points of each visual representation of our nodes
            Node _locationData = null;;

//we need to find all the TreeViewItem nodes' location data
            GetTreeViewItemLocations(this, ref _locationData);

//now we have the location data loaded 
            if (this.ConnectorPen != null && _locationData != null)
            {
                //if we have the data and a pen, we can now draw the connectors
                DrawConnections(this.ConnectorPen, drawingContext, _locationData);
            }

base.OnRender(drawingContext);
        }

private void DrawConnections(Pen Pen, System.Windows.Media.DrawingContext drawingContext, Node CurrentNode)
        {
            //now that we have a structure to hold all the location data, this is relatively simple

//this is the point data from the current node passed in
            Point parentCenter = (Point)CurrentNode.Data;

//now we just need the point data from each child
            foreach (Node item in CurrentNode.Children)
            {
                Point childCenter = (Point)item.Data;
                //and we can now draw a line from parent to child
                drawingContext.DrawLine(Pen, parentCenter, childCenter);

//recursivly do this for all children
                DrawConnections(Pen, drawingContext, item);
            }
        }

protected void GetTreeViewItemLocations(ItemsControl Parent, ref Node CurrentRoot)
        {
            //we need to look at all the item controls
            foreach (Object item in Parent.Items)
            {
                //and try and find each treeviewitem
                TreeViewItem currentParent = Parent.ItemContainerGenerator.ContainerFromItem(item) as TreeViewItem;
                if (currentParent != null)
                {
                    //when we've found one, we need to find the main visual underneath the content presenter
                    DependencyObject stackPanelchild = VisualTreeHelper.GetChild(currentParent, 0);
                    DependencyObject contentPresenterchild = VisualTreeHelper.GetChild(stackPanelchild, 0);
                    //here's our border representing our node, we should find a better way to find this element
                    FrameworkElement borderchild = VisualTreeHelper.GetChild(contentPresenterchild, 0) as FrameworkElement;

//now let's get the center point of this element
                    Point centerPoint = borderchild.TranslatePoint(new Point(borderchild.ActualWidth/2,borderchild.ActualHeight/2), this);

//we can set this point data to our internal structure of points
                    Node currentLocation = new Node();
                    if (CurrentRoot == null)
                    {
                        //this is the root node so let's create a new node to hold the data
                        CurrentRoot = new Node();
                        CurrentRoot.Data = centerPoint;
                        currentLocation = CurrentRoot;
                    }
                    else
                    {
                        //we can just add this to the children
                        currentLocation.Data = centerPoint;
                        CurrentRoot.Children.Add(currentLocation);
                    }
                    //recursivly search through the other children
                    GetTreeViewItemLocations(currentParent, ref currentLocation);
                }
            }
        }

}

The portion of our logic we’re concerned with is in the OnRender routine. We reuse our simple node structure to create an internal tree structure of Point data representing the center locations of all of our nodes that are the treeview’s items. We do this in the GetTreeViewItemLocations routine. Then we take our tree structure and use the DrawConnections routine to walk that tree, drawing a simple line between parent nodes and each of it’s children using a Pen passed in via a dependency property.
That’s it!

The XAML

This is the extent of our window’s XAML without resources which we’ll go over next:

Our hierarchical data template is a fairly straightforward representation of our Node class which looks like this:

In order to achieve a horizontal org chart like layout we style the TreeViewItem:

<Style TargetType="TreeViewItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TreeViewItem">
                        
                        <StackPanel Orientation="Vertical">
                            <ContentPresenter Name="PART_Header" ContentSource="Header" />
                            <ItemsPresenter />
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" IsItemsHost="True" />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>

<Pen x:Key="ConnectorPen" Brush="#FF9FE309" Thickness="2" />

We simply set the TreeViewItem’s ContentPresenter on top of the ItemsPresenter using a vertical StackPanel, then we layout the items horizontally in the ItemsPanelTemplate using a horizontal StackPanel. The only other item of importance is the Pen resource which is passed into the custom treeview declaration’s ConnectorPen dependency property without which you’d see the horizontal org chart but without the connector lines.

Conclusion

So that’s pretty much it. By no means would this be a complete control example. But using this logic is a good foundation for a more robust org chart control. Things to do would be to wrap this in a user control that calls InvalidateVisual() to redraw the tree when nodes are added/removed or the parent container is resized or scrolled. Provide a container that allows for scrolling through large trees (have a look at Sacha Barber’s code for an example). Adding style triggers for the TreeViewItem to expand and collapse nodes (I leave as an exercise for you, it’s really simple to do ;-). Perhaps a zoom/unzoom feature, again for large trees. I’m one of those lazy architects who hates having to do in code what could be done only in XAML but this is one example of a good reason to jump into code to solve a visual problem not easily handled by XAML alone.

Turning a Treeview into an Org Chart (with Connectors!)

The Concept

The Data

The TreeView Control

The XAML

Conclusion

Leave a Comment

Recent Posts

Categories

Archives

Blogroll

Search

Meta: