Version

RadialColorMapper

The RadialColorMapper adds color with a radial gradient brush to the nodes of the xamTreemap™ control, depending on a specified value. It maps some property of the data to a property of the node, for example, the fill color or foreground color.

RadialColorMapper Properties

  • ValuePath – determines the name of the property of the data source that contains the data.

  • ValueTypeName – determines the name of the type that has the field containing data specified by ValuePath.

  • TargetProperty – determines the property that will be affected by the color mapping.

  • TargetName – if you have a custom template for the xamTreemap control’s nodes and you have a named element, you can use TargetName to specify this element.

  • MappingMode – specifies the nodes to be affected by the color mapping. Possible values are "AllNodes" and "LeafNodesOnly".

  • From and To – these two properties determine the range in which the color is determined depending on the value of each node.

  • DataMinimum and DataMaximum – if the value specified by ValuePath is less than DataMinimum for a certain node, then the mapper applies the value of the From property; if the value specified by ValuePath is more than DataMaximum for a certain node, then the mapper applies the value of the To property.

Example

We have two classes – Manufacturer and Product. The Product class has a double field StandardCost. The Manufacturer class has an integer field Revenue.

In XAML:

<ig:xamTreemap.ValueMappers>
    <ig:RadialColorMapper
        ValueTypeName="Manufacturer"
        ValuePath="Revenue"
        TargetProperty="Fill"
        MappingMode="AllNodes"
        From="#B65DCF"
        To="#7d1f97" />
    <ig:RadialColorMapper
        ValueTypeName="Product"
        ValuePath="StandardCost"
        TargetProperty="Fill"
        MappingMode="AllNodes"
        From="#f2b201"
        To="#ea5e01" />
</ig:xamTreemap.ValueMappers>

How This Works

The first mapper will set a Fill for all nodes which are of type Manufacturer. The Fill will be a gradient brush with a color between the From and To values depending on the Revenue field of each node.

The second mapper will set the Fill for all nodes which are of type Product. The Fill will be a gradient brush with a color between the From and To values depending on the StandardCost value of each node.

The outer color of the node is determined by the mapped value. The inner color is the opposite of the outer one in the range From~To.

xamTreemap RadialColorMapper 01.png