Getting Started with the .NET MAUI TreeMap

11 Jun 202614 minutes to read

This section provides a quick overview of how to get started with the .NET MAUI SfTreeMap for .NET MAUI and a walk-through to configure the .NET MAUI TreeMap in a real-time scenario. Follow the steps below to add .NET MAUI TreeMap control to your project.

To get start quickly with our .NET MAUI TreeMap, you can check the below video.

• Visual Studio
• Visual Studio Code
• JetBrains Rider

Prerequisites

Before proceeding, ensure the following are set up:

1. Install .NET 9 SDK or later.
2. Set up a .NET MAUI environment with Visual Studio 2022 v17.12 or later.

Step 1: Create a New .NET MAUI Project

1. Go to File > New > Project and choose the .NET MAUI App template.
2. Name the project and choose a location. Then click Next.
3. Select the .NET framework version and click Create.

Step 2: Install the Syncfusion^® .NET MAUI TreeMap NuGet Package

1. In Solution Explorer, right-click the project and choose Manage NuGet Packages.
2. Search for Syncfusion.Maui.TreeMap and install the latest version.
3. Ensure the necessary dependencies are installed correctly, and the project is restored.

Step 3: Register the handler

The Syncfusion.Maui.Core NuGet is a dependent package for all Syncfusion^® controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion^® core.

MauiProgram.cs

using Syncfusion.Maui.Core.Hosting;
public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
	    builder
		.ConfigureSyncfusionCore()
		.UseMauiApp<App>()
		.ConfigureFonts(fonts =>
		{
		    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
		    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
		});

	    return builder.Build();
	}
}

Step 4: Add .NET MAUI TreeMap control

1. To initialize the control, import the Syncfusion.Maui.TreeMap namespace into your code.
2. Initialize SfTreeMap.

XAML

<ContentPage 
    ...
    xmlns:treemap="clr-namespace:Syncfusion.Maui.TreeMap;assembly=Syncfusion.Maui.TreeMap">
    <treemap:SfTreeMap />
</ContentPage>

C#

using Syncfusion.Maui.TreeMap;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        SfTreeMap treeMap = new SfTreeMap();
        this.Content = treeMap;
    }
}

Prerequisites

Before proceeding, ensure the following are set up:

1. Install .NET 9 SDK or later.
2. Set up a .NET MAUI environment with Visual Studio Code.
3. Ensure that the .NET MAUI workloads are installed and configured as described here.

Step 1: Create a New .NET MAUI Project

1. Open the command palette by pressing Ctrl+Shift+P and type .NET:New Project and enter.
2. Choose the .NET MAUI App template.
3. Select the project location, type the project name and press Enter.
4. Then choose Create project.

Step 2: Install the Syncfusion^® .NET MAUI TreeMap NuGet Package

1. In Solution Explorer, right-click the project and choose Manage NuGet Packages.
2. Search for Syncfusion.Maui.TreeMap and install the latest version.
3. Ensure the necessary dependencies are installed correctly, and the project is restored.

Step 3: Register the handler

The Syncfusion.Maui.Core NuGet is a dependent package for all Syncfusion^® controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion^® core.

MauiProgram.cs

using Syncfusion.Maui.Core.Hosting;
public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
	    builder
		.ConfigureSyncfusionCore()
		.UseMauiApp<App>()
		.ConfigureFonts(fonts =>
		{
		    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
		    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
		});

	    return builder.Build();
	}
}

Step 4: Add .NET MAUI TreeMap control

1. To initialize the control, import the Syncfusion.Maui.TreeMap namespace into your code.
2. Initialize SfTreeMap.

XAML

<ContentPage 
    ...
    xmlns:treemap="clr-namespace:Syncfusion.Maui.TreeMap;assembly=Syncfusion.Maui.TreeMap">
    <treemap:SfTreeMap />
</ContentPage>

C#

using Syncfusion.Maui.TreeMap;
. . .

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        SfTreeMap treeMap = new SfTreeMap();
        this.Content = treeMap;
    }
}

Prerequisites

Before proceeding, ensure the following are set up:

1. Install .NET 9 SDK or later.
2. Set up a .NET MAUI environment with JetBrains Rider 2024.3 or later.
3. Make sure the MAUI workloads are installed and configured as described here.

Step 1: Create a new .NET MAUI Project

1. Go to File > New Solution, Select .NET (C#) and choose the .NET MAUI App template.
2. Enter the Project Name, Solution Name, and Location.
3. Select the .NET framework version and click Create.

Step 2: Install the Syncfusion^® MAUI TreeMap NuGet Package

1. In Solution Explorer, right-click the project and choose Manage NuGet Packages.
2. Search for Syncfusion.Maui.TreeMap and install the latest version.
3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, Open the Terminal in Rider and manually run: dotnet restore

Step 3: Register the handler

The Syncfusion.Maui.Core NuGet is a dependent package for all Syncfusion^® controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion^® core.

MauiProgram.cs

using Syncfusion.Maui.Core.Hosting;
public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
	    builder
		.ConfigureSyncfusionCore()
		.UseMauiApp<App>()
		.ConfigureFonts(fonts =>
		{
		    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
		    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
		});

	    return builder.Build();
	}
}

Step 4: Add .NET MAUI TreeMap control

