Data Binding in UWP TreeMap

18 Nov 20182 minutes to read

The UWP TreeMap is bound to an external data source to display the data. It supports data sources such as List, ObservableCollection, and so on. The ItemsSource property helps to bind the TreeMap with the collection of objects.

In order to bind the data source of the UWP TreeMap, set the ItemsSource property and to generate the treemap items, set WeightValuePath as shown below.

If the data source implements the ICollectionChanged interface, then UWP TreeMap will automatically refresh the view when an item is added, removed, or while the list is cleared. When you add or remove an item in an ObservableCollection, the UWP TreeMap automatically refreshes the view, as the ObservableCollection implements the INotifyCollectionChanged. But when you do the same in a List, UWP TreeMap will not refresh the view automatically.

If the data model implements the INotifyPropertyChanged interface, then the UWP TreeMap responds to the property change in runtime to update the view.

WeightValuePath

WeightValuePath of UWP TreeMap is a path to a field on the source object, which serves as the “weight” of the object.

The UWP TreeMap generates treemap items based on the property WeightValuePath . It is a bindable property and it decides how to display the treemap items.

TreeMap calculates the size of the object with the help of WeightValuePath.

Code Sample:

XAML

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
    <syncfusion:SfTreeMap Name="TreeMap" ItemsSource="{Binding PopulationDetails}" WeightValuePath="Population" />
</Grid>

The specified field must be available in each and every sub class (object) defined in hierarchical (nested) data collection and it should be numerical value.

treemapimage

ColorValuePath

ColorValuePath of UWP TreeMap is a path to a field on the source object, which serves as the “Color” of the object.

The UWP TreeMap applies colors to the treemap nodes based on the property ColorValuePath. It is a bindable property and it decides how to color the treemap node.