Introducing the New .NET MAUI TreeMap Control
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (173).NET Core  (29).NET MAUI  (207)Angular  (109)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (215)BoldSign  (14)DocIO  (24)Essential JS 2  (107)Essential Studio  (200)File Formats  (66)Flutter  (132)JavaScript  (220)Microsoft  (118)PDF  (81)Python  (1)React  (100)Streamlit  (1)Succinctly series  (131)Syncfusion  (912)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (51)Windows Forms  (61)WinUI  (68)WPF  (158)Xamarin  (161)XlsIO  (36)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (147)Chart  (130)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (63)Development  (625)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (40)Extensions  (22)File Manager  (7)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (505)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (386)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (589)What's new  (331)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Introducing the New .NET MAUI TreeMap Control

Introducing the New .NET MAUI TreeMap Control

TLDR: Exploring the user-friendly features of the new Syncfusion .NET MAUI TreeMap control and the steps to integrate it in a .NET MAUI application.

We are delighted to introduce another data visualization control in the Syncfusion .NET MAUI suite for the 2024 Volume 1 release, the all-new .NET MAUI TreeMap control.

The .NET MAUI TreeMap control visually represents hierarchical data using nested rectangles, sized and colored based on underlying values. It efficiently displays grouped and nested data structures, offering extensive customization options and supporting item selection.

In this blog, we’ll delve into the key features of the .NET MAUI TreeMap and outline the steps to get started!

Key features

The .NET MAUI TreeMap Control provides support for the following key features:

Let’s take a closer look at these features!

Data binding

The .NET MAUI TreeMap control seamlessly binds hierarchical data structures, visually representing the data into groups with leaf items as rectangles, providing precise data representation.

Data binding feature in .NET MAUI TreeMap control
Data binding feature in .NET MAUI TreeMap control

Layout types

The .NET MAUI TreeMap control offers multiple layout types to organize hierarchical data effectively. The layout types include squarifiedslice and dice horizontalslice and dice vertical, and slice and dice auto.

Squarified layout in .NET MAUI TreeMap control
Squarified layout 
Slice and dice horizontal layout in .NET MAUI TreeMap control
Slice and dice horizontal layout 
Slice and dice vertical layout in .NET MAUI TreeMap control
Slice and dice vertical layout 

Different layout types in the .NET MAUI TreeMap control

Based on the high aspect ratio, the slice and dice auto layout visualizes the .NET MAUI TreeMap in long, thin rectangles vertically or horizontally.

Levels

The .NET MAUI TreeMap control seamlessly integrates multiple hierarchical data levels for richer and more detailed visualizations.

Levels feature in the .NET MAUI TreeMap control
Levels feature in the .NET MAUI TreeMap control

Legends

You can use legends to add additional information for interpreting a TreeMap with various colors, shapes, and more.

Legends in the .NET MAUI TreeMap control
Legends in the .NET MAUI TreeMap control

Tooltips

When the mouse hovers over items, the interactive TreeMap displays the details about the items’ values in tooltips.

Tooltips in the .NET MAUI TreeMap control
Tooltips in the .NET MAUI TreeMap control

Brush settings

Brush settings customize the fill colors for leaf items based on ranges or values. There are four brush settings available:

  • UniformBrushSettings,
  • RangeBrushSettings,
  • DesaturationBrushSettings,
  • PaletteBrushSettings.

Each setting provides unique options for defining and applying color schemes, enhancing the TreeMap visualization.

Uniform brush
Uniform brush
Range brush
Range brush
Desaturation brush
Palette brush
Palette brush

Different brush settings in the .NET MAUI TreeMap control

Selection

With the selection feature, you can distinguish specific groups or items, with tooltips providing additional information during interaction.

Selecting items in the .NET MAUI TreeMap control
Selecting items in the .NET MAUI TreeMap control

Appearance customization

