Question

I have horizontal scale with following values to color mapping (more or less):
100% red
80% orange
60% yellow
40% light green
20% green
10% dark green
Now I would like to put rectangles on that scale with different height (similar to bar chart) and I would like to fill them with gradient based on that absolute scale and their height so that if my rectangle is from 0% to 40% on that scale it would be filled with gradient from dark green to light green etc.

How to achieve this?

Hope this is all clear.

Thanks in advance

Answer 1

Use MultiBinding on both properties : the position of the rectangle on the scale, and its height, with a multiBindingConverter.

e.g.:

<Window.Resources>
    <c:NameConverter x:Key="myNameConverter"/>
    ...
</Window.Resources>


...

<Rectangle Name="myRectangle" DataContext="myDataContext">
  <Rectangle.Fill>
    <MultiBinding Converter="{StaticResource myGradientConverter}">
      <Binding Path="PositionOnScale"/>
      <Binding Path="Height"/>
    </MultiBinding>
  </Rectangle.Fill>
</Rectangle >

then:

public class myGradientConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        ... // do stuff here to return the corresponding Gradient
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        ... // do stuff here (optional)
    }
}