Antes de responder, agradezco la pregunta de manera personal porque fue un desafío y me entretuve resolviéndolo.
Aclaración inicial:
Esta solución consta de 2 partes, la ProgressBar y una clase Converter de tipo IMultiValueConverter
.
Voy a suponer que sabes usar Converters así que me voy a saltar esa parte.
Nota:
Porqué MultiValueConverter
y no Converter común? Porque así le puedes pasar 2 parámetros, que serían: el Value
y el Maximum
, ya que la ProgressBar puede tener un Maximum
diferente a 100, lo que daría un error en el Converter
.
El Converter:
using System;
using System.Windows.Data;
using System.Windows.Media;
namespace DemoQueMeHizoHervirLaCabeza
{
public class ProgressValueConverter : IMultiValueConverter
{
/// <summary>
/// Convierte un color en otro
/// </summary>
/// <param name="oldColor">Color original</param>
/// <param name="newColor">Color deseado</param>
/// <param name="valor">Valor de la ProgressBar</param>
/// <param name="min">Valor mínimo del rango</param>
/// <param name="max">Valor máximo del rango</param>
/// <returns></returns>
public Color MixByValue(Color oldColor, Color newColor, double valor, double min, double max, double limit)
{
double rango = max == limit ? max - min : (max + 1) - min;
double factor = 100 / rango;
double oldAlpha = 100 - System.Convert.ToInt32((valor - min) * factor);
double newAlpha = 100 - oldAlpha;
oldAlpha = oldAlpha / 100;
newAlpha = newAlpha / 100;
byte r = (byte)((oldColor.R * oldAlpha) + newColor.R * newAlpha);
byte g = (byte)((oldColor.G * oldAlpha) + newColor.G * newAlpha);
byte b = (byte)((oldColor.B * oldAlpha) + newColor.B * newAlpha);
return Color.FromRgb(r, g, b);
}
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
double value = (double)values[0];
double limit = (double)values[1];
if (value > 0 && value < 33)
{
return new SolidColorBrush(MixByValue(Colors.Red, Colors.Orange, value, 0, 32, limit));
}
else if (value >= 33 && value < 75)
{
return new SolidColorBrush(MixByValue(Colors.Orange, Colors.Yellow, value, 33, 74, limit));
}
else if (value >= 75 && value <= 100)
{
return new SolidColorBrush(MixByValue(Colors.Yellow, Colors.Green, value, 75, 100, limit));
}
return Brushes.Black;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
La ProgressBar:
El Foreground de esta debe apuntar al Converter, pasándole, como parámetros de conversión, el Value
y el Maximum
:
<ProgressBar Value="{Binding ElementName=valueslider, Path=Value}">
<ProgressBar.Foreground>
<MultiBinding Converter="{StaticResource ProgressValueConverter}" >
<Binding Path="Value" RelativeSource="{RelativeSource Self}" />
<Binding Path="Maximum" RelativeSource="{RelativeSource Self}" />
</MultiBinding>
</ProgressBar.Foreground>
</ProgressBar>
Nota:
Recuerda cambiar el namespace del Converter y el Value
de la ProgressBar ya que para el ejemplo lo tenía Bindeado a un Slider para poder ir probando.
Explicación:
En palabras simples, el Converter obtiene el valor y lo transforma en un número porcentual que oscila entre los valores que asignas como mínimo y máximo por cada color, y tomando en cuenta esos 3 valores numéricos, combina 2 colores en distintas "proporciones", es como decirle al método, mezcla 2 partes de rojo con 1 de azul.
Podrías dividir el método Convert en más partes para agregar más colores y el método funcionaría igual, tu solo metes los valores, los colores que quieres y el método los irá mezclando automáticamente, acá un ejemplo del método Convert dividido para que cambie de color cada 10 puntos:
public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
double value = (double)values[0];
double limit = (double)values[1];
if (value > 0 && value <= 9)
{
return new SolidColorBrush(MixByValue(Colors.White, Colors.Yellow, value, 0, 9, limit));
}
else if (value >= 10 && value < 20)
{
return new SolidColorBrush(MixByValue(Colors.Yellow, Colors.YellowGreen, value, 10, 19, limit));
}
else if (value >= 20 && value < 30)
{
return new SolidColorBrush(MixByValue(Colors.YellowGreen, Colors.Green, value, 20, 29, limit));
}
else if (value >= 30 && value < 40)
{
return new SolidColorBrush(MixByValue(Colors.Green, Colors.DarkGreen, value, 30, 39, limit));
}
else if (value >= 40 && value < 50)
{
return new SolidColorBrush(MixByValue(Colors.DarkGreen, Colors.Blue, value, 40, 49, limit));
}
else if (value >= 50 && value < 60)
{
return new SolidColorBrush(MixByValue(Colors.Blue, Colors.Purple, value, 50, 59, limit));
}
else if (value >= 60 && value < 70)
{
return new SolidColorBrush(MixByValue(Colors.Purple, Colors.Red, value, 60, 69, limit));
}
else if (value >= 70 && value < 80)
{
return new SolidColorBrush(MixByValue(Colors.Red, Colors.Brown, value, 70, 79, limit));
}
else if (value >= 80 && value < 90)
{
return new SolidColorBrush(MixByValue(Colors.Brown, Colors.DarkGray, value, 80, 89, limit));
}
else if (value >= 90 && value <= 100)
{
return new SolidColorBrush(MixByValue(Colors.DarkGray, Colors.Black, value, 90, 100, limit));
}
return Brushes.Pink;
}