How to draw a binary tree using WPF?

Question

I want to draw it like this:

I can draw a binary tree on the console. I want to do this using WPF. Here is my code that I am writing for the console.

class Program { static void Main(string[] args) { List<BinaryTreeData> myBinaryData = new List<BinaryTreeData>(); myBinaryData.Add(new BinaryTreeData{ownID=1}); myBinaryData.Add(new BinaryTreeData { parentID=1, ownID = 2 }); myBinaryData.Add(new BinaryTreeData { parentID=1,ownID = 3 }); foreach (var item in myBinaryData) { Console.WriteLine("{0}------{1}", item.parentID, item.ownID); } } } class BinaryTreeData : INotifyPropertyChanged { private int _ownID; private int _parentID; public int ownID { get { return this._ownID; } set { this._ownID = value; this.onChange("ownID"); } } public int parentID { get { return this._parentID; } set { this._parentID = value; this.onChange("parentID"); } } public event PropertyChangedEventHandler PropertyChanged; private void onChange(string propertyName) { if (PropertyChanged!=null) { this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } } 

I can’t understand how I can do this.

Answer 1

Each of your tree nodes must have a set of child elements. If you want to limit it to a binary tree, you can limit your collection of children to a maximum capacity of 2 elements.

I would recommend this tutorial as it will also show you how to achieve this with MVVM.

http://www.codeproject.com/KB/WPF/TreeViewWithViewModel.aspx

EDIT:

Since you updated your post and it seems that you are looking for something else, I think you better use a third-party solution instead of implementing your own.

Try to find these solutions -

http://www.codeproject.com/KB/WPF/LayeredTreeDraw.aspx

http://www.codeproject.com/KB/WPF/CustomTreeViewLayout.aspx

Answer 2

So, I modified your code according to my comment above. BinaryTreeData now has a list of SubItems. You will need to configure the namespace in XAML / local: BinaryTreeData, and it should work. Greetings!

BinaryTreeData:

  public class BinaryTreeData : INotifyPropertyChanged { private int _ownID; private int _parentID; public int ownID { get { return this._ownID; } set { this._ownID = value; this.onChange("ownID"); } } private List<BinaryTreeData> _subitems = new List<BinaryTreeData>(); public List<BinaryTreeData> Subitems { get { return _subitems; } } public event PropertyChangedEventHandler PropertyChanged; private void onChange(string propertyName) { if (PropertyChanged != null) { this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } } 

XAML:

 <TreeView x:Name="myTreeView"> <TreeView.ItemTemplate> <HierarchicalDataTemplate DataType="{x:Type local:BinaryTreeData}" ItemsSource="{Binding Subitems}"> <TextBlock Text="{Binding Path=ownID}" /> </HierarchicalDataTemplate> </TreeView.ItemTemplate> </TreeView> 

CodeBehind:

 public MainWindow() { InitializeComponent(); List<BinaryTreeData> myBinaryData = new List<BinaryTreeData>(); BinaryTreeData parent1 = new BinaryTreeData() { ownID = 1 }; parent1.Subitems.Add(new BinaryTreeData { ownID = 2 }); parent1.Subitems.Add(new BinaryTreeData { ownID = 3 }); BinaryTreeData parent2 = new BinaryTreeData() { ownID = 4 }; parent2.Subitems.Add(new BinaryTreeData { ownID = 5 }); parent2.Subitems.Add(new BinaryTreeData { ownID = 6 }); myBinaryData.Add(parent1); myBinaryData.Add(parent2); myTreeView.ItemsSource = myBinaryData; }