Class SfTreeMap

The SfTreeMap control that allows you to visually represent hierarchical data with nested rectangles, conveying quantitative information through variations in size and color. It offers comprehensive functionality for providing an easily readable visual form for your data, utilizing rectangles whose sizes are proportional to the visualized values. The control can be populated with hierarchical data represented by a collection of objects or custom classes, providing flexibility in data representation. The SfTreeMap control provides various customization options such as layout types, brush settings, legend settings, tool tip settings, levels, selection mode, and more. It supports setting the currently selected item using the SelectedItems property and allowing user to programmatically select the items within the TreeMap control. You can also customize the appearance of individual leaf items using the LeafItemTemplate.

Inheritance

System.Object

SfView

SfTreeMap

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<Microsoft.Maui.IView>

System.Collections.Generic.ICollection<Microsoft.Maui.IView>

System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement

Inherited Members

SfView.ArrangeOverride(Rect)

SfView.Children

SfView.ClipToBounds

SfView.GetSemanticsNodesCore(Double, Double)

SfView.IDrawableLayout.DrawingOrder

SfView.IDrawableLayout.InvalidateDrawable()

SfView.MeasureOverride(Double, Double)

SfView.OnDraw(ICanvas, RectF)

SfView.OnHandlerChanged()

SfView.OnMeasure(Double, Double)

SfView.Padding

Namespace: Syncfusion.Maui.TreeMap

Assembly: Syncfusion.Maui.TreeMap.dll

Syntax

public class SfTreeMap : SfView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, ITreeMapItemInfo, ITreeMapInfo, ITreeMapHeaderInfo, IParentThemeElement, IThemeElement

Examples

The following code demonstrates, how to bind DataSource and populate tree map items in the SfTreeMap.

# [C#](#tab/tabid-1)

public class EmployeeDetails : INotifyPropertyChanged
{
   private string category;
   private string country;
   private string jobDescription;
   private string jobGroup;
   private int employeesCount;
   public event PropertyChangedEventHandler PropertyChanged;
   public string Category
   {
       get { return category; }
       set
       {
           category = value;
           this.RaiseOnPropertyChanged(nameof(Category));
       }
   }
   public string Country
   {
       get { return country; }
       set
       {
           country = value;
           this.RaiseOnPropertyChanged(nameof(Country));
       }
   }
   public string JobDescription
   {
       get { return jobDescription; }
       set
       {
           jobDescription = value;
           this.RaiseOnPropertyChanged(nameof(JobDescription));
       }
   }
   public string JobGroup
   {
       get { return jobGroup; }
       set
       {
           jobGroup = value;
           this.RaiseOnPropertyChanged(nameof(JobGroup));
       }
   }
   public int EmployeesCount
   {
       get { return employeesCount; }
       set
       {
           employeesCount = value;
           this.RaiseOnPropertyChanged(nameof(EmployeesCount));
       }
   }
   private void RaiseOnPropertyChanged(string propertyName)
   {
       this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
   }
 }

# [C#](#tab/tabid-2)

public class EmployeeViewModel
{
   public EmployeeViewModel()
   {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "USA", JobDescription = "Sales", JobGroup = "Executive", EmployeesCount = 20 },
           new EmployeeDetails() { Category = "Employees", Country = "USA", JobDescription = "Sales", JobGroup = "Analyst", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "USA", JobDescription = "Marketing", EmployeesCount = 40 },
           new EmployeeDetails() { Category = "Employees", Country = "USA", JobDescription = "Management", EmployeesCount = 80 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
           new EmployeeDetails() { Category = "Employees", Country = "Germany", JobDescription = "Sales", JobGroup = "Executive", EmployeesCount = 50 },
           new EmployeeDetails() { Category = "Employees", Country = "Germany", JobDescription = "Sales", JobGroup = "Analyst", EmployeesCount = 60 },
           new EmployeeDetails() { Category = "Employees", Country = "Germany", JobDescription = "Marketing", EmployeesCount = 70 },
           new EmployeeDetails() { Category = "Employees", Country = "Germany", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 80 },
           new EmployeeDetails() { Category = "Employees", Country = "Germany", JobDescription = "Management", EmployeesCount = 10 },
           new EmployeeDetails() { Category = "Employees", Country = "Germany", JobDescription = "Accounts", EmployeesCount = 20 },
           new EmployeeDetails() { Category = "Employees", Country = "UK", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "UK", JobDescription = "HR Executives", EmployeesCount = 50 },
           new EmployeeDetails() { Category = "Employees", Country = "UK", JobDescription = "Accounts", EmployeesCount = 60 },
           new EmployeeDetails() { Category = "Employees", Country = "France", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 70 },
           new EmployeeDetails() { Category = "Employees", Country = "France", JobDescription = "Marketing", EmployeesCount = 100 },
        };
   }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
   }
}

# [XAML](#tab/tabid-3)