The .NET MAUI TreeMap control allows users to customize the stroke color, stroke width, background color, selection color, data template, and more.

Appearance customization in .NET MAUI TreeMap
Appearance customization in .NET MAUI TreeMap

Note: For more details, refer to the .NET MAUI TreeMap documentation.

Getting started with the .NET MAUI TreeMap control

We have explored the key features of the .NET MAUI TreeMap control. Let’s see how to integrate the control in your .NET MAUI app.

Step 1: Create a new .NET MAUI app

Open Visual Studio and create a new .NET MAUI application.

Step 2: Add the required NuGet package

Syncfusion .NET MAUI components are available in the NuGet Gallery. To add the SfTreeMap to your project, open the NuGet package manager in Visual Studio and search for Syncfusion.Maui.TreeMap, and install it.

Step 3: Import and initialize the .NET MAUI TreeMap control

Now, add the Syncfusion.Maui.TreeMap namespace to your XAML page, and initialize the SfTreeMap control.

Refer to the following code example.

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

Step 4: Register the Syncfusion core handler

Then, register the Syncfusion core handler in the MauiProgram.cs file.

using Syncfusion.Maui.Core.Hosting;
public static class MauiProgram
{
   public static MauiApp CreateMauiApp()
   {
       var builder = MauiApp.CreateBuilder();
       builder.ConfigureSyncfusionCore();      
   }
}

Step 5: Populate the TreeMap data source

Let’s create a model class and view model data using the actual data. Then, bind the DataSource of TreeMap to the XAML page.

Creating a model class

public class PopulationDetails
{
    public string Country { get; set; }
    public string Continent { get; set; }
    public int Population { get; set; }
}

Create a view model data with the actual data

public class PopulationViewModel
{
    public PopulationViewModel()
    {
        this.PopulationDetails = new ObservableCollection<PopulationDetails>()
        {
            new PopulationDetails() { Continent ="North America", Country = "United States of America", Population = 339996564 },
            new PopulationDetails() { Continent ="South America", Country = "Brazil", Population = 216422446 },
            new PopulationDetails() { Continent ="North America", Country = "Mexico", Population = 128455567 },
            new PopulationDetails() { Continent ="South America", Country = "Colombia", Population = 52085168 },
            new PopulationDetails() { Continent ="South America", Country = "Argentina", Population = 45773884 },
            new PopulationDetails() { Continent ="North America", Country = "Canada", Population = 38781292 },
            new PopulationDetails() { Continent ="South America", Country = "Peru", Population = 34352719 },
            new PopulationDetails() { Continent ="South America", Country = "Venezuela", Population = 28838499 },
            new PopulationDetails() { Continent ="South America", Country = "Chile", Population = 19629590 },
            new PopulationDetails() { Continent ="South America", Country = "Ecuador", Population = 18190484 },
            new PopulationDetails() { Continent ="North America", Country = "Guatemala", Population = 18092026 },
            new PopulationDetails() { Continent ="South America", Country = "Bolivia", Population = 12388571 },
            new PopulationDetails() { Continent ="North America", Country = "Honduras", Population = 10593798 },
            new PopulationDetails() { Continent ="North America", Country = "Nicaragua", Population = 7046311 },
            new PopulationDetails() { Continent ="South America", Country = "Paraguay", Population = 6861524 },
            new PopulationDetails() { Continent ="North America", Country = "El Salvador", Population = 6364943 },
            new PopulationDetails() { Continent ="North America", Country = "Costa Rica", Population = 5212173 },
            new PopulationDetails() { Continent ="South America", Country = "Uruguay", Population = 3423109 },
        };
    }

    public ObservableCollection<PopulationDetails> PopulationDetails { get, set, }
}

Bind the DataSource of TreeMap

