Как заполнить прямоугольники (с разной высотой) абсолютным градиентом в wpf?

Question

У меня есть горизонтальная шкала со следующими значениями для сопоставления цветов (более или менее): 100% красный 80% оранжевый 60% желтый 40% светло-зеленый 20% зеленый 10% темно-зеленый Теперь я хотел бы поместить прямоугольники на эту шкалу сдругой высоты (аналогично гистограмме), и я хотел бы заполнить их градиентом на основе этой абсолютной шкалы и их высоты, чтобы, если у моего прямоугольника от 0% до 40% по этой шкале, он был заполнен градиентом от темно-зеленого досветло-зеленый и т. д.

Как этого добиться?

Надеюсь, это все понятно.

Заранее спасибо

Answer 1

Используйте MultiBinding для обоих свойств: положение прямоугольника на шкале и его высоту с multiBindingConverter.

например:

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

затем:

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

Answer 2

Я бы поместил каждый столбец на вашем графике в полный размер, а затем поместил еще один белый прямоугольник поверх столбца, чтобы «скрыть» невидимую часть.

Например, если у вас горизонтальныйполоса идет слева направо, и она должна показывать 40%, тогда я бы создал полноразмерный прямоугольник со 100%, а затем положил поверх него белый прямоугольник шириной 60%, который пристыкован вправо, что скроет правую60% от бара