<treemap:SfTreeMap x:Name="treeMap"
                   DataSource="{Binding EmployeeDetails}"
                   PrimaryValuePath="EmployeesCount"
                   RangeColorValuePath="EmployeesCount">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
   <treemap:SfTreeMap.LeafItemSettings>
       <treemap:TreeMapLeafItemSettings LabelPath="JobDescription"
                                        TextFormatOption="Wrap">
       </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapRangeBrushSettings>
           <treemap:TreeMapRangeBrushSettings.RangeBrushes>
               <treemap:TreeMapRangeBrush From="10" To="30" Brush="#A4C400"/>
               <treemap:TreeMapRangeBrush From="31" To="50" Brush="#AA00FF"/>
               <treemap:TreeMapRangeBrush From="51" To="80" Brush="#F0A30A"/>
               <treemap:TreeMapRangeBrush From="81" To="100" Brush="#1BA1E2"/>
           </treemap:TreeMapRangeBrushSettings.RangeBrushes>
       </treemap:TreeMapRangeBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
   <treemap:SfTreeMap.Levels>
       <treemap:TreeMapLevel GroupPath="Country"
                             Stroke="Gray">
           <treemap:TreeMapLevel.TextStyle>
               <treemap:TreeMapTextStyle TextColor="Black" />
           </treemap:TreeMapLevel.TextStyle>
       </treemap:TreeMapLevel>
   </treemap:SfTreeMap.Levels>
</treemap:SfTreeMap>

Constructors

SfTreeMap()

Initializes a new instance of the SfTreeMap class.

Declaration

public SfTreeMap()

Fields

DataSourceProperty

Identifies the DataSource dependency property.

Declaration

public static readonly BindableProperty DataSourceProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for DataSource dependency property.

DrillDownHeaderSettingsProperty

Identifies the DrillDownHeaderSettings dependency property.

Declaration

public static readonly BindableProperty DrillDownHeaderSettingsProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for DrillDownHeaderSettings dependency property.

EnableDrillDownProperty

Identifies the EnableDrillDown dependency property.

Declaration

public static readonly BindableProperty EnableDrillDownProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for EnableDrillDown dependency property.

GroupItemBrushSettingsProperty

Identifies the GroupItemBrushSettings dependency property.

Declaration

public static readonly BindableProperty GroupItemBrushSettingsProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for GroupItemBrushSettings dependency property.

LayoutTypeProperty

Identifies the LayoutType dependency property.

Declaration

public static readonly BindableProperty LayoutTypeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for LayoutType dependency property.

LeafItemBrushSettingsProperty

Identifies the LeafItemBrushSettings dependency property.

Declaration

public static readonly BindableProperty LeafItemBrushSettingsProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for LeafItemBrushSettings dependency property.

LeafItemSettingsProperty

Identifies the LeafItemSettings dependency property.

Declaration

public static readonly BindableProperty LeafItemSettingsProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for LeafItemSettings dependency property.

LeafItemTemplateProperty

Identifies the LeafItemTemplate dependency property.

Declaration

public static readonly BindableProperty LeafItemTemplateProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for LeafItemTemplate dependency property.

LegendSettingsProperty

Identifies the LegendSettings dependency property.

Declaration

public static readonly BindableProperty LegendSettingsProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for LegendSettings dependency property.

LevelsProperty

Identifies the Levels dependency property.

Declaration

public static readonly BindableProperty LevelsProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Levels dependency property.

PrimaryValuePathProperty

Identifies the PrimaryValuePath dependency property.

Declaration

public static readonly BindableProperty PrimaryValuePathProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for PrimaryValuePath dependency property.

RangeColorValuePathProperty

Identifies the RangeColorValuePath dependency property.

Declaration

public static readonly BindableProperty RangeColorValuePathProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for RangeColorValuePath dependency property.

SelectedItemsProperty

Identifies the SelectedItems dependency property.

Declaration

public static readonly BindableProperty SelectedItemsProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectedItems dependency property.

SelectedItemStrokeProperty

Identifies the SelectedItemStroke dependency property.

Declaration

public static readonly BindableProperty SelectedItemStrokeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectedItemStroke dependency property.

SelectedItemStrokeWidthProperty

Identifies the SelectedItemStrokeWidth dependency property.

Declaration

public static readonly BindableProperty SelectedItemStrokeWidthProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectedItemStrokeWidth dependency property.

SelectionModeProperty

Identifies the SelectionMode dependency property.

Declaration

public static readonly BindableProperty SelectionModeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SelectionMode dependency property.

ShowToolTipProperty

Identifies the ShowToolTip dependency property.

Declaration

public static readonly BindableProperty ShowToolTipProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ShowToolTip dependency property.

ToolTipSettingsProperty

Identifies the ToolTipSettings dependency property.

Declaration

public static readonly BindableProperty ToolTipSettingsProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ToolTipSettings dependency property.

ToolTipTemplateProperty

Identifies the ToolTipTemplate dependency property.

Declaration

public static readonly BindableProperty ToolTipTemplateProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for ToolTipTemplate dependency property.

Properties

DataSource

Gets or sets a collection used to generate the item in the SfTreeMap.

Declaration

public object DataSource { get; set; }

Property Value

Type	Description
System.Object	The default value is `null`.

Remarks

The DataSource property can take System.Object collection or a custom class collection. When providing a object or custom class collection, it's necessary to map the properties of the object or custom class to the tree map using the PrimaryValuePath and RangeColorValuePath properties.

Examples

