Click here to Skip to main content
15,868,144 members
Articles / Desktop Programming / WPF
Tip/Trick

Binding WPF TreeView TreeViewNode to Parent ViewModel

Rate me:
Please Sign up or sign in to vote.
5.00/5 (7 votes)
2 Aug 2017CPOL2 min read 16.1K   384   7   4
Fairly straight forward way of binding in a HierarchicalDataTemplate or DataTemplate to the parent ViewModel when using the TreeView control.

Introduction

I had a simple situation when using a TreeView control that had the ability to add or remove nodes. The adding was no problem since the template having the button would be adding an element to the ItemsSource of the ViewModel it was bound to, and so the ICommand property for the Command attribute of the Add Button would be on the bound ViewModel. However, the Delete Button would have to remove an element from the ItemsSource of the parent ViewModel. The simple choice was to have a reference to the parent in each ViewModel, but I did not really like that solution. More optimally, I thought, was to bind the Delete Button to an ICommand method in the parent ViewModel.

I know the basics of how to do it, but, as usual, need to use the web to find out the specifics.

The Binding to Parent TreeViewItem DataContext

To bind to the parent ViewModel, you must first bind to the parent Control, which is a TreeViewItem. To do this, you need to use the ReletiveSouce Binding attribute with the FindAncestor Mode. Of course, the AncestorType is TreeViewItem, but need to also use the AncestorLevel of 2 because otherwise FindAncestor would just find TreeViewItem that the Control is contained within.

C#
Command="{Binding DataContext.DeleteAnswer,
          RelativeSource={RelativeSource Mode=FindAncestor,
          AncestorType={x:Type TreeViewItem},
          AncestorLevel=2}}"

You will also notice that you have to use a Path that contains the DataContext and the name of the property that needs to be bound to. That is because the Relative source just finds the TreeViewItem and still you need to specify that you need to bind to the DataContext of the TreeViewItem.

The Sample

The sample only uses a single HierarchicalDataTemplate which has two buttons on it, one to add a TreeViewNode under the HierarchicalDataTemplate node and one to delete the HierarchicalDataTemplate TreeViewNode. The Delete Button is the Button that uses the RelativeSource binding defined in this tip since the Delete Button needs to delete the TreeViewNode from its parent TreeViewNode.

Image 1

History

  • 08/02/2017: Initial version

License

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


Written By
Software Developer (Senior) Clifford Nelson Consulting
United States United States
Has been working as a C# developer on contract for the last several years, including 3 years at Microsoft. Previously worked with Visual Basic and Microsoft Access VBA, and have developed code for Word, Excel and Outlook. Started working with WPF in 2007 when part of the Microsoft WPF team. For the last eight years has been working primarily as a senior WPF/C# and Silverlight/C# developer. Currently working as WPF developer with BioNano Genomics in San Diego, CA redesigning their UI for their camera system. he can be reached at qck1@hotmail.com.

Comments and Discussions

 
QuestionThanks Pin
Larry Spencer8-Feb-22 4:51
Larry Spencer8-Feb-22 4:51 
AnswerRe: Thanks Pin
Clifford Nelson8-Feb-22 5:35
Clifford Nelson8-Feb-22 5:35 
Glad it was of help Smile | :)
Question+5 Pin
Kevin Marois2-Aug-17 6:48
professionalKevin Marois2-Aug-17 6:48 
AnswerRe: +5 Pin
Clifford Nelson4-Aug-17 4:13
Clifford Nelson4-Aug-17 4:13 

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

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