Category / Section
How to apply colors based on the ColorValuePath to a LeafTemplate in SfTreeMap?
1 min read
You can provide colors based on the ColorValuePath to a LeafTemplate by using MappedColor property and you can add any colormapping for leafnode using “LeafColorMapping” property.
XAML
<syncfusion:SfTreeMap.LeafColorMapping> <syncfusion:RangeBrushColorMapping> <syncfusion:RangeBrushColorMapping.Brushes> <syncfusion:RangeBrush Color="#77D8D8" From="0" To="2" /> . . . </syncfusion:RangeBrushColorMapping.Brushes> </syncfusion:RangeBrushColorMapping> </syncfusion:SfTreeMap.LeafColorMapping>
Use MappedColor API as binding path in Leaftemplate to bind the set of provided colors using LeafColorMapping based on ColorValuePath.
XAML
<syncfusion:SfTreeMap.LeafTemplate>
. . .
<Border Background="{Binding MappedColor}" >
. . .
</Border>
. . .
</syncfusion:SfTreeMap.LeafTemplate>
Sample Location:
XAML
<syncfusion:SfTreeMap>
. . .
<syncfusion:SfTreeMap.LeafColorMapping>
<syncfusion:RangeBrushColorMapping>
<syncfusion:RangeBrushColorMapping.Brushes>
<syncfusion:RangeBrush Color="#77D8D8" From="0" To="2" />
<syncfusion:RangeBrush Color="#AED960" From="3" To="8" />
<syncfusion:RangeBrush Color="#FFAF51" From="9" To="11" />
<syncfusion:RangeBrush Color="#F3D240" From="12" To="16" />
</syncfusion:RangeBrushColorMapping.Brushes>
</syncfusion:RangeBrushColorMapping>
</syncfusion:SfTreeMap.LeafColorMapping>
. . .
<syncfusion:SfTreeMap.LeafTemplate>
<DataTemplate>
<Border BorderBrush="Transparent" BorderThickness="2" Background="{Binding MappedColor}" >
. . .
</Border>
</DataTemplate>
</syncfusion:SfTreeMap.LeafTemplate>
. . .
</syncfusion:SfTreeMap>
The following screenshot illustrates the output.
Figure 1: LeafTemplate colors using mappedcolor