The below examples shows, how to set the items collection to the DataSource in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   DataSource="{Binding EmployeeDetails}"
                   PrimaryValuePath="EmployeesCount"
                   RangeColorValuePath="EmployeesCount">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
   <treemap:SfTreeMap.LeafItemSettings>
       <treemap:TreeMapLeafItemSettings LabelPath="JobDescription"
                                        TextFormatOption="Wrap">
       </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapRangeBrushSettings>
           <treemap:TreeMapRangeBrushSettings.RangeBrushes>
               <treemap:TreeMapRangeBrush From="10" To="30" Brush="#A4C400"/>
               <treemap:TreeMapRangeBrush From="31" To="50" Brush="#AA00FF"/>
               <treemap:TreeMapRangeBrush From="51" To="80" Brush="#F0A30A"/>
               <treemap:TreeMapRangeBrush From="81" To="100" Brush="#1BA1E2"/>
           </treemap:TreeMapRangeBrushSettings.RangeBrushes>
       </treemap:TreeMapRangeBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
   <treemap:SfTreeMap.Levels>
       <treemap:TreeMapLevel GroupPath="Country"
                             Stroke="Gray">
           <treemap:TreeMapLevel.TextStyle>
               <treemap:TreeMapTextStyle TextColor="Black" />
           </treemap:TreeMapLevel.TextStyle>
       </treemap:TreeMapLevel>
   </treemap:SfTreeMap.Levels>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category= "Employees", Country="USA", JobDescription="Sales", JobGroup="Executive", EmployeesCount= 20 },
           new EmployeeDetails() { Category= "Employees", Country="USA", JobDescription="Sales", JobGroup="Analyst", EmployeesCount= 30 },
           new EmployeeDetails() { Category= "Employees", Country="USA", JobDescription="Marketing", EmployeesCount= 40 },
           new EmployeeDetails() { Category= "Employees", Country="USA", JobDescription="Management", EmployeesCount= 80 },
           new EmployeeDetails() { Category= "Employees", Country="India", JobDescription="Technical", JobGroup="Testers", EmployeesCount= 100 },
           new EmployeeDetails() { Category= "Employees", Country= "India", JobDescription= "HR Executives", EmployeesCount= 30 },
           new EmployeeDetails() { Category= "Employees", Country= "India", JobDescription= "Accounts", EmployeesCount= 40 },
           new EmployeeDetails() { Category= "Employees", Country= "Germany", JobDescription= "Sales", JobGroup= "Executive", EmployeesCount= 50 },
           new EmployeeDetails() { Category= "Employees", Country= "Germany", JobDescription= "Sales", JobGroup= "Analyst", EmployeesCount= 60 },
           new EmployeeDetails() { Category= "Employees", Country= "Germany", JobDescription= "Marketing", EmployeesCount= 70 },
           new EmployeeDetails() { Category= "Employees", Country= "Germany", JobDescription= "Technical", JobGroup= "Testers", EmployeesCount= 80 },
           new EmployeeDetails() { Category= "Employees", Country= "Germany", JobDescription= "Management", EmployeesCount= 10 },
           new EmployeeDetails() { Category= "Employees", Country= "Germany", JobDescription= "Accounts", EmployeesCount= 20 },
           new EmployeeDetails() { Category= "Employees", Country= "UK", JobDescription= "Technical", JobGroup= "Testers", EmployeesCount= 30 },
           new EmployeeDetails() { Category= "Employees", Country= "UK", JobDescription= "HR Executives", EmployeesCount= 50 },
           new EmployeeDetails() { Category= "Employees", Country= "UK", JobDescription= "Accounts", EmployeesCount= 60 },
           new EmployeeDetails() { Category= "Employees", Country= "France", JobDescription= "Technical", JobGroup= "Testers", EmployeesCount= 70 },
           new EmployeeDetails() { Category= "Employees", Country= "France", JobDescription= "Marketing", EmployeesCount= 100 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

 var viewModel = new EmployeeViewModel();
 this.treeMap.DataSource = viewModel.EmployeeDetails;

DrillDownHeaderSettings

Gets or sets the drill down header settings value

Declaration

public TreeMapDrillDownHeaderSettings DrillDownHeaderSettings { get; set; }

Property Value

Type
TreeMapDrillDownHeaderSettings

EnableDrillDown

Gets or sets the value for the drilldown support

Declaration

public bool EnableDrillDown { get; set; }

Property Value

Type
System.Boolean

GroupItemBrushSettings

Gets or sets the settings for the group item brush, which is used to customize the group items in the SfTreeMap.

Declaration

public TreeMapPaletteBrushSettings GroupItemBrushSettings { get; set; }

Property Value

Type	Description
TreeMapPaletteBrushSettings	The brush settings for group items customization: TreeMapPaletteBrushSettings: Utilize a predefined color palette to render items based on their assigned group, determined by the PrimaryValuePath mapped value.

Remarks

This property specifies the settings for customizing the brush used for group items within the SfTreeMap control. It provides options for predefined palette-based coloring. It is applicable to only when the Levels is enabled.

Examples

The below examples shows, how to set GroupItemBrushSettings property in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   DataSource="{Binding EmployeeDetails}"
                   PrimaryValuePath="EmployeesCount">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
   <treemap:SfTreeMap.LeafItemSettings>
       <treemap:TreeMapLeafItemSettings LabelPath="JobDescription"
                                        TextFormatOption="Wrap">
       </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
    <treemap:SfTreeMap.Levels>
        <treemap:TreeMapLevel GroupPath="Country"/>
    </treemap:SfTreeMap.Levels>
   <treemap:SfTreeMap.GroupItemBrushSettings>
   <treemap:TreeMapPaletteBrushSettings>
       <treemap:TreeMapPaletteBrushSettings.Brushes>
           <SolidColorBrush>#116DF9</SolidColorBrush>
       </treemap:TreeMapPaletteBrushSettings.Brushes>
    </treemap:TreeMapPaletteBrushSettings>
  </treemap:SfTreeMap.GroupItemBrushSettings>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

this.treeMap.GroupItemBrushSettings = new TreeMapPaletteBrushSettings { Brushes = { new SolidColorBrush(Color.FromArgb("#116DF9")) } };

LayoutType

Gets or sets the layout type used to arrange items using a specific layout algorithm.

Declaration

public LayoutType LayoutType { get; set; }

Property Value

Type	Description
LayoutType	The layout type: Squarified: Visualizes data with square-like rectangles, optimizing aspect ratio. SliceAndDiceAuto: Visualizes data in long-thin rectangles, adaptable to high aspect ratio. SliceAndDiceVertical: Arranges TreeMap items vertically using slice and dice technique. SliceAndDiceHorizontal: Arranges TreeMap items horizontally using slice and dice technique.

Remarks

This property defines the method used to arrange items within the control, providing options for different layout algorithms such as squarified layout, slice and dice with automatic direction selection, vertical alignment, or horizontal alignment.

Examples

The below examples shows, how to set LayoutType property in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   LayoutType="SliceAndDiceVertical"
                   DataSource="{Binding EmployeeDetails}"
                   PrimaryValuePath="EmployeesCount"
                   RangeColorValuePath="EmployeesCount">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
   <treemap:SfTreeMap.LeafItemSettings>
       <treemap:TreeMapLeafItemSettings LabelPath="JobDescription"
                                        TextFormatOption="Wrap">
       </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapRangeBrushSettings>
           <treemap:TreeMapRangeBrushSettings.RangeBrushes>
               <treemap:TreeMapRangeBrush From="10" To="30" Brush="#A4C400"/>
               <treemap:TreeMapRangeBrush From="31" To="50" Brush="#AA00FF"/>
               <treemap:TreeMapRangeBrush From="51" To="80" Brush="#F0A30A"/>
               <treemap:TreeMapRangeBrush From="81" To="100" Brush="#1BA1E2"/>
           </treemap:TreeMapRangeBrushSettings.RangeBrushes>
       </treemap:TreeMapRangeBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

this.treeMap.LayoutType = LayoutType.SliceAndDiceVertical;

LeafItemBrushSettings

Gets or sets the settings for the leaf item brush, which is used to customize the leaf items in the SfTreeMap.

Declaration

public TreeMapBrushSettings LeafItemBrushSettings { get; set; }

Property Value

Type	Description
TreeMapBrushSettings	The brush settings for group and leaf items customization: TreeMapUniformBrushSettings: Assigns a single color to represent data uniformly. TreeMapRangeBrushSettings: Maps data ranges to a gradient of colors, creating visual distinctions. TreeMapDesaturationBrushSettings: Modifies color saturation based on data values, emphasizing differences. TreeMapPaletteBrushSettings: Utilizes a predefined color palette to assign colors to distinct data categories based on their assigned group items or leaf items determined by the PrimaryValuePath mapped value.

Remarks

This property specifies the settings for customizing the brush used for leaf items within the SfTreeMap control. It provides options for uniform coloring, gradient-based coloring, desaturation based on data values, or predefined palette-based coloring.

Examples

The below examples shows, how to set LeafItemBrushSettings property in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   LayoutType="SliceAndDiceVertical"
                   DataSource="{Binding EmployeeDetails}"
                   PrimaryValuePath="EmployeesCount">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapUniformBrushSettings Brush="BlueViolet">
       </treemap:TreeMapUniformBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
   <treemap:SfTreeMap.LeafItemSettings>
       <treemap:TreeMapLeafItemSettings LabelPath="JobDescription"
                                        TextFormatOption="Wrap">
       </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

this.treeMap.LeafItemBrushSettings = new TreeMapUniformBrushSettings() { Brush = Brush.BlueViolet };

LeafItemSettings

Gets or sets the settings for the leaf item, which is used to customize the stroke color, stroke width, text style, spacing between items, and text format option in the SfTreeMap.

Declaration

public TreeMapLeafItemSettings LeafItemSettings { get; set; }

Property Value

Type	Description
TreeMapLeafItemSettings	The default value of Stroke is Microsoft.Maui.Controls.Brush.White, StrokeWidth is 1, Spacing is 2, and TextFormatOption is Trim.

Examples

The below examples shows, how to set LeafItemSettings property in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   LayoutType="SliceAndDiceVertical"
                   DataSource="{Binding EmployeeDetails}"
                   PrimaryValuePath="EmployeesCount">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
    <treemap:SfTreeMap.LeafItemSettings>
   <treemap:TreeMapLeafItemSettings LabelPath="JobDescription"
                                    Stroke="Red"
                                    StrokeWidth="3"
                                    Spacing="2"
                                    TextFormatOption="Hide">
    </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapUniformBrushSettings Brush="BlueViolet">
       </treemap:TreeMapUniformBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

this.treeMap.LeafItemSettings = new TreeMapLeafItemSettings() { LabelPath = "JobDescription", Stroke = Brush.Red, StrokeWidth = 3, TextFormatOption =  TextFormatOption.Hide };

LeafItemTemplate

Gets or sets the data template to use for customizing the appearance of individual leaf items in the SfTreeMap.

Declaration

public DataTemplate LeafItemTemplate { get; set; }

Property Value

Type
Microsoft.Maui.Controls.DataTemplate

Remarks

The TreeMapItemInfo will be set as binding context.

Examples

The below examples shows, how to use the LeafItemTemplate property in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   PrimaryValuePath="EmployeesCount"
                   DataSource="{Binding EmployeeDetails}">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
   <treemap:SfTreeMap.LeafItemTemplate>
     <DataTemplate>
       <Grid Background="Orange">
           <Label Text="{Binding PrimaryValueText}"
                  TextColor="Green"
                  Margin="6"/>
       </Grid>
   </DataTemplate>
   </treemap:SfTreeMap.LeafItemTemplate>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapUniformBrushSettings Brush="BlueViolet">
       </treemap:TreeMapUniformBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
   <treemap:SfTreeMap.LeafItemSettings>
       <treemap:TreeMapLeafItemSettings LabelPath="JobDescription"
                                        TextFormatOption="Wrap">
       </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

LegendSettings

Gets or sets the settings for the legend, which is used to customize the icon size, text style, icon type, placement, show legend and legend size in the SfTreeMap.

Declaration

public TreeMapLegendSettings LegendSettings { get; set; }

Property Value

Type	Description
TreeMapLegendSettings	The default value of IconSize is new Size(20, 20), IconType is Rectangle, Placement is Top, and ShowLegend is false.

Examples

The below examples shows, how to set LegendSettings property in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   DataSource="{Binding EmployeeDetails}"
                   PrimaryValuePath="EmployeesCount"
                   RangeColorValuePath="EmployeesCount">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
   <treemap:SfTreeMap.LegendSettings>
   <treemap:TreeMapLegendSettings ShowLegend="True"
                                  IconSize="18,18"
                                  IconType="Diamond"
                                  Placement="Left"/>
   </treemap:SfTreeMap.LegendSettings>
   <treemap:SfTreeMap.LeafItemSettings>
       <treemap:TreeMapLeafItemSettings LabelPath="JobDescription"
                                        TextFormatOption="Wrap">
       </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapRangeBrushSettings>
           <treemap:TreeMapRangeBrushSettings.RangeBrushes>
               <treemap:TreeMapRangeBrush From="10" To="30" Brush="#A4C400"/>
               <treemap:TreeMapRangeBrush From="31" To="50" Brush="#AA00FF"/>
               <treemap:TreeMapRangeBrush From="51" To="80" Brush="#F0A30A"/>
               <treemap:TreeMapRangeBrush From="81" To="100" Brush="#1BA1E2"/>
           </treemap:TreeMapRangeBrushSettings.RangeBrushes>
       </treemap:TreeMapRangeBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

this.treeMap.LegendSettings = new TreeMapLegendSettings() { ShowLegend = true, IconSize = new Size(18, 18), IconType = LegendIconType.Diamond, Placement = LegendPlacement.Top };

Levels

Gets or sets the collection of levels defining the hierarchical structure for grouped visualization of data in the SfTreeMap.

Declaration

public ObservableCollection<TreeMapLevel> Levels { get; set; }

Property Value

Type	Description
System.Collections.ObjectModel.ObservableCollection<TreeMapLevel>	The collection of TreeMapLevel objects representing the hierarchical structure for grouped visualization of data.

Remarks

This property specifies the levels that define the hierarchical structure of the tree map in the SfTreeMap. Each level can contain its own set of items, and the nesting of levels determines the hierarchical layout of the tree map.

Examples

The below examples shows, how to set Levels property in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   DataSource="{Binding EmployeeDetails}"
                   PrimaryValuePath="EmployeesCount">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
   <treemap:SfTreeMap.Levels>
     <treemap:TreeMapLevel GroupPath="Country"
                           StrokeWidth="1"
                           Background="Transparent"
                           Stroke="Gray">
      <treemap:TreeMapLevel.TextStyle>
         <treemap:TreeMapTextStyle TextColor="Black"/>
      </treemap:TreeMapLevel.TextStyle>
     </treemap:TreeMapLevel>
    </treemap:SfTreeMap.Levels>
   <treemap:SfTreeMap.LeafItemSettings>
      <treemap:TreeMapLeafItemSettings LabelPath="JobDescription">
   </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapUniformBrushSettings Brush="BlueViolet">
       </treemap:TreeMapUniformBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

this.treeMap.Levels.Add(new TreeMapLevel() { GroupPath = "Country", Background = Brush.Transparent, Stroke = Brush.Gray, StrokeWidth = 1, TextStyle = new TreeMapTextStyle() { TextColor = Colors.Black } });

Declaration

public string PrimaryValuePath { get; set; }

Property Value

Type	Description
System.String	The default value of PrimaryValuePath is System.String.Empty.

Remarks

This property specifies the name of the property in the data object that provides the primary value used to determine the size of each item in the tree map. The primary value typically represents the main quantitative data associated with each item.

Examples

The below examples shows, how to set PrimaryValuePath property in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   PrimaryValuePath="EmployeesCount"
                   DataSource="{Binding EmployeeDetails}">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapUniformBrushSettings Brush="BlueViolet">
       </treemap:TreeMapUniformBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
   <treemap:SfTreeMap.LeafItemSettings>
       <treemap:TreeMapLeafItemSettings LabelPath="JobDescription"
                                        TextFormatOption="Wrap">
       </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

this.treeMap.PrimaryValuePath = "EmployeesCount";

Declaration

public string RangeColorValuePath { get; set; }

Property Value

Type	Description
System.String	The name of the property containing the range color value data for each item.

Remarks

This property specifies the name of the property in the data object that provides the range color value used to determine the color of each item in the tree map. The range color value typically represents a quantitative data range associated with each item, which is used to determine the color of the item based on a gradient or range mapping.

Examples

The below examples shows, how to set RangeColorValuePath property in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   PrimaryValuePath="EmployeesCount"
                   RangeColorValuePath="EmployeesCount"
                   DataSource="{Binding EmployeeDetails}">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
    <treemap:SfTreeMap.ToolTipSettings>
   <treemap:TreeMapToolTipSettings Background="Blue"
                                   Stroke="Red"/>
   </treemap:SfTreeMap.ToolTipSettings>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapUniformBrushSettings Brush="BlueViolet">
       </treemap:TreeMapUniformBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
   <treemap:SfTreeMap.LeafItemSettings>
       <treemap:TreeMapLeafItemSettings LabelPath="JobDescription"
                                        TextFormatOption="Wrap">
       </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

SelectedItems

Gets or sets the collection of tree map item representing the currently selected items in the SfTreeMap.

Declaration

public ObservableCollection<TreeMapItemInfo> SelectedItems { get; set; }

Property Value

Type	Description
System.Collections.ObjectModel.ObservableCollection<TreeMapItemInfo>	The tree map selected items: If the SelectionMode is Single, only the first item in the SelectedItems collection will be selected. If the SelectionMode is Multiple, all items in the SelectedItems collection will be selected. If the SelectionMode is None, no items will be selected.

Remarks

This property provides access to the collection of tree map item information for the currently selected items within the SfTreeMap.

Examples

The below examples shows, how to set SelectedItems property in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   DataSource="{Binding EmployeeDetails}"
                   PrimaryValuePath="EmployeesCount">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapUniformBrushSettings Brush="BlueViolet">
       </treemap:TreeMapUniformBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
   <treemap:SfTreeMap.LeafItemSettings>
       <treemap:TreeMapLeafItemSettings LabelPath="JobDescription"
                                        TextFormatOption="Wrap">
       </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

this.treeMap.SelectedItems.Add(new TreeMapItemInfo() { Item = "India", GroupLevel= 0});

SelectedItemStroke

Gets or sets the stroke color for the selected item in the SfTreeMap.

Declaration

public Brush SelectedItemStroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	The default value of SelectedItemStroke is new SolidColorBrush(Color.FromArgb("#1C1B1F")).

Remarks

It is applicable to only when the selection mode is set to Single, or Multiple.

Examples

The below examples shows, how to set SelectedItemStroke property in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   SelectedItemStroke="Red"
                   DataSource="{Binding EmployeeDetails}"
                   PrimaryValuePath="EmployeesCount"
                   RangeColorValuePath="EmployeesCount">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
   <treemap:SfTreeMap.LeafItemSettings>
       <treemap:TreeMapLeafItemSettings LabelPath="JobDescription"
                                        TextFormatOption="Wrap">
       </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapRangeBrushSettings>
           <treemap:TreeMapRangeBrushSettings.RangeBrushes>
               <treemap:TreeMapRangeBrush From="10" To="30" Brush="#A4C400"/>
               <treemap:TreeMapRangeBrush From="31" To="50" Brush="#AA00FF"/>
               <treemap:TreeMapRangeBrush From="51" To="80" Brush="#F0A30A"/>
               <treemap:TreeMapRangeBrush From="81" To="100" Brush="#1BA1E2"/>
           </treemap:TreeMapRangeBrushSettings.RangeBrushes>
       </treemap:TreeMapRangeBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

this.treeMap.SelectedItemStroke = Brush.Red;

SelectedItemStrokeWidth

Gets or sets the stroke width for the selected item in the SfTreeMap.

Declaration

public double SelectedItemStrokeWidth { get; set; }

Property Value

Type	Description
System.Double	The default value of SelectedItemStrokeWidth is 2d.

Remarks

It is applicable to only when the selection mode is set to Single, or Multiple.

Examples

The below examples shows, how to set SelectedItemStrokeWidth property in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   SelectedItemStrokeWidth="3"
                   DataSource="{Binding EmployeeDetails}"
                   PrimaryValuePath="EmployeesCount"
                   RangeColorValuePath="EmployeesCount">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
   <treemap:SfTreeMap.LeafItemSettings>
       <treemap:TreeMapLeafItemSettings LabelPath="JobDescription"
                                        TextFormatOption="Wrap">
       </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapRangeBrushSettings>
           <treemap:TreeMapRangeBrushSettings.RangeBrushes>
               <treemap:TreeMapRangeBrush From="10" To="30" Brush="#A4C400"/>
               <treemap:TreeMapRangeBrush From="31" To="50" Brush="#AA00FF"/>
               <treemap:TreeMapRangeBrush From="51" To="80" Brush="#F0A30A"/>
               <treemap:TreeMapRangeBrush From="81" To="100" Brush="#1BA1E2"/>
           </treemap:TreeMapRangeBrushSettings.RangeBrushes>
       </treemap:TreeMapRangeBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

this.treeMap.SelectedItemStrokeWidth = 3;

Declaration

public SelectionMode SelectionMode { get; set; }

Property Value

Type	Description
SelectionMode	The selection mode: If the SelectionMode is Single, only one item can be selected at a time. If the SelectionMode is Multiple, multiple items can be selected simultaneously. If the SelectionMode is None, no items will be selected. The default value of SelectionMode is Single.

Remarks

This property specifies how item selection behaves within the SfTreeMap. Depending on the selection mode, users can select one or multiple items, or item selection can be disabled entirely.

Examples

The below examples shows, how to set SelectionMode property in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   SelectionMode="Multiple"
                   DataSource="{Binding EmployeeDetails}"
                   PrimaryValuePath="EmployeesCount">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapUniformBrushSettings Brush="BlueViolet">
       </treemap:TreeMapUniformBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
   <treemap:SfTreeMap.LeafItemSettings>
       <treemap:TreeMapLeafItemSettings LabelPath="JobDescription"
                                        TextFormatOption="Wrap">
       </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

this.treeMap.SelectionMode = SelectionMode.Multiple;

ShowToolTip

Gets or sets a value indicating whether tool tips are displayed for items in the SfTreeMap.

Declaration

public bool ShowToolTip { get; set; }

Property Value

Type	Description
System.Boolean	The default value of ShowToolTip is false.

Remarks

This property determines whether tool tips are shown when users interact with items in the SfTreeMap. The tool tips typically provide additional information about the item being interacted with, such as its item value. On Windows and macOS, tool tips are displayed on mouse hover. On all platforms, including Android, Windows, macOS, and iOS, item selection is enabled, allowing users to interactively select items.

Examples

The below examples shows, how to set ShowToolTip property in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   ShowToolTip="True"
                   DataSource="{Binding EmployeeDetails}"
                   PrimaryValuePath="EmployeesCount">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapUniformBrushSettings Brush="BlueViolet">
       </treemap:TreeMapUniformBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
   <treemap:SfTreeMap.LeafItemSettings>
       <treemap:TreeMapLeafItemSettings LabelPath="JobDescription"
                                        TextFormatOption="Wrap">
       </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

this.treeMap.ShowToolTip = true;

ToolTipSettings

Gets or sets the settings for the tool tips, which is used to customize the background, duration, stroke, and text style in the SfTreeMap.

Declaration

public TreeMapToolTipSettings ToolTipSettings { get; set; }

Property Value

Type	Description
TreeMapToolTipSettings	The default value of Background is Microsoft.Maui.Controls.Brush.Black, Duration is System.TimeSpan.FromSeconds(System.Double), Stroke is Microsoft.Maui.Controls.Brush.Transparent.

Remarks

This property determines whether tool tips are shown when users interact with items in the SfTreeMap. The tool tips typically provide additional information about the item being interacted with, such as its item value. On Windows and macOS, tool tips are displayed on mouse hover. The TreeMapItemInfo will be set as binding context. On all platforms, including Android, WinUI, macOS, and iOS, item selection is enabled, allowing users to interactively select items.

Examples

The below examples shows, how to set ToolTipSettings property in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   ShowToolTip="True"
                   DataSource="{Binding EmployeeDetails}"
                   PrimaryValuePath="EmployeesCount">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
    <treemap:SfTreeMap.ToolTipSettings>
     <treemap:TreeMapToolTipSettings Background="Blue"
                                     Stroke="Red"/>
    </treemap:SfTreeMap.ToolTipSettings>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapUniformBrushSettings Brush="BlueViolet">
       </treemap:TreeMapUniformBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
   <treemap:SfTreeMap.LeafItemSettings>
       <treemap:TreeMapLeafItemSettings LabelPath="JobDescription"
                                        TextFormatOption="Wrap">
       </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

this.treeMap.ToolTipSettings = new TreeMapToolTipSettings() { Background = Brush.Blue, Stroke = Brush.Red };

Declaration

public DataTemplate ToolTipTemplate { get; set; }

Property Value

Type
Microsoft.Maui.Controls.DataTemplate

Remarks

The TreeMapItemInfo will be set as binding context.

Examples

The below examples shows, how to use the ToolTipTemplate property in the SfTreeMap.

<treemap:SfTreeMap x:Name="treeMap"
                   PrimaryValuePath="EmployeesCount"
                   DataSource="{Binding EmployeeDetails}">
   <treemap:SfTreeMap.BindingContext>
       <local:EmployeeViewModel />
   </treemap:SfTreeMap.BindingContext>
   <treemap:SfTreeMap.ToolTipTemplate>
     <DataTemplate>
       <Grid Background="Orange">
           <Label Text="{Binding Item.EmployeesCount}"
                  TextColor="Green"
                  Margin="6"/>
       </Grid>
   </DataTemplate>
   </treemap:SfTreeMap.ToolTipTemplate>
   <treemap:SfTreeMap.LeafItemBrushSettings>
       <treemap:TreeMapUniformBrushSettings Brush="BlueViolet">
       </treemap:TreeMapUniformBrushSettings>
   </treemap:SfTreeMap.LeafItemBrushSettings>
   <treemap:SfTreeMap.LeafItemSettings>
       <treemap:TreeMapLeafItemSettings LabelPath="JobDescription">
       </treemap:TreeMapLeafItemSettings>
   </treemap:SfTreeMap.LeafItemSettings>
</treemap:SfTreeMap>

public class EmployeeDetails
{
   public string Category { get; set; }
   public string Country { get; set; }
   public string JobDescription { get; set; }
   public string JobGroup { get; set; }
   public int EmployeesCount { get; set; }
}

public class EmployeeViewModel
{
    public EmployeeViewModel()
    {
       this.EmployeeDetails = new ObservableCollection<EmployeeDetails>()
       {
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeesCount = 100 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "HR Executives", EmployeesCount = 30 },
           new EmployeeDetails() { Category = "Employees", Country = "India", JobDescription = "Accounts", EmployeesCount = 40 },
       };
    }
   public ObservableCollection<EmployeeDetails> EmployeeDetails
   {
       get;
       set;
    }
}

