Data Binding in Xamarin TreeMap (SfTreeMap)
18 May 20215 minutes to read
The TreeMap control supports data binding, and it can be achieved using the DataSource
property.
The DataSource
property accepts a collection of values as input. The following code sample demonstrates how to bind a flat collection as data source to TreeMap.
<treemap:SfTreeMap x:Name="treeMap" DataSource="{Binding PopulationDetails}" WeightValuePath="Population" ColorValuePath="Growth">
<treemap:SfTreeMap.LeafItemSettings>
<treemap:LeafItemSettings Gap="2" BorderColor="#A9D9F7" LabelPath="Country" >
</treemap:LeafItemSettings>
</treemap:SfTreeMap.LeafItemSettings>
<treemap:SfTreeMap.Levels>
<treemap:TreeMapFlatLevel HeaderHeight="20" GroupPath = "Continent" GroupGap =" 5" ShowHeader = "true">
</treemap:TreeMapFlatLevel>
</treemap:SfTreeMap.Levels>
</treemap:SfTreeMap>
public class PopulationViewModel
{
public PopulationViewModel()
{
this.PopulationDetails = new ObservableCollection<PopulationDetail>();
PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Indonesia", Growth = 3, Population = 237641326 });
PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Russia", Growth = 2, Population = 152518015 });
PopulationDetails.Add(new PopulationDetail() { Continent = "Asia", Country = "Malaysia", Growth = 1, Population = 29672000 });
PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "United States", Growth = 4, Population = 315645000 });
PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "Mexico", Growth = 2, Population = 112336538 });
PopulationDetails.Add(new PopulationDetail() { Continent = "North America", Country = "Canada", Growth = 1, Population = 35056064 });
PopulationDetails.Add(new PopulationDetail() { Continent = "South America", Country = "Colombia", Growth = 1, Population = 47000000 });
PopulationDetails.Add(new PopulationDetail() { Continent = "South America", Country = "Brazil", Growth = 3, Population = 193946886 });
PopulationDetails.Add(new PopulationDetail() { Continent = "Africa", Country = "Nigeria", Growth = 2, Population = 170901000 });
PopulationDetails.Add(new PopulationDetail() { Continent = "Africa", Country = "Egypt", Growth = 1, Population = 83661000 });
PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "Germany", Growth = 1, Population = 81993000 });
PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "France", Growth = 1, Population = 65605000 });
PopulationDetails.Add(new PopulationDetail() { Continent = "Europe", Country = "UK", Growth = 1, Population = 63181775 });
}
public ObservableCollection<PopulationDetail> PopulationDetails
{
get;
set;
}
}
public class PopulationDetail
{
public string Continent { get; set; }
public string Country { get; set; }
public double Growth { get; set; }
public double Population { get; set; }
}
NOTE
The SfTreeMap control also supports the binding of nested properties.