<treemap:SfTreeMap x:Name="treeMap"
                   DataSource="{Binding PopulationDetails}"
                   RangeColorValuePath="Population"
                   PrimaryValuePath="Population"
                   ShowToolTip="True">
 <treemap:SfTreeMap.BindingContext>
  <local:PopulationViewModel/>
 </treemap:SfTreeMap.BindingContext>
 <treemap:SfTreeMap.LeafItemSettings>
  <treemap:TreeMapLeafItemSettings LabelPath="Country">
  </treemap:TreeMapLeafItemSettings>
 </treemap:SfTreeMap.LeafItemSettings>
 <treemap:SfTreeMap.LeafItemBrushSettings>
  <treemap:TreeMapRangeBrushSettings>
   <treemap:TreeMapRangeBrushSettings.RangeBrushes>
    <treemap:TreeMapRangeBrush LegendLabel="50M - 1B"
                               From="50000000"
                               To="1000000000" 
                               Brush ="#26A7C5" />
    <treemap:TreeMapRangeBrush LegendLabel="10M - 50M"
                               From="10000000"
                               To="50000000" 
                               Brush ="#35D2E5" />
    <treemap:TreeMapRangeBrush LegendLabel="0.1M - 10M"
                               From="100000" 
                               To="10000000"  
                               Brush= "#65EFEF" />
   </treemap:TreeMapRangeBrushSettings.RangeBrushes>
  </treemap:TreeMapRangeBrushSettings>
 </treemap:SfTreeMap.LeafItemBrushSettings>
 <treemap:SfTreeMap.LegendSettings>
  <treemap:TreeMapLegendSettings ShowLegend="True"/>
 </treemap:SfTreeMap.LegendSettings>
 <treemap:SfTreeMap.ToolTipTemplate>
  <DataTemplate>
   <StackLayout Orientation="Vertical">
    <StackLayout Orientation="Horizontal">
     <Label Text="Country:"
            TextColor="White"
            Padding="5,0,0,0"
            FontSize="Caption"
            FontAttributes="Bold"/>
     <Label Text="{Binding Item.Country}"
            TextColor="White"
            FontSize="Caption"
            Padding="5,0,0,0"/>
    </StackLayout>
    <StackLayout Orientation="Horizontal"
                 Margin="0,3,0,0">
     <Label Text="Continent:"
            TextColor="White" 
            Padding="5,0,0,0"
            FontSize="Caption"
            FontAttributes="Bold"/>
     <Label Text="{Binding Item.Continent}"
            TextColor="White"
            FontSize="Caption"
            Padding="5,0,0,0"/>
    </StackLayout>
    <StackLayout Orientation="Horizontal"
                 Margin="0,3,0,0">
     <Label Text="Population:" 
            TextColor="White"
            FontSize="Caption"
            Padding="5,0,0,0"
            FontAttributes="Bold"/>
     <Label Text="{Binding Item.Population}"
            TextColor="White"
            FontSize="Caption"
            Padding="5,0,0,0"/>
    </StackLayout>
   </StackLayout>
  </DataTemplate>
 </treemap:SfTreeMap.ToolTipTemplate>
</treemap:SfTreeMap>

Now, you can run the application and visualize the specified data in the .NET MAUI TreeMap control.

Visualizing data by integrating the TreeMap control in a .NET MAUI app
Visualizing data by integrating the TreeMap control in a .NET MAUI app

References

For more details, refer to the .NET MAUI TreeMap control demo on GitHub and getting started documentation.

Supercharge your cross-platform apps with Syncfusion's robust .NET MAUI controls.

Conclusion

Thanks for reading! In this blog, we’ve explored the features of the new .NET MAUI TreeMap control introduced in the Essential Studio 2024 Volume 1 release. Check out our Release Notes and What’s New pages to see the other updates in this release, and leave your feedback in the comments section below.

For existing Syncfusion customers, the newest version of Essential Studio is available on the license and downloads page. If you are not a customer, try our 30-day free trial to check out these new features.

You can contact us through our support forumsfeedback portal, or support portal. We are always happy to assist you!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed