This is a migrated thread and some comments may be shown as answers.

RadTreeMap Colorizing

2 Answers 50 Views
TreeMap and PivotMap
This is a migrated thread and some comments may be shown as answers.
Edward
Top achievements
Rank 1
Edward asked on 11 Apr 2012, 10:32 AM

I'd like to modify Ranges in RangeBrushes Collection for ValueBrushColorizer to be able to set values in percents.

I want colorize control using percent ranges with binding to property "Size" of type double.
For example:
<telerik:RangeBrush Brush="{StaticResource PlaylistLowBrush}" From="0" To="0.5" />

Could you please provide any help?

Thank you in advance

I have following code:

<telerikTreeMap:RadTreeMap.TypeDefinitions>
<telerik:TypeDefinition TargetTypeName="AppUsageMapItem" ToolTipPath="Size" ToolTipFormat="Views: {0}" LabelPath="Name" ValuePath="Size" ChildrenPath="Children">
<telerik:TypeDefinition.Mappings>
<telerik:AbsoluteValueBrushColorizer ValuePath="Size" Brushes="{StaticResource AppColorizerBrushes}" RangeMinimum="1" RangeMaximum="10000" />
</telerik:TypeDefinition.Mappings>
</telerik:TypeDefinition>
<telerik:TypeDefinition TargetTypeName="PlaylistUsageMapItem" ToolTipPath="Size" ToolTipFormat="Views: {0}" LabelPath="Name" ValuePath="Size" >
<telerik:TypeDefinition.Mappings>
<telerik:AbsoluteValueBrushColorizer ValuePath="Size" Brushes="{StaticResource PlaylistColorizerBrushes}" RangeMinimum="1" RangeMaximum="10000" />
</telerik:TypeDefinition.Mappings>
</telerik:TypeDefinition>
</telerikTreeMap:RadTreeMap.TypeDefinitions>


//SOMEWHERE IN RESOURCES
<SolidColorBrush Color="{StaticResource YellowLightColor}" x:Key="PlaylistLowBrush" />
<SolidColorBrush Color="{StaticResource OrangeLightColor}" x:Key="PlaylistMiddleBrush" />
<SolidColorBrush Color="{StaticResource YellowColor}" x:Key="PlaylistHighBrush"/>
<SolidColorBrush Color="{StaticResource OrangeColor}" x:Key="PlaylistVeryHightBrush" />
<SolidColorBrush Color="{StaticResource RedColor}" x:Key="PlaylistHighestBrush" />
<SolidColorBrush Color="{StaticResource RedDarkColor}" x:Key="PlaylistMoreHighestBrush" />

<SolidColorBrush Color="{StaticResource BlackColor}" x:Key="BorderBrush" />

<SolidColorBrush Color="{StaticResource GreyLightestColor}" x:Key="AppLowBrush" />
<SolidColorBrush Color="{StaticResource GreyLightColor}" x:Key="AppMiddleBrush" />
<SolidColorBrush Color="{StaticResource GreyColor}" x:Key="AppHighBrush"/>
<SolidColorBrush Color="{StaticResource GreyDarkColor}" x:Key="AppVeryHightBrush" />
<SolidColorBrush Color="{StaticResource BlackLightColor}" x:Key="AppHighestBrush" />

<telerik:RangeBrushCollection x:Key="PlaylistColorizerBrushes">
<telerik:RangeBrush Brush="{StaticResource PlaylistLowBrush}" From="0" To="50" />
<telerik:RangeBrush Brush="{StaticResource PlaylistMiddleBrush}" From="50" To="100" />
<telerik:RangeBrush Brush="{StaticResource PlaylistHighBrush}" From="100" To="200" />
<telerik:RangeBrush Brush="{StaticResource PlaylistVeryHightBrush}" From="200" To="500" />
<telerik:RangeBrush Brush="{StaticResource PlaylistHighestBrush}" From="500" To="1000" />
<telerik:RangeBrush Brush="{StaticResource PlaylistMoreHighestBrush}" From="1000" To="10000" />
</telerik:RangeBrushCollection>

<telerik:RangeBrushCollection x:Key="AppColorizerBrushes">
<telerik:RangeBrush Brush="{StaticResource AppLowBrush}" From="0" To="50" />
<telerik:RangeBrush Brush="{StaticResource AppMiddleBrush}" From="50" To="100" />
<telerik:RangeBrush Brush="{StaticResource AppHighBrush}" From="100" To="200" />
<telerik:RangeBrush Brush="{StaticResource AppVeryHightBrush}" From="200" To="500" />
<telerik:RangeBrush Brush="{StaticResource AppHighestBrush}" From="500" To="10000" />
</telerik:RangeBrushCollection>

2 Answers, 1 is accepted

Sort by
0
Accepted
Yavor
Telerik team
answered on 12 Apr 2012, 11:48 AM
Hi Edward,

ValueBrush and ValueGradient colorizers generate color based on some value. Both absolute and relative (in percents) values are supported, depending on the IsAbsolute flag). If you want to set the values in percents you can do it easily like this:

<telerik:ValueGradientColorizer RangeMinimum="0" RangeMaximum="14600">
    <GradientStop Offset="0" Color="#FFFFD000" />
    <GradientStop Offset="0.50" Color="#FFD11010" />
    <GradientStop Offset="1" Color="#de290b" />
</telerik:ValueGradientColorizer>
You can view our Gradient colorizer online example that demonstrates this type of value specification.Regards,
Yavor
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Edward
Top achievements
Rank 1
answered on 12 Apr 2012, 11:58 AM
Thanks a lot!))
Everything is working good.
Tags
TreeMap and PivotMap
Asked by
Edward
Top achievements
Rank 1
Answers by
Yavor
Telerik team
Edward
Top achievements
Rank 1
Share this question
or