TreeView Control with Windows Apps

My book Professional C# 7 and .NET Core 2.0 contains a sample to show different cultures and their information in a tree view using a Universal Windows Platform (UWP) application. Because UWP didn’t include a TreeView control, I was using a TreeView sample from Microsoft for this app. Now, with Windows 10 April 2018 Update, version 1803, the TreeView control is included with the Windows Runtime, and I could update the sample code.

A view of a tree

Sample Application

The sample application is from chapter 27, Localization from the book Professional C# 7 and .NET Core 2.0. It shows a list of available cultures in a tree-view. The data displayed in the tree is defined with the CultureData class. This class contains CultureInfo and RegionInfo from the namespace System.Globalization, as well as properties to display sample data for the date, the time, and a number:

The class CulturesViewModel defines the property RootCultures that contains a list of CultureData objects. This list contains the cultures that have the invariant culture as parent, and the SubCultures property of the CultureData object contains the child cultures:

TreeView Control

To use the new TreeView control, the project setting needs to be changed to only support Windows 10 April 2018 Update (version 1803).

Project Settings - Windows 10 April 2018 Update

The new TreeView control is directly used in the MainPage.xaml to display the tree of cultures in the left side, and detail information (using a user control) on the right side:

Fill The TreeView Control with Data

The TreeView control is filled in the code-behind file of the MainPage. On navigation to the page (using the OnNavigatedTo overridden method), the RootCultures property of the view-model is accessed to create TreeViewNode objects for every root culture. The Content property of the TreeViewNode contains the CultureData object. All the root TreeViewNode objects are added to the TreeView control using the RootNodes property. Sub-cultures are added using the local function AddSubNode. This method is invoked recursively to fill sub-cultures using the Children property of the TreeViewNode. On selection of an item in the tree-view, the OnSelectionChanged method is invokedt that changes the current selection in the associated view-model class:

Binding to an ItemsSource is (currently?) not possible with the TreeView control.

Displaying items

Adding CultureData objects to the TreeViewNode Content property, a DataTemplate can be created for display. This template just displays the enlish name of the culture:

For using item templates with the TreeView control, a control template is required. The control template contains the TreeViewList where the ItemTemplate property references the data template. Most parts of the control template are just default values as created using the Edit Template feature with Visual Studio 2017.

Running the App

Running the app, the cultures are shown in a tree:

CultureDemo App UI with TreeView

Summary

There have been some changes with the TreeView control from the Microsoft samples to the new TreeView control available with Windows 10 April 2018 Update. The code using the control has been simplified, it was possible to get rid of expanded and collapsed glyph, and the indentation calculation. It’s not as simple as using the WPF TreeView control yet (for this code, check out *Professional C# 6 and .NET Core 1.0) as an items source is not directly available with the UWP TreeView, and the item template cannot be directly assigned (yet?). Anyway, the new TreeView control is of practical use.

Get the complete source code of the code sample in the GitHub repository for Professional C# 7.

Enjoy coding and my new book Professional C# 7 and .NET Core 2.0

Christian

Advertisements

2 thoughts on “TreeView Control with Windows Apps

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s