WPF TreeView Control With Filtering of Nodes Based on Their Levels

In this paper, I will demonstrate the process of implementing a new TreeView that provides an option to filter the nodes based on their levels. The new TreeView inherits from the Listbox and has good performance on large scale data. It is based on an idea of using custom ControlTemplate for the ListBoxItem and using ObservableCollection.

Nobody can deny the fact that Microsoft made a big stride in the user interface technology by introducing the WPF platform. It provides better data binding, better separation of views from models, strong support for animations, styling and templating and etc. One of the amazing controls in the WPF platform is its TreeView which provides the developer a full control on the rendering process of the nodes. Using hierarchical templates, one can provide custom layouts for TreeView items. However the control faces some limitations too.

Last month, I worked on a WPF project that has a TreeView that shows thousands of nodes. My client wanted a filtering feature on the TreeView based on the Levels of nodes. In fact, he wanted a feature to select the visible levels of the tree. For example, if the tree shows a list of continents, their countries and their cities, user should be able to choose the visibility of levels. If he selects the continents and countries, the tree should only show two levels, continents and their countries. Again if he selects countries and cities, the tree should only show countries and their cities and hides continents. If he selects only cities, the tree should show the list of all cities like a Listbox. It would be a little tricky, since when user selects Level 1 for filtering, the child nodes of level 1 should be considered as childes of Level 0 nodes.

read more

No Comments

Post Reply