Methods

ArrangeContent(Rect)

Arranges the content of the tree map view within the specified bounds.

Declaration

protected override Size ArrangeContent(Rect bounds)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.Rect	bounds	The available bounds.

Returns

Type	Description
Microsoft.Maui.Graphics.Size	The layout size.

Overrides

SfView.ArrangeContent(Rect)

MeasureContent(Double, Double)

Measures the size of the content within the tree map view based on the provided width and height constraints.

Declaration

protected override Size MeasureContent(double widthConstraint, double heightConstraint)

Parameters

Type	Name	Description
System.Double	widthConstraint	The maximum width request of the layout.
System.Double	heightConstraint	The maximum height request of the layout.

Returns

Type	Description
Microsoft.Maui.Graphics.Size	The maximum size of the layout.

Overrides

SfView.MeasureContent(Double, Double)

OnBindingContextChanged()

Invokes on the binding context of the view changed.

Declaration

protected override void OnBindingContextChanged()

Overrides

SfView.OnBindingContextChanged()

OnSizeAllocated(Double, Double)

Handles the size allocation for the tree map control.

Declaration

protected override void OnSizeAllocated(double width, double height)

Parameters

Type	Name	Description
System.Double	width	The width request.
System.Double	height	The height request.

Events

SelectionChanged

