How to fill rectangles (with different height) with absolute gradient in wpf?

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 (s开发者_StackOverflow中文版imilar 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

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

I would put each bar on your chart at full size, then put another white rectangle on top of the bar to "hide" the portion that is not visible.

For example, if you have a horizontal bar going left-to-right and it should show 40%, then I would create a full size rectangle going 100%, and then lay a 60% width white rectangle on top of it that is docked to the right which will hide the right 60% of the bar