RadTreeMap Colorizing

3 posts, 1 answers
  1. Edward
    Edward avatar
    3 posts
    Member since:
    Jul 2010

    Posted 11 Apr 2012 Link to this post

    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. Answer
    Yavor
    Admin
    Yavor avatar
    401 posts

    Posted 12 Apr 2012 Link to this post

    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 >>

  3. DevCraft banner
  4. Edward
    Edward avatar
    3 posts
    Member since:
    Jul 2010

    Posted 12 Apr 2012 Link to this post

    Thanks a lot!))
    Everything is working good.
Back to Top