WPF MVVM TREEVIEW EXAMPLE HOW TO
WPF MVVM TREEVIEW EXAMPLE FULL

Here’s what the final result looks like (after I expand a few of the TreeView nodes:īelow is a very simple example of how you might use a TreeView control to display a set of hierarchical data. The example below builds on our last post, but using a Grid in a Border for each person in the tree. However, we can use an Panel we like in the data template. If we just want each node in a TreeView control to contain text, we can use a single TreeViewItem in the HierarchicalDataTemplate and bind its Header property to the text that we want displayed. In our case, we’ve overridden ToString to display the dog’s name and age. We just have a TextBlock bound to the Dog instance as a whole, which causes the dog’s ToString method to get invoked. Note that we specify a DataType for each HierarchicalDataTemplate. As the tree is constructed, the appropriate template will be used, based on whether a node is a breed or a dog.īelow, we can see how this will look at runtime. We also indicate that the tree should be expanded by looking at the Dogs property in each breed instance. We then include a template to use for each Breed item and a different template to use for each Dog item in the tree. In the example below, we have a TreeView whose ItemsSource is bound to a list of breeds. Breed objects contain information about a breed and in turn have a Dogs property that is a list of individual dogs of that breed.

Let’s assume that we have both a Breed and a Dog class. If you have some hierarchical data in which the items are not all of the same type, you can specify more than one HierarchicalDataTemplate for the TreeView, based on the underlying type of each node. This allowed us to specify the look and feel of each node in the tree and also dictated how the main data item would be traversed to generate the tree.

WPF MVVM TREEVIEW EXAMPLE HOW TO

I showed last time how to use a HierarchicalDataTemplate as the ItemTemplate for a TreeView. We can see that the third element is now lined up on the right side of the TreeView at runtime. The second column contains the content and is star-sized.įor completeness, here’s a fragment of the TreeView, using the new style. We’ve modified the style so that the control template has a Grid with only two columns. The main style that can be used for a TreeView.ItemContainerStyle is named TreeViewItemStyle1.

WPF MVVM TREEVIEW EXAMPLE FULL

Below is the full text of the modified style, including all dependent styles. The solution is to override the ItemContainerStyle and tweak the column definitions to allow the content to extend across the Grid. The problem has to do with the default ItemContainerStyle. It includes a control template for each data item that puts the main content for the data item in an auto-sized grid column, not allowing it to stretch across the control. The 3rd column is jammed up against the right side of the second column. In the TreeView, we set HorizontalContentAlignment to Stretch, to try getting this grid to stretch across the entire width of the TreeView.Īt runtime, you can see that this doesn’t work. We’ve set the middle column up as star-sized so that the rightmost column (first letter of the breed) sits on the far right of the grid. In the sample below, we have a data template for a dog breed the displays data across three columns in a Grid. There’s a problem with doing this, however, if you want the container in the data template to stretch the entire width of the TreeView. You can define a custom data template for items in a TreeView, displaying any content you like in a panel, for each data item.

Wpf mvvm treeview example