How to change the layout type in .NET MAUI TreeMap (SfTreeMap)?

In the Syncfusion® .Net MAUI TreeMap control, you can change the LayoutType by following these steps:

Step1:

Initialize the SfTreeMap control and add the LayoutType to the SfTreeMap as shown in the following code.

XAML

<treemap:SfTreeMap x:Name="treeMap"
                  LayoutType="SliceAndDiceHorizontal">
</treemap:SfTreeMap>

Step2:

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

XAML

<treemap:SfTreeMap x:Name="treeMap"
                   LayoutType="SliceAndDiceHorizontal"
                   DataSource="{Binding PopulationDetails}"
                   PrimaryValuePath="Population">
</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:

Dynamically change the LayoutType using the MAUI ComboBox control. To achieve this, create a ComboBox control and bind a collection of layout types to its ItemsSource property. This will populate the ComboBox with the available layout types, allowing users to select from them dynamically.

XAML

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

Step4:

Set the LayoutType for the SfTreeMap inside the ComboBox’s SelectionChanged event. This event triggers whenever the user selects an item from the ComboBox, allowing you to dynamically change the LayoutType of the SfTreeMap based on the user’s selection.

C#

this.comboBox.SelectionChanged += OnComboBoxSelectionChanged;
private void OnComboBoxSelectionChanged(object? sender, Syncfu-sion.Maui.Inputs.SelectionChangedEventArgs e)
{
    if (comboBox.SelectedIndex == 0)
    {
        treeMap.LayoutType = LayoutType.Squarified;
    }
    else if (comboBox.SelectedIndex == 1)
    {
        treeMap.LayoutType = LayoutType.SliceAndDiceAuto;
    }
    else if (comboBox.SelectedIndex == 2)
    {
        treeMap.LayoutType = LayoutType.SliceAndDiceHorizontal;
    }
    else if (comboBox.SelectedIndex == 3)
    {
        treeMap.LayoutType = LayoutType.SliceAndDiceVertical;
    }
}

Download the complete sample from GitHub

Output:

Conclusion:
I hope you enjoyed learning how to change the layout type in .NET MAUI TreeMap (SfTreeMap).

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

For current customers, check out our .NET MAUI components from the License and Downloads page. 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. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!