Getting Started with UWP TreeMap (SfTreeMap)

This sample demonstrates how to create a UWP TreeMap using the Syncfusion SfTreeMap control.

Prerequisites

• Visual Studio 2022 or later
• Windows 10 SDK (10.0.16299.0 or later)
• Syncfusion.SfTreeMap.UWP NuGet package (latest)

Adding Assembly Reference

Option 1: Via NuGet Package Manager

1. Right-click on the project in Solution Explorer and select Manage NuGet Packages.
2. Search for Syncfusion.SfTreeMap.UWP and install it.

Option 2: Via Extension Reference

1. Open the Add Reference window from your project.
2. Choose Windows > Extensions > Syncfusion Controls for UWP XAML.

Adding Namespace

After adding the reference, include the following namespace in your MainPage.xaml:

xmlns:syncfusion="using:Syncfusion.UI.Xaml.TreeMap"

Creating the Data Model for TreeMap

Create a PopulationDetail model class (Model/PopulationDetail.cs) to hold the data:

namespaceGettingStarted_Sample{publicclassPopulationDetail{publicstringContinent{get;set;}publicstringCountry{get;set;}publicdoubleGrowth{get;set;}publicdoublePopulation{get;set;}}}

Creating the ViewModel for TreeMap

Create a PopulationViewModel class (ViewModel/PopulationViewModel.cs) with sample data:

usingSystem.Collections.ObjectModel;namespaceGettingStarted_Sample{publicclassPopulationViewModel{publicPopulationViewModel(){this.PopulationDetails=newObservableCollection<PopulationDetail>();PopulationDetails.Add(newPopulationDetail(){Continent="Asia",Country="Indonesia",Growth=3,Population=237641326});PopulationDetails.Add(newPopulationDetail(){Continent="Asia",Country="Russia",Growth=2,Population=152518015});PopulationDetails.Add(newPopulationDetail(){Continent="Asia",Country="Malaysia",Growth=1,Population=29672000});PopulationDetails.Add(newPopulationDetail(){Continent="North America",Country="United States",Growth=4,Population=315645000});PopulationDetails.Add(newPopulationDetail(){Continent="North America",Country="Mexico",Growth=2,Population=112336538});PopulationDetails.Add(newPopulationDetail(){Continent="North America",Country="Canada",Growth=1,Population=35056064});PopulationDetails.Add(newPopulationDetail(){Continent="South America",Country="Colombia",Growth=1,Population=47000000});PopulationDetails.Add(newPopulationDetail(){Continent="South America",Country="Brazil",Growth=3,Population=193946886});PopulationDetails.Add(newPopulationDetail(){Continent="Africa",Country="Nigeria",Growth=2,Population=170901000});PopulationDetails.Add(newPopulationDetail(){Continent="Africa",Country="Egypt",Growth=1,Population=83661000});PopulationDetails.Add(newPopulationDetail(){Continent="Europe",Country="Germany",Growth=1,Population=81993000});PopulationDetails.Add(newPopulationDetail(){Continent="Europe",Country="France",Growth=1,Population=65605000});PopulationDetails.Add(newPopulationDetail(){Continent="Europe",Country="UK",Growth=1,Population=63181775});}publicObservableCollection<PopulationDetail>PopulationDetails{get;set;}}}

Initializing the TreeMap (XAML)

In MainPage.xaml, set the DataContext to PopulationViewModel, then initialize SfTreeMap by binding ItemsSource to the data collection and setting WeightValuePath to the data property:

<Pagex:Class="GettingStarted_Sample.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="using:GettingStarted_Sample"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:syncfusion="using:Syncfusion.UI.Xaml.TreeMap"mc:Ignorable="d"Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Grid.DataContext>
<local:PopulationViewModel/>
</Grid.DataContext>
<syncfusion:SfTreeMapItemsSource="{Binding PopulationDetails}"WeightValuePath="Population">
</syncfusion:SfTreeMap>
</Grid>
</Page>

Initializing the TreeMap (Code-Behind)

Alternatively, you can create the TreeMap entirely in C# code-behind:

usingSyncfusion.UI.Xaml.TreeMap;// Creating the ViewModelPopulationViewModelviewModel=newPopulationViewModel();// Assigning the data contextthis.DataContext=viewModel;// Initializing the TreeMapSfTreeMapsfTreeMap=newSfTreeMap();// Setting ItemsSource and WeightValuePathsfTreeMap.ItemsSource=viewModel.PopulationDetails;sfTreeMap.WeightValuePath="Population";// Adding TreeMap to the Gridgrid.Children.Add(sfTreeMap);

Reference

• Syncfusion UWP TreeMap Getting Started Documentation