How to position the legend in .NET MAUI TreeMap (SfTreeMap)?

In the Syncfusion® .NET MAUI TreeMap control, you can position the legend by configuring the LegendPlacement property through the following steps.

Step1:
Initialize the SfTreeMap control and configure LegendSettings with ShowLegend and Placement as shown in the following code.

XAML

<treemap:SfTreeMap x:Name="treeMap">
   <treemap:SfTreeMap.LegendSettings>
       <treemap:TreeMapLegendSettings ShowLegend="True"
                                      Placement="Top" />
   </treemap:SfTreeMap.LegendSettings>
</treemap:SfTreeMap>

Step2:
Create the DataSource and set the PrimaryValuePath as shown in the following code.

XAML

<treemap:SfTreeMap x:Name="treeMap"
                  DataSource="{Binding PopulationDetails}"
                  RangeColorValuePath="Population"
                  PrimaryValuePath="Population" >
   <treemap:SfTreeMap.LegendSettings>
       <treemap:TreeMapLegendSettings ShowLegend="True"
                                      Placement="Top" />
   </treemap:SfTreeMap.LegendSettings>
</treemap:SfTreeMap>

C#

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

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;
   }
}

Step3:
To dynamically change the legend placement, use a ComboBox control and bind it to a collection of LegendPlacement types.

XAML

<editors:SfComboBox x:Name="comboBox"
                   DisplayMemberPath="Name"
                   TextMemberPath="Name"
                   ItemsSource="{Binding LegendPlacement}">
</editors:SfComboBox>

Step4:
You can set the LegendPlacement for the TreeMap inside the ComboBox’s SelectionChanged event. This event triggers whenever the user selects an item from the ComboBox, allowing you to dynamically change the LegendPlacement of the TreeMap based on the user’s selection.

C#

this.comboBox.SelectionChanged += OnComboBoxSelectionChanged;
private void OnComboBoxSelectionChanged(object? sender, Syncfusion.Maui.Inputs.SelectionChangedEventArgs e)
{
   if (comboBox.SelectedIndex == 0)
   {
       treeMap.LegendSettings.Placement = LegendPlacement.Top;
   }
   else if (comboBox.SelectedIndex == 1)
   {
       treeMap.LegendSettings.Placement = LegendPlacement.Bottom;
   }
} 

Output:

Download the complete sample from GitHub.

Conclusion:
I hope you enjoyed learning how to position the legend in the .NET MAUI TreeMap (SfTreeMap).

You can refer to our .NET MAUI TreeMap feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI TreeMap documentation to understand how to present and manipulate data.

You can check out our .NET MAUI components from the License and Downloads page for current customers. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI TreeMap and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!