1. To initialize the control, import the Syncfusion.Maui.TreeMap namespace into your code.
2. Initialize SfTreeMap.

XAML

<ContentPage 
    ...
    xmlns:treemap="clr-namespace:Syncfusion.Maui.TreeMap;assembly=Syncfusion.Maui.TreeMap">
    <treemap:SfTreeMap />
</ContentPage>

C#

using Syncfusion.Maui.TreeMap;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        SfTreeMap treeMap = new SfTreeMap();
        this.Content = treeMap;
    }
}

Step 5: Populate .NET MAUI TreeMap data source

Here are the steps to render treemap items using the .NET MAUI TreeMap control with respective data properties created in a data model class.

• Create a data model for treemap.
• Create view model.
• Bind data source for TreeMap.

Create a data model for treemap

Create a simple data model in a new class file as shown in the following example code.

AirportDetails.cs

public class AirportDetails
{
    public string State { get; set; }
    public string Count { get; set; }
}

Create view model

Create a view model class to set values for the properties listed in the model class as shown in the following example code.

ViewModel.cs

public class ViewModel
{
    public ViewModel()
    {
        this.AirportDetails = new ObservableCollection<AirportDetails>()
        {
            new AirportDetails { State = "Ecuador", Count = 7 },
            new AirportDetails { State = "Chile", Count = 5 },
            new AirportDetails { State = "Peru", Count = 3 },             
            new AirportDetails { State = "Falkland", Count = 1 },
            new AirportDetails { State = "French", Count = 1 },
            new AirportDetails { State = "German", Count = 3 },
            new AirportDetails { State = "Islands", Count = 1 },
            new AirportDetails { State = "Guiana", Count = 1 },
        };
    }

    public ObservableCollection<AirportDetails> AirportDetails
    {
        get;
        set;
    }
}

Bind data source for TreeMap

To populate the treemap items, utilize the DataSource property of SfTreeMap. Additionally, ensure that the following properties of SfTreeMap are mapped from corresponding properties in the DataSource while initializing the treemap control.

• The PrimaryValuePath specifies the name of the property within the data object that provides the primary value used to determine the size of each item in the treemap.
• The RangeColorValuePath specifies the name of the property within the data object that provides the range color value for each item in the tree map. This value determines the color of the item based on a gradient or range mapping. The Brush property within TreeMapRangeBrush applies colors to items based on RangeColorValuePath values using TreeMapRangeBrushSettings, also defining colors for treemap legend icons, exclusive to TreeMapRangeBrushSettings. The RangeColorValuePath is applicable only when the ShowLegend property of LegendSettings is enabled in the SfTreeMap.

Also, specify the path to the data property containing the text you want to display for the treemap leaf item using the LabelPath property of LeafItemSettings.

XAML

<treemap:SfTreeMap x:Name="treeMap"
                   DataSource="{Binding PopulationDetails}"
                   PrimaryValuePath="Population">
    <treemap:SfTreeMap.BindingContext>
        <local:PopulationViewModel />
    </treemap:SfTreeMap.BindingContext>
    <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapUniformBrushSettings Brush="Orange"/>
    </treemap:SfTreeMap.LeafItemBrushSettings>
</treemap:SfTreeMap>

C#

SfTreeMap treeMap = new SfTreeMap();
PopulationViewModel viewModel = new PopulationViewModel();
treeMap.DataSource = viewModel.PopulationDetails;
treeMap.PrimaryValuePath = "Population";
treeMap.LeafItemBrushSettings = new TreeMapUniformBrushSettings() { Brush = Brush.Orange };
this.Content = treeMap;

NOTE

When publishing in AOT mode on iOS and macOS, ensure that [Preserve(AllMembers = true)] is added to the model class to maintain treemap binding.

Step 6: Add labels

To display text for the leaf items, utilize the LabelPath property within the LeafItemSettings of SfTreeMap. This property allows you to specify the path to the data property containing the text you want to display.

XAML

<treemap:SfTreeMap x:Name="treeMap"
                   DataSource="{Binding PopulationDetails}"
                   PrimaryValuePath="Population">
    <treemap:SfTreeMap.BindingContext>
        <local:PopulationViewModel />
    </treemap:SfTreeMap.BindingContext>
    <treemap:SfTreeMap.LeafItemSettings>
        <treemap:TreeMapLeafItemSettings LabelPath="Country"/>
    </treemap:SfTreeMap.LeafItemSettings>
    <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapUniformBrushSettings Brush="Orange"/>
    </treemap:SfTreeMap.LeafItemBrushSettings>
</treemap:SfTreeMap>

C#

SfTreeMap treeMap = new SfTreeMap();
PopulationViewModel viewModel = new PopulationViewModel();
treeMap.DataSource = viewModel.PopulationDetails;
treeMap.PrimaryValuePath = "Population";
treeMap.LeafItemSettings = new TreeMapLeafItemSettings() { LabelPath = "Country" };
treeMap.LeafItemBrushSettings = new TreeMapUniformBrushSettings() { Brush = Brush.Orange };
this.Content = treeMap;

NOTE

You can refer to our .NET MAUI TreeMap feature tour page for its groundbreaking feature representations. You can also explore our .NET MAUI TreeMap Example that shows you how to render the TreeMap in .NET MAUI.