How to paint a Gradient Background for your Forms

Have you ever felt that your Windows applications look a little boring and are missing that touch of visual style and creativity? I assume you have, so I’m going to show you how you can paint a gradient background for your Windows Forms. It might not sound like much but this goes a long way in making your interface more appealing to the end users of your application.

The .NET framework includes a class called System.Drawing.Drawing2D.LinearGradientBrush which is designed specifically for painting gradients. It accepts as parameters the coordinates of the object to paint, the two colours used to produce the gradient, and the angle of the gradient.

Now, let’s use this class to paint a gradient on our Windows Form.

We begin by overriding the form’s OnPaintBackground method like this:

protected override void OnPaintBackground(PaintEventArgs e)
{
}

This method will fire when the form is to be painted so it is the perfect event for us to paint our gradient in. Now that we have overridden the OnPaintBackground method we must create an instance of LinearGradientBrush and give it some parameters for our gradient. We must also paint the form using the Graphics‘ object FillRectangle method. The code for this is below:

protected override void OnPaintBackground(PaintEventArgs e)
{
    using (LinearGradientBrush brush = new LinearGradientBrush(this.ClientRectangle,
                                                               Color.Gray,
                                                               Color.Black,
                                                               90F))
    {
        e.Graphics.FillRectangle(brush, this.ClientRectangle);
    }
}

Now to explain what is happening here – we are creating an instance of LinearGradientBrush and wrapping it inside the using keyword so that the object is automatically disposed of when the method exists. As the first parameter we are passing this.ClientRectangle which specifies the bounds of our form, which are also the bounds of our gradient. Next we are passing the colours to be used to create the gradient – Color.Gray, and Color.Black. With the fourth parameter we are telling the brush to paint the gradient at 90 degrees – i.e. vertical. And finally we are using the Graphics object of the form to actually paint the form using the brush we just created.

Now if you run the application you will get a form which looks like this:

Obviously by changing the values of the parameters you pass to LinearGradientBrush you can create many different effects.

There is one little problem with this code. If you try and resize the form, the gradient will not adjust to the new size. This problem is easily fixed though. Within your Form_Resize event call this.Invalidate() and everything will work fine. This invalidates the entire surface of the form and forces it to be redrawn.

private void Form1_Resize(object sender, EventArgs e)
{
    this.Invalidate();
}

And that’s it. You now know how to make your forms look a little better by using gradients.

I hope you enjoyed this article. Happy painting and stay tuned for more soon.

Dave

Tagged as: GDI+, Windows Forms