Populating Hierarchical Data In TreeView In WPF Using MVVM

Today, in this article, we will learn how to populate hierarchical data in TreeView in WPF using MVVM architecture.

Let’s take an example of populating employees’ details per position per department in hierarchical pattern.

Step1 Create new project

• Create new WPF application and name it as “TreeViewMVVMBinding”.
  
  
  

Step2 InotifyPropertyChanged Class

• Add new class and name it as “ViewModelBase”. This is a base class to notify the client that a property value has changed.
• Add code to handle “PropertyChangedEventHandler”.
• Finally, class should be like below.
  
  1. public class ViewModelBase : INotifyPropertyChanged
  2. {
  3. public event PropertyChangedEventHandler PropertyChanged;
  5. public void OnPropertyChanged(string propname)
  6. {
  7. if (PropertyChanged != null)
  8. {
  9. PropertyChanged(this, new PropertyChangedEventArgs(propname));
  10. }
  11. }
  12. }

Step3 Employee Class

• Add new class and name it as “Employee”. This is a model class to define structure for employee.
• Define properties for employee related details.
• Inherit ViewBase class and implement Property changed notification while setting value of each property.
• Finally, class should be like below.
  
  1. Public class Employee : ViewModelBase
  2. {
  3. private string _strEmployeeName = string.Empty;
  4. public string EmployeeName
  5. {
  6. get
  7. {
  8. return _strEmployeeName;
  9. }
  10. set
  11. {
  12. _strEmployeeName = value;
  13. OnPropertyChanged("EmployeeName");
  14. }
  15. }
  17. public Employee(string employeename)
  18. {
  19. EmployeeName = employeename;
  20. }
  21. }

Step4 Position Class

• Add new class and name it “Position”. This is a model class to define position of an employee in the company.
• Define properties for position related details.
• Inherit ViewBase class and implement Property changed notification while setting value of each property.
• Finally, class should be like below.
  
  1. public class Position : ViewModelBase
  2. {
  3. private List<Employee> employees;
  5. public Position(string positionname)
  6. {
  7. PositionName = positionname;
  8. employees = new List<Employee>()
  9. {
  10. new Employee("Employee1"),
  11. new Employee("Employee2"),
  12. new Employee("Employee3")
  13. };
  14. }
  16. public List<Employee> Employees
  17. {
  18. get
  19. {
  20. return employees;
  21. }
  22. set
  23. {
  24. employees = value;
  25. OnPropertyChanged("Employees");
  26. }
  27. }
  29. public string PositionName
  30. {
  31. get;
  32. set;
  33. }
  34. }

Step5 Department Class

• Add new class and name it “Department”. This is a model class to define structure for Department.
• Define properties for Department related details.
• Inherit ViewBase class and implement Property changed notification while setting the value of each property.
• Finally, class should be like below.
  
  1. public class Department : ViewModelBase
  2. {
  3. private List<Position> positions;
  5. public Department(string depname)
  6. {
  7. DepartmentName = depname;
  8. positions = new List<Position>()
  9. {
  10. new Position("TL"),
  11. new Position("PM")
  12. };
  13. }
  14. public List<Position> Positions
  15. {
  16. get
  17. {
  18. return positions;
  19. }
  20. set
  21. {
  22. positions = value;
  23. OnPropertyChanged("Positions");
  24. }
  25. }
  26. public string DepartmentName
  27. {
  28. get;
  29. set;
  30. }
  31. }