0

trato de hacer que mi progressbar cambie de color "de rojo a amarillo y de amarillo a verde (dependiendo de su valor) pero gradualmente. Este es el codigo que tengo:

 private void pb2_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {

        if (pb2.Value>0 && pb2.Value<33)
        {
            pb2.Foreground = new SolidColorBrush(Colors.Red);
        }


        else if (pb2.Value > 33 && pb2.Value < 75)
        {
            pb2.Foreground = new SolidColorBrush(Colors.Yellow);
        }



        else if (pb2.Value > 75 && pb2.Value < 100)
        {
            pb2.Foreground = new SolidColorBrush(Colors.Green);
        }
    }

Pero esto hace que los colores cambien bruscamente, y yo quiero que cambien gradualmente.

Con gradualmente me refiero a que por ejemplo: si esta en rojo, no cambie repentinamente a amarillo.

2
  • para eso no tendrias que ir cambando a colores intermedios?
    – gbianchi
    Commented el 28 abr. 2020 a las 22:46
  • Ya lo intente asi, pero el cambio de color se sigue notando muy brusco, y aparte necesitaria agregar muchisimos colores.
    – alan smith
    Commented el 28 abr. 2020 a las 23:35

1 respuesta 1

0

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;
}
1
  • Gracias, por tomarte tu tiempo y responder, tu codigo me ha servido de maravilla muchisimas gracias.
    – alan smith
    Commented el 29 abr. 2020 a las 21:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.