Occurs when the selection within the tree map item is changed.

Declaration

public event EventHandler<TreeMapSelectionChangedEventArgs> SelectionChanged

Event Type

Type
System.EventHandler<TreeMapSelectionChangedEventArgs>

Examples

The following code demonstrates, how to use the SfTreeMap's selection changed event.

this.treeMap.SelectionChanged += this.OnTreeMapSelectionChanged;
private void OnTreeMapSelectionChanged(object sender, Syncfusion.Maui.TreeMap.TreeMapSelectionChangedEventArgs e)
{
   var oldItems = e.OldItems;
   var newItems = e.NewItems;
   string groupName = e.Category;
   int groupLevel = e.GroupLevel;
   bool isSelected = e.IsSelected;
}

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<>

System.Collections.Generic.ICollection<>

System.Collections.Generic.IEnumerable<>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement

Class SfTreeMap

Inheritance

Implements

Inherited Members

Namespace: Syncfusion.Maui.TreeMap

Assembly: Syncfusion.Maui.TreeMap.dll

Syntax

Examples

Constructors

SfTreeMap()

Declaration

Fields

DataSourceProperty

Declaration

Field Value

DrillDownHeaderSettingsProperty

Declaration

Field Value

EnableDrillDownProperty

Declaration

Field Value

GroupItemBrushSettingsProperty

Declaration

Field Value

LayoutTypeProperty

Declaration

Field Value

LeafItemBrushSettingsProperty

Declaration

Field Value

LeafItemSettingsProperty

Declaration

Field Value

LeafItemTemplateProperty

Declaration

Field Value

LegendSettingsProperty

Declaration

Field Value

LevelsProperty

Declaration

Field Value

PrimaryValuePathProperty

Declaration

Field Value

RangeColorValuePathProperty

Declaration

Field Value

SelectedItemsProperty

Declaration

Field Value

SelectedItemStrokeProperty

Declaration

Field Value

SelectedItemStrokeWidthProperty

Declaration

Field Value

SelectionModeProperty

Declaration

Field Value

ShowToolTipProperty

Declaration

Field Value

ToolTipSettingsProperty

Declaration

Field Value

ToolTipTemplateProperty

Declaration

Field Value

Properties

DataSource

Declaration

Property Value

Remarks

Examples

See Also

DrillDownHeaderSettings

Declaration

Property Value

EnableDrillDown