Playground: UWP’s new TreeView, Data Binding and HierarchicalDataTemplates

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

Share this post

Comments (2)

  • Filip Wallberg Reply

    Hi Thomas,

    I had a look at your solution for the TreeView and it looks great. I went ahead and made some changes so that the treeview is updated when the ItemSource’s CollectionChanged event is fired.

    However, what I cannot figure out is why the first subnode disappears and then reappears every second time the parent note is expended. Would you have any idea why that is? The behavior is not present in the example provided my Microsoft.

    Look forward to your reply.

    Regards,

    Filip Wallberg

    May 28, 2018 at 8:54 am
    • Thomas Claudius Huber Reply

      Hi Filip,

      I didn’t had time to look into this. But I have to migrate anyway to the latest UWP version that contains a TreeView natively. The sample should use the built-in TreeView that is available now.

      Thanks,
      Thomas

      June 5, 2018 at 1:53 pm

Leave a Reply

Your email address will not be published. Required fields are marked *

*