Click here to Skip to main content
Click here to Skip to main content
Technical Blog

WPF TreeViewItem Control Template for Organization Chart

, 9 Sep 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
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:


And that's all. We hope you will find this project useful in defining your own customized look of the TreeViewItem.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

DotNetLead-SharePoint

United States United States
No Biography provided

Comments and Discussions

 
QuestionNice post PinmemberRahman Masudur9-Sep-12 19:55 
GeneralMy vote of 5 Pinmembersam.hill9-Sep-12 13:23 
GeneralMy vote of 5 PinmemberJustin Cooney9-Sep-12 7:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141216.1 | Last Updated 9 Sep 2012
Article Copyright 2012 by DotNetLead-SharePoint
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid