Sharpwhere over the rainbow…

Posted on Updated on


…skies are blue 🙂

Si, se que el título del post está ‘pillado’ con pinzas, pero de lo que trata este post es de “cómo utilizar una brocha para pintar el interior de un control con varios niveles de degradado“, o sea “pintar un control Label con los colores del arco iris” 😀

Que? Ya habéis terminado de reíros?

Pues ahora os cuento el porqué se me ha ocurrido todo esto: Resulta que un proyecto en el que estoy trabajando, se muestran unas barras de progreso de color azul que indican el % de realización de unos presupuestos. Después de mirarlas un rato y ver lo ‘sosas’ que quedaban, he pensado que le podía dar un toque de color, aprovechando que pronto va a ser el día del orgullo friki.

mojo1

A que es bonito, verdad? 🙂

Vale, pues hacer esto con WPF es trivial mediante GradientStops, pero, oooohhhh… este proyecto es WinForms. Pero tranquilos, el viejo y bueno namespace ‘System.Drawing.Drawing2D’ dispone de alguna sorpresa, como la clase ColorBlend, que permite definir un array de colores y posiciones para realizar degradados de colores. Anda mira, me ha salido un pareado! 😀

Total, que partiendo del evento Paint de cualquier control (en el que se obtienen como argumentos el contexto gráfico y el rectángulo del área a pintar), he creado una pequeña clase que permite especificar los distintos colores de degradado para el mismo:


public class MultiGradientRectangle
{
    public Graphics Graphics { get; set; }
    public Rectangle Rectangle { get; set; }
    public List<Color> ColorPoints { get; set; }
    public int PercentCompleted { get; set; }

    public MultiGradientRectangle(Graphics graphics, Rectangle rectangle)
    {
        Graphics = graphics;
        Rectangle = rectangle;
        ColorPoints = new List<Color>();
    }

    public void DrawMultiGradientRectangle()
    {
        if (PercentCompleted == 0) return;
        if (ColorPoints.Count == 0) return;
        List<float> myPositions = new List<float>();
        float colordistance = 1f / (ColorPoints.Count - 1f);
        for (int i = 0; i < ColorPoints.Count; i++)
        {
            myPositions.Add(colordistance * i);
        }
        ColorBlend blend = new ColorBlend();
        blend.Colors = ColorPoints.ToArray();
        blend.Positions = myPositions.ToArray();
        using (LinearGradientBrush brush = new LinearGradientBrush(
            Rectangle, Color.Black, Color.White, 0, false))
        {
            brush.InterpolationColors = blend;
            Graphics.FillRectangle(brush, Rectangle);
        }
        //algo falta aquí... .-)
    }
}

Ahora creamos un formulario con un control pictureBox (en realidad puede ser cualquiera) y nos suscribimos a su evento Paint.


public Form1()
{
    InitializeComponent();
    pictureBox1.Paint += pictureBox1_Paint;
}

void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    drawMultiGradient(e.Graphics, e.ClipRectangle, 50);
}

private static void drawMultiGradient(Graphics g, Rectangle rect, int percent)
{
    MultiGradientRectangle mgrect = new MultiGradientRectangle(g, rect);
    mgrect.PercentCompleted = percent;
    mgrect.ColorPoints.Add(Color.Red);
    mgrect.ColorPoints.Add(Color.Orange);
    mgrect.ColorPoints.Add(Color.Yellow);
    mgrect.ColorPoints.Add(Color.LightGreen);
    mgrect.ColorPoints.Add(Color.Green);
    mgrect.DrawMultiGradientRectangle();
}

Así, podemos crear tantos puntos intermedios como queramos, sólo tenemos la limitación del buen gusto.

Sin embargo falta algo, verdad? Efectivamente, en la captura de pantalla puede verse perfectamente que las barras de progreso se ‘rellenan’ sólo hasta el porcentaje alcanzado. Si es un 0% no hay degradado, si es un 50% sólo hasta la mitad, y así…

Como veis, falta un fragmento de código en el método DrawMultiGradientRectangle. Os dejo como ejercicio mostrar únicamente el relleno hasta el % especificado mediante la propiedad ‘PercentCompleted’. A ver que solución es la más chula 😉

Un saludo desde Andorra, nos vemos!

PD – Podéis decir lo que queráis acerca del diseño, se admiten todo tipo de críticas (otra cosa es que os haga caso :-P)

Anuncis

Deixa un comentari

Fill in your details below or click an icon to log in:

WordPress.com Logo

Esteu comentant fent servir el compte WordPress.com. Log Out /  Canvia )

Google+ photo

Esteu comentant fent servir el compte Google+. Log Out /  Canvia )

Twitter picture

Esteu comentant fent servir el compte Twitter. Log Out /  Canvia )

Facebook photo

Esteu comentant fent servir el compte Facebook. Log Out /  Canvia )

S'està connectant a %s