WPF TreeViewItem Control Template for Organization Chart

You can download the source code and see other projects here.

In this project we show you how to apply a TreeViewItem control template to give the TreeView an Organization Chart look.

You may also want to check out how to build the Organization Chart view using nested controls here, or how to implement the drag and drop here.

The Application

When you start the application you can see the default TreeView on the left and the TreeView with the TreeViewItem control template on the right that looks like an organization chart:

In the default TreeView on the left you can select a node and it will give you a blue background. In the customized view on the right you can select a node and it will highlight the node and everything below with a blue background and also apply a transformation to the node so that it looks Italicized:

In the customized view you can expand and collapse the nodes just like in the regular TreeView. Below shows an example when you collapse a node:

Default View

In the default view we highlight the selected node by adding a DataTrigger that binds to the TreeViewItem's IsSelected property and set the StackPanel's background to LightBlue:

The TreeView with the customized TreeViewItem is located in the 2 files highlighted below:

Let's go over the main items in the control template first. Below is the control template with the major items highlighted:

The Border is used to surround the node and its children.

The ContentPresenter is the node itself that is being displayed (The picture of the person, first name, last name).

The ToggleButton is the small triangle that you can click to expand or collapse the node.

The ItemsPresenter is the children of the node.

The VisualStateManager defines the look of the visual states of the TreeViewItem.

First notice that we have limited width of the organization chart so that additional nodes will not keep floating to the right, and instead it goes to the next available space in the next line:

This is done by using WrapPanel as the ItemsPanel for the TreeViewItem and setting the MaxWidth of the ItemsPresenter (the children) when it's the root of the organization chart:

To show or hide the ToggleButton based on if the node has children, we define a trigger that is based on the HasItems property of the TreeViewItem.

To show or hide the children of the node, which is displayed by the ItemsPresenter, we hide the ItemsPresenter (the children) by default and show it only if the TreeViewItem is in the Expanded visual state.

To show the correct triangle orientation of the ToggleButton when the children is expanded or collapsed, we bind the IsChecked property of the ToggleButton to the IsExpanded property of the TreeViewItem. The ToggleButton also has a control template that shows the Triangle's orientation.

And lastly, we need to give the Italicized look of the node when it's selected and change the background of the node and its children to blue. This is done by defining the visual state of the TreeViewItem. We simply apply the transformation to the ContentPresenter (named as PART_Header, which contains the visual display of the node), and change the background color of the border: