In the latest Windows 10 SDK preview build (17110, get it here) there’s a TreeView control available. You can read how to use it in the really great docs : https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/tree-view

Unfortunately the TreeView does not support Data Binding yet. And as you might know, UWP has also no support for HierarchicalDataTemplates (Vote for them here).

Isn’t that a great starting position to see how far we can get? :)

Thomas: “Note that what you read here is just meant as a playground to see what’s easy possible and where it get’s hard.”

I want to be able

• to bind the TreeView to a collection
• to define implicit hierarchical data templates for different items in the TreeView

I did all this in 4 hours with some Attached Properties that I placed in a TreeViewExtensions class. The usage looks like here:

<TreeView ext:TreeViewExtensions.ItemsSource="{x:Bind ViewModel.Departments}">
  <ext:TreeViewExtensions.Templates>
	<ext:ImplicitTemplateList>
	  <ext:HierarchicalImplicitTemplate
  	    ItemsSourcePropertyName="Children"
		DataTypeName="Department">
		<DataTemplate x:DataType="model:Department">
		  <CheckBox 
		    IsChecked="{x:Bind IsSelected,Mode=TwoWay}" Content="{x:Bind DepartmentName}"/>
		</DataTemplate>
	  </ext:HierarchicalImplicitTemplate>
	  <ext:HierarchicalImplicitTemplate
     	    ItemsSourcePropertyName="Children" DataTypeName="WinDevDepartment">
		<DataTemplate x:DataType="model:WinDevDepartment">
		  <StackPanel Orientation="Horizontal" Background="LightBlue" Padding="10">
			...
		  </StackPanel>
		</DataTemplate>
	  </ext:HierarchicalImplicitTemplate>
	</ext:ImplicitTemplateList>
  </ext:TreeViewExtensions.Templates>
</TreeView>

Here you can see the TreeView on the left with the two different DataTemplates:

Go and play with the code. Get it from this Github repo:
https://github.com/thomasclaudiushuber/Uwp-TreeView-Extensions

What were the main issues?

Subclassing from DataTemplate to create a HierarchicalDataTemplate

Didn’t work in my solution. That’s the reason why I created a HierarchicalImplicitTemplate class that wraps a normal DataTemplate.

Setting a property of System.Type in Xaml

I didn’t get this working. That’s the reason why I went with “DataTypeName” for the HierarchicalImplicitTemplate class, and not “DataType”. I tried to create a markup extension here, but as IServiceProvider is not available in UWP markup extensions, it didn’t help.

The whole solution lacks also on refreshing items etc. It just initializes the TreeView once, but it doesn’t notice when items are added or removed from the bound models. But I guess with a bit additional work this should be doable. Personally I was impressed how far I could get in this short amount of time. Looking forward to the final release.

Happy coding,
Thomas