Customization in Xamarin TreeMap (SfTreeMap)
18 May 202124 minutes to read
The TreeMap control supports color customization to determine the exact combination of colors for the tree nodes displayed and provides tooltip support to display additional information of TreeMap data.
Color
You can customize the colors of leaf nodes using the ColorMapping
support.
The ColorMapping
is categorized into the following three different types:
- UniColorMapping
- RangeColorMapping
- DesaturationColorMapping
UniColorMapping
You can color all the leaf nodes with the same color by setting value to the Color
property of UniColorMapping
.
<treemap:SfTreeMap x:Name="treeMap" DataSource="{Binding PopulationDetails}"
WeightValuePath="Population" ColorValuePath="Growth" LayoutType="Squarified">
<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.HeaderStyle>
<treemap:Style Color= "Black"/>
</treemap:TreeMapFlatLevel.HeaderStyle>
</treemap:TreeMapFlatLevel>
</treemap:SfTreeMap.Levels>
<treemap:SfTreeMap.LeafItemColorMapping>
<treemap:UniColorMapping Color="Red"></treemap:UniColorMapping>
</treemap:SfTreeMap.LeafItemColorMapping>
</treemap:SfTreeMap>
PopulationViewModel viewModel = new PopulationViewModel();
SfTreeMap treeMap = new SfTreeMap();
treeMap.BackgroundColor = Color.White;
treeMap.ColorValuePath = "Growth";
treeMap.WeightValuePath = "Population";
LeafItemSettings leafSetting = new LeafItemSettings();
leafSetting.Gap = 2;
leafSetting.BorderColor = Color.FromHex("#A9D9F7");
leafSetting.LabelPath = "Country";
treeMap.LeafItemSettings = leafSetting;
TreeMapFlatLevel flatLevel = new TreeMapFlatLevel();
flatLevel.HeaderHeight = 20;
flatLevel.GroupPath = "Continent";
flatLevel.GroupGap = 5;
flatLevel.ShowHeader = true;
flatLevel.HeaderStyle = new Syncfusion.SfTreeMap.XForms.Style() { Color = Color.Black };
treeMap.Levels.Add(flatLevel);
UniColorMapping uniColorMapping = new UniColorMapping();
uniColorMapping.Color = Color.Red;
treeMap.LeafItemColorMapping = uniColorMapping;
treeMap.DataSource = viewModel.PopulationDetails;
this.Content = treeMap;
RangeColorMapping
You can group the leaf nodes based on the range of color values of data. You can set a unique color for every range. To achieve this, specify the To
and From
values as range bound, and specify the Color
value to fill the leaf nodes of particular range using the RangeColorMapping
property of TreeMap. You must specify value to ColorValuePath since the ranges From
and To
depend on the under bound value of ColorValuePath
.
<treemap:SfTreeMap x:Name="treeMap" DataSource="{Binding PopulationDetails}"
WeightValuePath="Population" ColorValuePath="Growth" LayoutType="Squarified" ShowTooltip="True">
<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.HeaderStyle>
<treemap:Style Color= "Black"/>
</treemap:TreeMapFlatLevel.HeaderStyle>
</treemap:TreeMapFlatLevel>
</treemap:SfTreeMap.Levels>
<treemap:SfTreeMap.LegendSettings>
<treemap:LegendSettings ShowLegend="True" Size="700,45">
<treemap:LegendSettings.LabelStyle>
<treemap:Style Color="Black"></treemap:Style>
</treemap:LegendSettings.LabelStyle>
</treemap:LegendSettings>
</treemap:SfTreeMap.LegendSettings>
<treemap:SfTreeMap.LeafItemColorMapping>
<treemap:RangeColorMapping>
<treemap:RangeColorMapping.Ranges>
<treemap:Range LegendLabel = "1 % Growth" From = "0" To = "1" Color = "#77D8D8" />
<treemap:Range LegendLabel = "2 % Growth" From = "0" To = "2" Color = "#AED960" />
<treemap:Range LegendLabel = "3 % Growth" From = "0" To = "3" Color = "#FFAF51" />
<treemap:Range LegendLabel = "4 % Growth" From = "0" To = "4" Color = "#F3D240" />
</treemap:RangeColorMapping.Ranges>
</treemap:RangeColorMapping>
</treemap:SfTreeMap.LeafItemColorMapping>
</treemap:SfTreeMap>
PopulationViewModel viewModel = new PopulationViewModel();
SfTreeMap treeMap = new SfTreeMap();
treeMap.BackgroundColor = Color.White;
treeMap.ColorValuePath = "Growth";
treeMap.WeightValuePath = "Population";
LeafItemSettings leafSetting = new LeafItemSettings();
leafSetting.Gap = 2;
leafSetting.BorderColor = Color.FromHex("#A9D9F7");
leafSetting.LabelPath = "Country";
treeMap.LeafItemSettings = leafSetting;
TreeMapFlatLevel flatLevel = new TreeMapFlatLevel();
flatLevel.HeaderHeight = 20;
flatLevel.GroupPath = "Continent";
flatLevel.GroupGap = 5;
flatLevel.ShowHeader = true;
flatLevel.HeaderStyle = new Syncfusion.SfTreeMap.XForms.Style() { Color = Color.Black };
treeMap.Levels.Add(flatLevel);
LegendSettings legendSettings = new LegendSettings();
legendSettings.ShowLegend = true;
legendSettings.Size = new Size(700, 45);
legendSettings.LabelStyle = new Syncfusion.SfTreeMap.XForms.Style() { Color = Color.Black };
treeMap.LegendSettings = legendSettings;
RangeColorMapping rangeColorMapping = new RangeColorMapping();
Range range1 = new Range();
range1.From = 0;
range1.To = 1;
range1.Color = Color.FromHex("#77D8D8");
range1.LegendLabel = "1 % Growth";
Range range2 = new Range();
range2.From = 0;
range2.To = 2;
range2.Color = Color.FromHex("#AED960");
range2.LegendLabel = "2 % Growth";
Range range3 = new Range();
range3.From = 0;
range3.To = 3;
range3.Color = Color.FromHex("#FFAF51");
range3.LegendLabel = "3 % Growth";
Range range4 = new Range();
range4.From = 0;
range4.To = 4;
range4.Color = Color.FromHex("#F3D240");
range4.LegendLabel = "4 % Growth";
rangeColorMapping.Ranges.Add(range1);
rangeColorMapping.Ranges.Add(range2);
rangeColorMapping.Ranges.Add(range3);
rangeColorMapping.Ranges.Add(range4);
treeMap.LeafItemColorMapping = rangeColorMapping;
treeMap.DataSource = viewModel.PopulationDetails;
this.Content = treeMap;
DesaturationColorMapping
You can differentiate all the leaf nodes using the DesaturationColorMapping
property of TreeMap. Differentiation can be achieved even though the same color is applied for all the leaf nodes by varying the opacity of the leaf nodes based on the Color
value specified in the color value range using the RangeMinimum
and RangeMaximum
values of data collection. You can also bind the opacity range by setting the From
and To
properties of DesaturationColorMapping
.
<treemap:SfTreeMap x:Name="treeMap" DataSource="{Binding PopulationDetails}"
WeightValuePath="Population" ColorValuePath="Growth" LayoutType="Squarified" ShowTooltip="True">
<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.HeaderStyle>
<treemap:Style Color= "Black"/>
</treemap:TreeMapFlatLevel.HeaderStyle>
</treemap:TreeMapFlatLevel>
</treemap:SfTreeMap.Levels>
<treemap:SfTreeMap.LegendSettings>
<treemap:LegendSettings ShowLegend="True" Size="700,45">
<treemap:LegendSettings.LabelStyle>
<treemap:Style Color="Black"></treemap:Style>
</treemap:LegendSettings.LabelStyle>
</treemap:LegendSettings>
</treemap:SfTreeMap.LegendSettings>
<treemap:SfTreeMap.LeafItemColorMapping>
<treemap:DesaturationColorMapping From="1" To="0.1" Color="#41B8C4"/>
</treemap:SfTreeMap.LeafItemColorMapping>
</treemap:SfTreeMap>
PopulationViewModel viewModel = new PopulationViewModel();
SfTreeMap treeMap = new SfTreeMap();
treeMap.BackgroundColor = Color.White;
treeMap.ColorValuePath = "Growth";
treeMap.WeightValuePath = "Population";
LeafItemSettings leafSetting = new LeafItemSettings();
leafSetting.Gap = 2;
leafSetting.BorderColor = Color.FromHex("#A9D9F7");
leafSetting.LabelPath = "Country";
treeMap.LeafItemSettings = leafSetting;
TreeMapFlatLevel flatLevel = new TreeMapFlatLevel();
flatLevel.HeaderHeight = 20;
flatLevel.GroupPath = "Continent";
flatLevel.GroupGap = 5;
flatLevel.ShowHeader = true;
flatLevel.HeaderStyle = new Syncfusion.SfTreeMap.XForms.Style() { Color = Color.Black };
treeMap.Levels.Add(flatLevel);
LegendSettings legendSettings = new LegendSettings();
legendSettings.ShowLegend = true;
legendSettings.Size = new Size(700, 45);
legendSettings.LabelStyle = new Syncfusion.SfTreeMap.XForms.Style() { Color = Color.Black };
treeMap.LegendSettings = legendSettings;
DesaturationColorMapping desaturationColor = new DesaturationColorMapping();
desaturationColor.From = 1;
desaturationColor.To = 0.2;
desaturationColor.Color = Color.FromHex("#41B8C4");
treeMap.LeafItemColorMapping = desaturationColor;
treeMap.DataSource = viewModel.PopulationDetails;
this.Content = treeMap;
Tooltip
You can enable the tooltip support for TreeMap by setting the ShowTooltip
property to true. By default, it takes the property of bound object that is referenced in GroupPath
and displays its content when the corresponding node is tapped.
Tooltip customization
You can customize the tooltip to show more details by specifying TooltipTemplate
to tooltip.
<treemap:SfTreeMap x:Name="treeMap" DataSource="{Binding PopulationDetails}"
WeightValuePath="Population" ColorValuePath="Growth" LayoutType="Squarified" ShowTooltip="True">
<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.HeaderStyle>
<treemap:Style Color= "Black"/>
</treemap:TreeMapFlatLevel.HeaderStyle>
</treemap:TreeMapFlatLevel>
</treemap:SfTreeMap.Levels>
<treemap:SfTreeMap.LegendSettings>
<treemap:LegendSettings ShowLegend="True" Size="700,45">
<treemap:LegendSettings.LabelStyle>
<treemap:Style Color="Black"></treemap:Style>
</treemap:LegendSettings.LabelStyle>
</treemap:LegendSettings>
</treemap:SfTreeMap.LegendSettings>
<treemap:SfTreeMap.LeafItemColorMapping>
<treemap:RangeColorMapping>
<treemap:RangeColorMapping.Ranges>
<treemap:Range LegendLabel = "1 % Growth" From = "0" To = "1" Color = "#77D8D8" />
<treemap:Range LegendLabel = "2 % Growth" From = "0" To = "2" Color = "#AED960" />
<treemap:Range LegendLabel = "3 % Growth" From = "0" To = "3" Color = "#FFAF51" />
<treemap:Range LegendLabel = "4 % Growth" From = "0" To = "4" Color = "#F3D240" />
</treemap:RangeColorMapping.Ranges>
</treemap:RangeColorMapping>
</treemap:SfTreeMap.LeafItemColorMapping>
<treemap:SfTreeMap.TooltipSettings>
<treemap:TooltipSetting>
<treemap:TooltipSetting.TooltipTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding Country}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
TextColor="#FFFFFF" Margin="6,0,0,0" FontSize="12"/>
<BoxView Color="#888C91" HeightRequest="1" VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" Margin="0,6,0,6" Opacity="0.4"/>
<StackLayout HorizontalOptions="Center" Orientation="Horizontal">
<Label Text="Population:" VerticalTextAlignment="Center" HorizontalOptions="Center"
TextColor="#FFFFFF" FontSize="12" Margin="0,0,0,6"></Label>
<Label Text="{Binding Population}"
VerticalTextAlignment="Center" HorizontalOptions="Start" TextColor="#FFFFFF" FontSize="12"
Margin="0,0,0,6"/>
</StackLayout>
</StackLayout>
</DataTemplate>
</treemap:TooltipSetting.TooltipTemplate>
</treemap:TooltipSetting>
</treemap:SfTreeMap.TooltipSettings>
</treemap:SfTreeMap>
Selection
The TreeMap control provides selection support, which allows you to select the tree map items. The selection can be enabled by setting the HighlightOnSelection
property to true in TreeMap. You can specify the highlight color and border width using the HightlightColor
and HightlightBorderWidth
properties, respectively.
<treemap:SfTreeMap x:Name="treeMap" DataSource="{Binding PopulationDetails}" HighlightOnSelection="True"
HightlightBorderWidth="8" HightlightColor="Red"
WeightValuePath="Population" ColorValuePath="Growth" LayoutType="Squarified" >
<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.HeaderStyle>
<treemap:Style Color= "Black"/>
</treemap:TreeMapFlatLevel.HeaderStyle>
</treemap:TreeMapFlatLevel>
</treemap:SfTreeMap.Levels>
<treemap:SfTreeMap.LegendSettings>
<treemap:LegendSettings ShowLegend="True" Size="700,45">
<treemap:LegendSettings.LabelStyle>
<treemap:Style Color="Black"></treemap:Style>
</treemap:LegendSettings.LabelStyle>
</treemap:LegendSettings>
</treemap:SfTreeMap.LegendSettings>
<treemap:SfTreeMap.LeafItemColorMapping>
<treemap:RangeColorMapping>
<treemap:RangeColorMapping.Ranges>
<treemap:Range LegendLabel = "1 % Growth" From = "0" To = "1" Color = "#77D8D8" />
<treemap:Range LegendLabel = "2 % Growth" From = "0" To = "2" Color = "#AED960" />
<treemap:Range LegendLabel = "3 % Growth" From = "0" To = "3" Color = "#FFAF51" />
<treemap:Range LegendLabel = "4 % Growth" From = "0" To = "4" Color = "#F3D240" />
</treemap:RangeColorMapping.Ranges>
</treemap:RangeColorMapping>
</treemap:SfTreeMap.LeafItemColorMapping>
</treemap:SfTreeMap>
PopulationViewModel viewModel = new PopulationViewModel();
SfTreeMap treeMap = new SfTreeMap();
treeMap.BackgroundColor = Color.White;
treeMap.ColorValuePath = "Growth";
treeMap.WeightValuePath = "Population";
treeMap.LayoutType = LayoutTypes.Squarified;
treeMap.HighlightOnSelection = true;
treeMap.HightlightBorderWidth = 8;
treeMap.HightlightColor = Color.Red;
LeafItemSettings leafSetting = new LeafItemSettings();
leafSetting.Gap = 2;
leafSetting.OverflowMode = LabelOverflowMode.Wrap;
leafSetting.BorderColor = Color.FromHex("#A9D9F7");
leafSetting.LabelPath = "Country";
treeMap.LeafItemSettings = leafSetting;
TreeMapFlatLevel flatLevel = new TreeMapFlatLevel();
flatLevel.HeaderHeight = 20;
flatLevel.GroupPath = "Continent";
flatLevel.GroupGap = 5;
flatLevel.ShowHeader = true;
flatLevel.HeaderStyle = new Syncfusion.SfTreeMap.XForms.Style() { Color = Color.Black };
treeMap.Levels.Add(flatLevel);
LegendSettings legendSettings = new LegendSettings();
legendSettings.ShowLegend = true;
legendSettings.Size = new Size(700, 45);
legendSettings.LabelStyle = new Syncfusion.SfTreeMap.XForms.Style() { Color = Color.Black };
treeMap.LegendSettings = legendSettings;
RangeColorMapping rangeColorMapping = new RangeColorMapping();
Range range1 = new Range();
range1.From = 0;
range1.To = 1;
range1.Color = Color.FromHex("#77D8D8");
range1.LegendLabel = "1 % Growth";
Range range2 = new Range();
range2.From = 0;
range2.To = 2;
range2.Color = Color.FromHex("#AED960");
range2.LegendLabel = "2 % Growth";
Range range3 = new Range();
range3.From = 0;
range3.To = 3;
range3.Color = Color.FromHex("#FFAF51");
range3.LegendLabel = "3 % Growth";
Range range4 = new Range();
range4.From = 0;
range4.To = 4;
range4.Color = Color.FromHex("#F3D240");
range4.LegendLabel = "4 % Growth";
rangeColorMapping.Ranges.Add(range1);
rangeColorMapping.Ranges.Add(range2);
rangeColorMapping.Ranges.Add(range3);
rangeColorMapping.Ranges.Add(range4);
treeMap.LeafItemColorMapping = rangeColorMapping;
treeMap.DataSource = viewModel.PopulationDetails;
this.Content = treeMap;
ItemTemplate
The TreeMap control provides template support to tree map items using the ItemTemplate
property, which allows any type of custom template to be created with any type of view element.
<treemap:SfTreeMap x:Name="TreeMap" HorizontalOptions="FillAndExpand" DataSource="{Binding OlympicMedalsDetails}"
VerticalOptions="FillAndExpand" WeightValuePath="TotalMedals" ColorValuePath="TotalMedals" BackgroundColor="White" >
<treemap:SfTreeMap.LeafItemSettings>
<treemap:LeafItemSettings ShowLabels="false" BorderColor="#A9D9F7" Gap="2" LabelPath="Country" >
</treemap:LeafItemSettings>
</treemap:SfTreeMap.LeafItemSettings>
<treemap:SfTreeMap.ItemTemplate>
<DataTemplate>
<Grid BackgroundColor ="#D73028" >
<Image HorizontalOptions= "Center" VerticalOptions= "Center" HeightRequest= "50"
WidthRequest= "50" Source="{Binding Data.GameImageSource}" />
<Label Margin="5,5,0,0" FontSize="12" Text= "{Binding Data.GameName}"
TextColor = "White" HeightRequest="50" WidthRequest="100" HorizontalOptions= "Start"
VerticalOptions= "Start"/>
</Grid>
</DataTemplate>
</treemap:SfTreeMap.ItemTemplate>
</treemap:SfTreeMap>
public class OlympicMedalsViewModel
{
public ObservableCollection<OlympicMedals> OlympicMedalsDetails { get; set; }
public OlympicMedalsViewModel()
{
this.OlympicMedalsDetails = new ObservableCollection<OlympicMedals>();
this.OlympicMedalsDetails.Add(new OlympicMedals { Country = "US", GameName = "Swimming", GoldMedals = 16, SilverMedals = 9, BronzeMedals = 6, TotalMedals = 31, ImageName = "Swimming.png" });
this.OlympicMedalsDetails.Add(new OlympicMedals { Country = "US", GameName = "Track and Field", GoldMedals = 9, SilverMedals = 13, BronzeMedals = 7, TotalMedals = 29, ImageName = "TrackAndField.png" });
this.OlympicMedalsDetails.Add(new OlympicMedals { Country = "US", GameName = "Gymnastics", GoldMedals = 3, SilverMedals = 1, BronzeMedals = 2, TotalMedals = 6, ImageName = "Gymnastics.png" });
this.OlympicMedalsDetails.Add(new OlympicMedals { Country = "US", GameName = "Boxing", GoldMedals = 1, SilverMedals = 0, BronzeMedals = 1, TotalMedals = 2, ImageName = "Boxing.png" });
this.OlympicMedalsDetails.Add(new OlympicMedals { Country = "US", GameName = "Cycling", GoldMedals = 1, SilverMedals = 2, BronzeMedals = 1, TotalMedals = 4, ImageName = "Cycling.png" });
this.OlympicMedalsDetails.Add(new OlympicMedals { Country = "US", GameName = "Shooting", GoldMedals = 3, SilverMedals = 0, BronzeMedals = 1, TotalMedals = 4, ImageName = "Shooting.png" });
this.OlympicMedalsDetails.Add(new OlympicMedals { Country = "US", GameName = "Wrestling", GoldMedals = 2, SilverMedals = 0, BronzeMedals = 2, TotalMedals = 4, ImageName = "Wrestling.png" });
this.OlympicMedalsDetails.Add(new OlympicMedals { Country = "US", GameName = "Diving", GoldMedals = 1, SilverMedals = 1, BronzeMedals = 2, TotalMedals = 4, ImageName = "Diving.png" });
}
}
public class OlympicMedals
{
public string Country { get; set; }
public string GameName { get; set; }
public double GoldMedals { get; set; }
public double SilverMedals { get; set; }
public double BronzeMedals { get; set; }
public double TotalMedals { get; set; }
public ImageSource GameImageSource { get; set; }
private string imageName;
public string ImageName
{
get { return imageName; }
set
{
imageName = value;
if (Device.RuntimePlatform == Device.UWP)
{
GameImageSource = ImageSource.FromResource("TreeMap." + imageName, typeof(OlympicMedals).GetTypeInfo().Assembly);
}
else
{
GameImageSource = ImageSource.FromResource("TreeMap." + imageName);
}
}
}
}