Control Monster Explores Multi-Level XamTrees - Part II

[Infragistics] Curtis Taylor / Friday, July 9, 2010

Hierarchical data can take on many levels and various approaches to data. To further demonstrate the flexibility and depth of the XamTree control, this blog will add a third level of data to the last example and add another XamTree which shows how to work with a recursive tree.

Adding the Next Level to the Hierarchy

First, I will be working with the sample project from the last blog.

To add a third level of data to the sample data, you can access the built-in features in Expression Blend. In the Data tab locate the Branches data and select the drop down menu to its right. Select the ‘Add Collection Property’ option.

Rename the Collection Employees and select the ‘Add simply property’ button, which has the Plus icon to the left of the drop down.

Rename the new property ‘Name’ and make it a Name formatted String property.

Next we need to add the template for this third level of the hierarchy.

We will need a third DataTemplate for the Employees level. To add a third DataTemplate to the project, go to the Resources tab, select the FranchiseDataTemplate in MainPage.xaml UserControl, and duplicate this style by right-clicking to Copy and right-click to Paste.

Select the duplicate item and click on the title to rename it. Rename the data template ‘EmployeesDataTemplate’.

Click on the round rectangle or the contextual Edit menu to edit this DataTemplate.

The duplicated DataTemplate already has a TextBlock. We need to bind the Text property of this TextBlock to the Name property. Select the TextBlock in the ‘Objects and Timeline’ panel and locate the Advanced Options drop down and choose the ‘Data Binding’ option.

Change the ‘custom path expression’ to read simply as ‘Name’.

Press OK to make the change and close the dialog. Now customize the DataTemplate as you wish. I added another TextBlock before the Name to serve as a label “Employee:”.

When complete, exit the DataTemplate editor. And select the XamTree in the Objects and Timeline panel.

In the Properties panel, expand the HierarchicalItemTemplate to reveal the properties already set. The HierarchicalItemTemplate property is a HierarchicalDataTemplate. This template specifies how to apply data to the the item (with the Template property) and its children (using the ItemTemplate property). The HierarchicalDataTemplate also contains a HierarchicalItemTemplate, which is a HierarchicalDataTemplate. This means you can specify hierarchical items various levels deep. When you provide a child HierarchicalItemTemplate, then this will override the Template ItemTemplate property. This means you can have an ItemTemplate or a HierarchicalItemTemplate depending on if you need to specify further levels of data that the tree can expand.

Within the expanded HierarchicalDataTemplate, reset the ItemTemplate property to clear it. Reset is one of the Advanced Options for a property.

Next click on the ‘New’ button next to the embedded HierarchicalItemTemplate.

In the newly expanded section for the HierarchicalDataTemplate, locate the ItemTemplate property. This property can be assigned a DataTemplate to assign data properties to elements to be displayed in the next level of the hierarchy. To the right of the ItemTemplate property, click on ‘Advanced Options’ -> ‘Local Resource’ -> ‘EmployeesDataTemplate’.

Since we had to remove the assignment of the BranchDataTemplate on the root HierarchicalDataTemplate ItemTemplate, we need to now assign that template to the Template of the child HierarchicalItemTemplate. Click on the Template Advanced Options and select ‘Local Resource’ -> ‘BranchDataTemplate’.

Finally, we need to point the new HierarchicalDataTemplate ItemsSource to point to the collection of Employees. Click on the Advanced Options popup and select the ‘Data Binding’ option.

In the ‘Create Data Binding’ dialog make sure the Data Context tab is selected since the data will come from the DataContext set by the Tree. Type Employees in the ‘Use a custom path expression’ field after enabling this option. If you expand the tree in the dialog, you can find the Employees property. However, if you select it, Blend will assign a zero’th assignmnet of this field as it does not know that the XamTree will utilize the DataContext correctly as any ItemsControl would do with the ItemsSource property.

Run the project and you will now find three levels working within the XamTree.

Working with Recursive Trees

For this next example, we will create another XamTree and a secondary collection in the SampleDataSource to bind to. To start re-visit the Data tab and add a second collection to the SampleDataSource.

Rename the Collection to ‘People’.

Add a Simple property. Make it a String property that is formatted as a Name and name the property as ‘Title’.

Next to make the collection a recursive hierarchical collection, the drop down menu to the far right of the collection has the option to convert the collection to a ‘Hierarchical Collection’. Go ahead and make this change.

Now add a second XamTree to the MainPage in the second column of the root Grid layout panel. Make sure the XamTree is set to auto size and stretch align vertically and horizontally.

Bind this XamTree ItemsSource to the new collection titled People. You can do this by clicking on the ‘Advanced Options’ -> ‘Data Binding’ option and selecting People in the DataContext tab of the ‘Create Data Binding’ dialog window.

On making this change, the design space will immediately reflect this change.

Of course, to make the list display a few levels of data and show more than the class and namespace for this item, we will need to tie in some hierarchical data templates.

Before we do that, let’s look a little closer to the data. The data icon to the right of each People collection is a button which invokes the ‘Edit Sample Data dialog’.

In the dialog you can change the data and select the number of items to be displayed in the collection.

On examining the data Blend creates you’ll find that the data collection count is set to 0 at the fourth and fith level. Set the fourth level count to 3 and leave the fift level at 0. We will make sure our tree can display up to this level. Currently, the XamTree can only show a finite number of levels. Thus there is no way to assign one XAML DataTemplate and have it applied recursively to all levels. If this is something you need, please let us know!

First we need a DataTemplate that knows how to display the Title property. To make this simple, duplicate the FranchiseDataTemplate again in the Resources panel, name it TitleDataTemplate, and edit the template. The template already has a TextBlock. Bind the TextBlock Text property to the Title property using the ‘Custom path expression’ field. Make any additional customizations to the presentation of this item while in the editor.

Dismiss the DataTemplate editor and go back to the designer for the MainPage. Select the second XamTree and add a new HierarchicalDataTemplate by clicking on the New button next to the HierarchicalItemTemplate property.

Using Advanced Options assign the custom binding expression “People” to the ItemsSource in the HierarchicalDataTemplate.

Next in Advanced Options assign the ‘Local Resource’, TitleDataTemplate to the Template property in the HierarchicalDataTemplate.

To assign the next level of the hierarchy, we add another new HierarchicalDataTemplate to the HierarchicalItemTemplate. Within this next level, we also apply the Binding Custom Expression ‘People’ to the ItemsSource property and assign the Local Resource TitleDataTemplate to the Template property.

Repeat this three more times to create four levels. In the last level, assign the Local Resource TitleDataTemplate to its ItemTemplate property (instead of another HierarchicalItemTemplate). This will finish the flow of levels and allows re-using the same DataTemplate.

Run the project and you should see the DataTemplate assigned to all levels of the sample data in action.

Drop me a note if you need further clarification about this. Meanwhile, I’ve included the source code to the Visual Studio 2010 (Expression Blend 4) solution for this sample so you might try it out yourself.

This monster loves the XamTree. It’s versatile, flexible, and thoroughly delicious. Stay tuned for the next tasty Infragistics control we play with!

MultiTree.zip