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

WPF Organization Chart Hierarchy MVVM Application

, 30 Mar 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
This is an WPF Hierarchy MVVM Application representing an organization chart.

You can download the source code and see more details on this project here.

It is highly recommended that you walk through the explanations by looking at the source code as it will help you gain a more solid understanding. You can also run the application on your computer.

The goal of this project is to show you how to build an hierarchy using the MVVM pattern in WPF.

The Application

We will use an organization chart to represent the hierarchy. You can click on the root of the hierarchy to see the summary tree view on the left and the detailed view on the right:

You can click on any node in the TreeView to see the portion of hierarchy in the detailed view:

You can choose how many levels down the hierarchy you like to see from any node by choosing the dropdown:

You can click on any node in the detailed view and it will navigate to the node, and at the same time highlight your location in the TreeView:

View Model

The ViewModel is designed to facilitate the binding of data and commands to the Views.

The OrgTreeViewModel is a Singleton class that:

  • Holds a reference to the Root of the hierarchy
  • Holds a reference to the Selected node in the hierarchy (when a user clicks on a node the Selected node is changed)
  • Handles the command when a node is selected
  • Handles the command when a display level is selected from the dropdown

The OrgElementViewModel class is a node in the hierarchy. It contains:

  • The data of a node
  • IsSelected property for determining if the node is selected by the user
  • Access to the node's children

View Layout

The application is composed of 3 views:

  • Tree View
  • Navigation View
  • Detail View

The general layout is in the MainWindow.xaml where you see each UserControl as the View:

Tree View

The DataContext of the TreeView is the OrgTreeViewModel. We set the TreeView's ItemsSource to the Root property of the OrgTreeViewModel, which is the top-most node in the hierarchy.

The HierarchicalDataTemplate's ItemsSource is set to the Children property. Notice that the Children property is from the OrgElementViewModel and not from the OrgTreeViewModel. This is because the TreeView's HierarchicalDataTemplate uses the type returned from the Root property and looks for the binding property from the type returned, which is the OrgElementViewModel:

Each node in the tree is just a display of the image and the text of a person's name using the OrgElementViewModel:

Since each node has the OrgElementViewModel as the DataContext, we bind the TreeViewItem's IsSelected property to the IsSelected property of the OrgElementViewModel to highlight the node's background to LightBlue when a node is selected using DataTrigger:

When an user clicks on a node in the tree we need to let the ViewModel node know that the selection has changed. We like to route the event as a command to the ViewModel, yet the TreeView does not have built in Command property. This can be accomplished by adding the System.Windows.Interactivity library and we can still pass the SelectedItem of the TreeView to the CommandParameter when the selected item has changed:

Then in the OrgTreeViewModel we just set the Selected property to the node when the command is fired, which in turn sets the IsSelected property of the node to true:

Navigation View

Highlighted in Red below is the UI portion of the navigation view:

We first populate the dropdown and place the value of the dropdown in the Tag property of the ComboBoxItem:

When the user changes the selection we route the SelectionChanged event to the ChangeDisplayLevelCommand of the OrgTreeViewModel by passing the Tag property of the ComboBoxItem:

The command then asks the selected node to show only the number of levels below it:

Then in the selected OrgElementViewModel node we define the logic of the filter by calling its Children recursively until it does not need to show further levels down the hierarchy:

Detail View

Highlighted below in Red is the Detail View:

The Detail View is just a button with a Control Template defined for its looks. Below is what you see in DetailView.xaml:

The Control Template is defined in ButtonStyle.xaml, where it shows the Image at the top, followed by the name of the person, and below it the NestedView User Control:

The NestedView.xaml shows that the children of the selected node are placed in a ListBox, and we simply nest another button with the same Control Template for each item in the ListBox:

And since the Control Template uses the same NestedView we are done in defining the looks with very little XAML.

Next we need to define the action when the user clicks on the button inside the ListBox:

We want to call the SelectedCommand of the OrgTreeViewModel, but the button's DataContext is OrgElementViewModel because it's just a node in the hierarchy. The way to do this is by searching up the UI control tree to find the control that has the OrgTreeViewModel as the DataContext and we just call its SelectedCommand:

pnlDetail is just the panel that contains the Detail View, which is in MainWindow.xaml.

Also notice that we pass the DataContext of the button as the parameter to the command, this way we have reused the same SelectedCommand that was used by the Tree View.

We hope you find this project helpful. Although there are a lot more things you can do in a WPF hierarchy application but this should give you a good starting point.

License

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

Share

About the Author

DevLake

United States United States
No Biography provided

Comments and Discussions

 
Generalmy vote of 5 Pinmemberbahman aminipour20-Nov-12 21:17 
QuestionPortability Question PinmemberDewey1-Apr-12 20:26 
QuestionMy Vote Of 5 PinmemberKevin Marois27-Mar-12 6:13 

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 | Mobile
Web01 | 2.8.141015.1 | Last Updated 30 Mar 2012
Article Copyright 2012 by DevLake
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid