ColorMapping in UWP TreeMap (SfTreeMap)

18 Nov 201819 minutes to read

ColorMapping is categorized into four different types:

  • UniColorMapping
  • RangeBrushColorMapping
  • DesaturationColorMapping
  • PaletteColorMapping

ColorValuePath

ColorValuePath of SfTreeMap is a path to a field on the source object, which serves as the “Color” of the object.

TreeMap ColorMapping

The leaf nodes of TreeMap can be colored by setting the LeafColorMapping of TreeMap.

UniColorMapping

TreeMap leaf nodes can be colored with the help of the Color property specified using UniColorMapping.

Code Sample:

  • XAML
    • <syncfusion:SfTreeMap ItemsSource="{Binding PopulationDetails}"
                      WeightValuePath="Population"
                      ColorValuePath="Growth">

    <syncfusion:SfTreeMap.LeafColorMapping>
        <syncfusion:UniColorMapping Color="Crimson" />
    </syncfusion:SfTreeMap.LeafColorMapping>

    <syncfusion:SfTreeMap.Levels>
        <syncfusion:TreeMapFlatLevel GroupPath="Continent"
                                     HeaderHeight="25"
                                     GroupGap="5"
                                     GroupPadding="5"
                                     GroupBackground="Transparent"
                                     GroupBorderBrush="#009900"
                                     GroupBorderThickness="1">

            <syncfusion:TreeMapFlatLevel.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Header}"
                               Margin="5,0,0,0"
                               Foreground="Black"
                               FontSize="18"
                               FontWeight="Light"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Center" />
                </DataTemplate>
            </syncfusion:TreeMapFlatLevel.HeaderTemplate>

        </syncfusion:TreeMapFlatLevel>
    </syncfusion:SfTreeMap.Levels>

</syncfusion:SfTreeMap>

    Features_img9

    Leaf Nodes colored by using UniColorMapping

    RangeBrushColorMapping

    The leaf nodes of TreeMap can be colored based upon the range (i.e., From and To) and Brush specified using RangeBrush collection of RangeBrushColorMapping.

    Code Sample:

  • XAML
    • <syncfusion:SfTreeMap ItemsSource="{Binding PopulationDetails}"
                      WeightValuePath="Population"
                      ColorValuePath="Growth">

    <syncfusion:SfTreeMap.LeafItemSettings>
        <syncfusion:LeafItemSettings>
            <syncfusion:LeafItemSettings.LabelTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Data.Country}"
                               TextWrapping="Wrap"
                               Foreground="White"
                               FontSize="16"
                               FontWeight="Normal"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Top"
                               Margin="5,5,0,0" />
                </DataTemplate>
            </syncfusion:LeafItemSettings.LabelTemplate>
        </syncfusion:LeafItemSettings>
    </syncfusion:SfTreeMap.LeafItemSettings>

    <syncfusion:SfTreeMap.LeafColorMapping>
        <syncfusion:RangeBrushColorMapping>
            <syncfusion:RangeBrushColorMapping.Brushes>
                <syncfusion:RangeBrush From="0" To="1"
                                       Color="#77D8D8" />
                <syncfusion:RangeBrush From="1" To="2"
                                       Color="#AED960" />
                <syncfusion:RangeBrush From="2" To="3"
                                       Color="#FFAF51" />
                <syncfusion:RangeBrush From="3" To="4"
                                       Color="#F3D240" />
            </syncfusion:RangeBrushColorMapping.Brushes>
        </syncfusion:RangeBrushColorMapping>
    </syncfusion:SfTreeMap.LeafColorMapping>

    <syncfusion:SfTreeMap.Levels>
        <syncfusion:TreeMapFlatLevel GroupPath="Continent"
                                     HeaderHeight="25"
                                     GroupGap="5"
                                     GroupPadding="5"
                                     GroupBackground="Transparent"
                                     GroupBorderBrush="#009900"
                                     GroupBorderThickness="1">

            <syncfusion:TreeMapFlatLevel.HeaderTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Header}"
                               Margin="5,0,0,0"
                               Foreground="Black"
                               FontSize="18"
                               FontWeight="Light"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Center" />
                </DataTemplate>
            </syncfusion:TreeMapFlatLevel.HeaderTemplate>

        </syncfusion:TreeMapFlatLevel>
    </syncfusion:SfTreeMap.Levels>

