Dynamic Gradient Background based on int value

Question

for an order overview I have a list of multiple orders with different priorities. They reach from -10 => very high priority to +20 => low priority. Based on this priority I want to return a Gradient brush Color dynamically.

For example:

From -10 to -0.5 it should it fade from darkred into orange
From -0.5 to +0.5 it should fade from orange into yellow into lime
From +0.5 to +10 it should fade from lime to green

I have never made this before and absolutly no clue how to solve this. Even if you don't have a complete solution for me it would be very nice to give me a hint.

Regards Johannes

Given this and the comments I'm not 100% sure whether you really want to return a gradient or rather a single color at a time, which is a result of interpolation, e.g. between red and orange. If priority is `0.0`, do you wish to return a gradient between orange and lime or a *single solid* color that is half way between orange and lime? — pbalaga, Sep 13 '13 at 11:31
Im sorry my question might be misleading. I want to return one Color at a time for a given priority. When you then have a list of orders ordered by the prio it should appear in a Gradient looking Color Transition. — Johannes Wanzek, Sep 13 '13 at 12:00

score 1 · Answer 1 · edited May 23 '17 at 11:50

1

I guess you are revering to this color: http://msdn.microsoft.com/en-us/library/system.drawing.color.aspx

Lookup this link: Is there an easy way to blend two System.Drawing.Color values?

It tells you how to blend between two colors

After this you can retrieve a brush: convert from Color to brush

edited May 23 '17 at 11:50

Community

1
1

answered Sep 13 '13 at 07:52

Enigma

1,699
10
14

score 1 · Answer 2 · answered Sep 13 '13 at 08:00

You can either do some funky algorithm to tell you if priorities exist or not and add the gradient accordingly calculating the position of each gradient as required, or create a rectangluar area for each priority then add a gradient using the following method. See system.windows.media.lineargradientbrush and WPF Brushes Overview

In xaml

<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
       <GradientStop Color="Yellow" Offset="0.0" />
       <GradientStop Color="Red" Offset="0.25" />
       <GradientStop Color="Blue" Offset="0.75" />
       <GradientStop Color="LimeGreen" Offset="1.0" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

then in C#

Rectangle diagonalFillRectangle = new Rectangle();
diagonalFillRectangle.Width = 200;
diagonalFillRectangle.Height = 100;

// Create a diagonal linear gradient with four stops.   
LinearGradientBrush myLinearGradientBrush = new LinearGradientBrush();
myLinearGradientBrush.StartPoint = new Point(0,0);
myLinearGradientBrush.EndPoint = new Point(1,1);
myLinearGradientBrush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
myLinearGradientBrush.GradientStops.Add(new GradientStop(Colors.Red, 0.25));                
myLinearGradientBrush.GradientStops.Add(new GradientStop(Colors.Blue, 0.75));        
myLinearGradientBrush.GradientStops.Add(new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
diagonalFillRectangle.Fill = myLinearGradientBrush;

score 1 · Answer 3 · answered Sep 13 '13 at 08:31

If you want to use brushes in XAML, maybe DataTrigger is what you want.

With triggers you can change styles dynamically. In this example I'm changing rectangle fill property, based on Priority property value:

 <Grid>
  <Grid.Resources>

    <LinearGradientBrush x:Key="HighPriorityBrush" EndPoint="1,0.5" StartPoint="0,0.5">
      <GradientStop Color="DarkRed" />
      <GradientStop Color="Orange" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="NormalPriorityBrush" EndPoint="1,0.5" StartPoint="0,0.5">
      <GradientStop Color="Orange" />
      <GradientStop Color="Yellow" Offset="0.5" />
      <GradientStop Color="Lime" Offset="1" />
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="LowPriorityBrush" EndPoint="1,0.5" StartPoint="0,0.5">
      <GradientStop Color="Lime" />
      <GradientStop Color="Green" Offset="1" />
    </LinearGradientBrush>
  </Grid.Resources>

    <Rectangle Height="150" Width="150">
      <Rectangle.Style>
        <Style TargetType="Rectangle">
          <Style.Triggers>
            <DataTrigger Binding="{Binding Priority}" Value="0">
              <Setter Property="Fill" Value="{StaticResource LowPriorityBrush}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Priority}" Value="1">
              <Setter Property="Fill" Value="{StaticResource NormalPriorityBrush}" />
            </DataTrigger>
            <DataTrigger Binding="{Binding Priority}" Value="2">
              <Setter Property="Fill" Value="{StaticResource HighPriorityBrush}" />
            </DataTrigger>
          </Style.Triggers>
        </Style>
      </Rectangle.Style>
    </Rectangle>
   </Grid>

And Priority property from ViewModel returns something like this:

private double realPriority; // your priority
public double Priority
{
  get
  {
    if (this.realPriority < -0.5) return 0;
    if (this.realPriority > 0.5) return 2;
    return 1;
  }
}

The Problem is that i don't want only dark red or red as a fixed Color. I want to get the red fade into orange the closesr it Comes to 0. Currently I also have like the same code you posted above. :) — Johannes Wanzek, Sep 13 '13 at 09:09
Oh sorry for misunderstanding. I understand now. Well in this case you need to bind `Priority` on Background/Fill property of your control and then create `IValueConverter` to magically convert double into `LinearGradientBrush` :) — Andrej B., Sep 13 '13 at 11:15

score 1 · Answer 4 · answered Jul 21 '18 at 23:09

using System;
using System.Windows.Media;
using SDColor = System.Drawing.Color;

//Developed by امین امیری دربان
namespace APREndUser.CodeAssist
{
    public static class ColorHelper
    {
      public static SDColor ToSDColor(SWMColor color) => SDColor.FromArgb(color.A, color.R, color.G, color.B);
      public static Tuple<SDColor, SDColor> GetColorFromRYGGradient(double percentage)
        {
            var red = (percentage > 50 ? 1 - 2 * (percentage - 50) / 100.0 : 1.0) * 255;
            var green = (percentage > 50 ? 1.0 : 2 * percentage / 100.0) * 255;
            var blue = 0.0;
            SDColor result1 = SDColor.FromArgb((int)red, (int)green, (int)blue);
            SDColor result2 = SDColor.FromArgb((int)green, (int)red, (int)blue);
            return new Tuple<SDColor, SDColor>(result1, result2);
        }
    }

}

score 0 · Answer 5 · answered Feb 26 '21 at 13:18

You could create a converter to convert a number into a Brush:

public class NumberToBrushConverter : MarkupExtension, IValueConverter
{
    private static object instance;
    public override object ProvideValue(IServiceProvider serviceProvider) { if (instance == null) { instance = Activator.CreateInstance(GetType()); } return instance; }

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        double aNumber = (double)value;

        // Define your gradient colors depending on the number

        return new System.Windows.Media.LinearGradientBrush(aColor1, aColor2, 
                new System.Windows.Point(0, 0), new System.Windows.Point(1, 0));
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Then use it in your XAML binding:

<Border Background="{Binding YourVM.Number, Converter={yournamespace:NumberToBrushConverter}}" />

Dynamic Gradient Background based on int value

5 Answers5