</syncfusion:SfTreeMap>

    Features_img10

    Leaf nodes colored by using RangeBrushColorMapping

    DesaturationColorMapping

    The leaf nodes of TreeMap can be colored based upon the Color specified using DesaturationColorMapping. The RangeMinimum and RangeMaximum must be specified to determine the opacity for each leaf node. The opacity of leaf nodes are in the range of From and To mentioned in DesaturationColorMapping.

    Code Sample:

  • XAML
    • <syncfusion:SfTreeMap ItemsSource="{Binding PopulationDetails}"
                      WeightValuePath="Population"
                      ColorValuePath="Growth">

    <syncfusion:SfTreeMap.LeafItemSettings>
        <syncfusion:LeafItemSettings>
            <syncfusion:LeafItemSettings.LabelTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Data.Country}"
                               TextWrapping="Wrap"
                               Foreground="White"
                               FontSize="16"
                               FontWeight="Normal"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Top"
                               Margin="5,5,0,0" />
                </DataTemplate>
            </syncfusion:LeafItemSettings.LabelTemplate>
        </syncfusion:LeafItemSettings>
    </syncfusion:SfTreeMap.LeafItemSettings>

    <syncfusion:SfTreeMap.LeafColorMapping>
        <syncfusion:DesaturationColorMapping From="1"
                                             To="0.5"
                                             RangeMinimum="0"
                                             RangeMaximum="4"
                                             Color="DeepSkyBlue">
        </syncfusion:DesaturationColorMapping>
    </syncfusion:SfTreeMap.LeafColorMapping>

    <syncfusion:SfTreeMap.Levels>
        <syncfusion:TreeMapFlatLevel GroupPath="Continent" GroupGap="5" />
    </syncfusion:SfTreeMap.Levels>

</syncfusion:SfTreeMap>

    Features_img11

    Leaf nodes colored by using DesaturationColorMapping

    PaletteColorMapping

    The leaf nodes are colored by using the brushes mentioned in Colors collection of PaletteColorMapping.

    Code Sample:

  • XAML
    • <chart:SfDateTimeRangeNavigator x:Name="RangeNavigator"
                                Width="700"
                                Height="179"
                                ItemsSource="{Binding StockPriceDetails}"
                                ShowToolTip="True"
                                ToolTipLabelFormat="yyyy/MMM/dd"
                                XBindingPath="Date">

    <Grid x:Name="grid">

        <Grid.Resources>

            <DataTemplate x:Key="tooltipTemplate1">
                <Border BorderBrush="Black"
                        BorderThickness="0.5"
                        Background="SeaGreen"
                        Width="100"
                        Height="30"
                        CornerRadius="10">
                    <TextBlock Width="90"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center"
                               FontSize="15"
                               Foreground="White"
                               Text="{Binding}">
                    </TextBlock>
                </Border>
            </DataTemplate>

            <DataTemplate x:Key="tooltipTemplate2">
                <Border BorderThickness="0.5"
                        BorderBrush="Black"
                        Background="SeaGreen"
                        Width="100"
                        Height="30"
                        CornerRadius="10">
                    <TextBlock Width="90"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center"
                               FontSize="15"
                               Foreground="White"
                               Text="{Binding}">
                    </TextBlock>
                </Border>
            </DataTemplate>

        </Grid.Resources>

        <syncfusion:SfDateTimeRangeNavigator
            LeftToolTipTemplate="{StaticResource tooltipTemplate1}"
            RightToolTipTemplate="{StaticResource tooltipTemplate2}" />

    </Grid>

</chart:SfDateTimeRangeNavigator>

    Features_img12

    Leaf nodes colored by using PaletteColorMapping