Click here to Skip to main content
Click here to Skip to main content

Gradient Forms - The Easy Way

, 24 Aug 2005
Rate this:
Please Sign up or sign in to vote.
This article shows you how to easily implement gradients as background in your form.

Introduction

I have noticed that a lot of programmers don't bother about the looks of their software. Mostly because they think it is too hard or that it takes too much time. There are certain things that you can do in .NET which can make your application look better with minimal effort. One of those is having a gradient background on your form. Sometimes even a light gradient is enough to make your product stand out in the crowd.

I looked in CodeProject and saw that there was already an article on GradientForms by Erdal Halici. I found his approach rather complicated and lengthy for such an easy task. That's why I wrote this article. This article will show you how to do this in a very easy way, with a small base class that you can use in your application. I promise the only thing you will have to do is to set the colors. It isn't that hard, is it? Smile | :)

Laaaadieees and Gentlemeeen, start your Visual Studioooo's!

The good, the bad and the gradient

The good

There are people who take the time to look for the right color for their application. They look for a consistent background that will make their product stand out and recognizable. I applaud this, but why not take it one step further and choose two colors?

The bad

There are people who don't even bother to look for a color. The application just uses that boring gray background color that you see in many applications. You should be ashamed of yourself!

The gradient

And then there are people who apply gradients in their background. It doesn't take any extra effort except for choosing the colors, and your application has that extra visual touch and guess what: Users love these visual things.

Crafting the BaseGradientForm

First things first

The BaseGradientForm is nothing more than a normal form that has some predefined properties and methods. You create it the way you normally create a form. The only thing we do is add some properties and such.

We need three properties to pull it off:

  • Color1: First gradient color.
  • Color2: Second gradient color.
  • ColorAngle: The angle of the gradient.

These do nothing special. These are normal properties like any other property. There's only one difference: when we set a value (from code, or in the design window of our derived form) we need the form to repaint itself. To achieve this we need to call a method that tells our form (or control, when used on a control) to repaint itself. The method used for this purpose is Invalidate. We need the Form to repaint itself when any of these three properties are changed, and thus set. So, we add the line to set all three properties.

private Color _Color1 = Color.Gainsboro;
private Color _Color2 = Color.White;
private float _ColorAngle = 30f;

public Color Color1
{
  get { return _Color1; }
  set 
  { 
    _Color1 = value; 
    this.Invalidate(); // Tell the Form to repaint itself
  }
}

public Color Color2
{
  get { return _Color2; }
  set 
  { 
    _Color2 = value; 
    this.Invalidate(); // Tell the Form to repaint itself
  }
}

public float ColorAngle
{
  get { return _ColorAngle; }
  set 
  { 
    _ColorAngle = value; 
    this.Invalidate(); // Tell the Form to repaint itself
  }
}

Painting our Picasso

Whenever the form gets a call to repaint, either from our Invalidate or from the operating system, it will fire two events: Paint and PaintBackground. It doesn't actually matter in which of the two you put your code, but here we will override PaintBackground to do our thing. In this method, we draw a rectangle onto the form. This rectangle will have the same dimensions as our form. This way it will cover the entire form and will act as the background.

protected override void OnPaintBackground(PaintEventArgs pevent)
{
  // Getting the graphics object
  Graphics g = pevent.Graphics;

  // Creating the rectangle for the gradient
  Rectangle rBackground = new Rectangle(0, 0, 
                            this.Width, this.Height);

  // Creating the lineargradient
  System.Drawing.Drawing2D.LinearGradientBrush bBackground 
      = new System.Drawing.Drawing2D.LinearGradientBrush(rBackground, 
                                        _Color1, _Color2, _ColorAngle);

  // Draw the gradient onto the form
  g.FillRectangle(bBackground, rBackground);

  // Disposing of the resources held by the brush
  bBackground.Dispose();
}

Bugs?

When you test the code that we have written you will notice that strange things happen when you start resizing your form. This is not because critters have taken over your system, it happens because the form doesn't get a 'Repaint Yourself Event' where it resizes. We really have to do everything ourselves, don't we? Luckily, we don't need to do the hard task of overriding the Resize event, but just add one line in the constructor of the BaseFormGradient that tells the form to repaint on resize.

this.SetStyle( ControlStyles.ResizeRedraw, true );

Using the code

BaseForm

You know that when you write an application, and thus create a form you always create a baseform? You do that, right? Just have that baseform inherit from the 'BaseFormGradient', after you add BaseFormGradient.cs to your project, and voila! You have the gradient capability on your form!

No BaseForm?

Don't worry (be happy?), you can still have the gradient capability even if you don't have a baseform. Just have your forms inherit from 'BaseFormGradient', after you add BaseFormGradient.cs to your project.

Applying the gradients

All you need to do is set both the colors and the angle for the gradient. Yes I'm serious, that's all there is to it!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Uytterhaegen Tommy (Tuy)
Web Developer
Belgium Belgium
No Biography provided

Comments and Discussions

 
QuestionLicense Pinmemberastrodog4619-Nov-12 6:42 
QuestionEasyier Way PinmemberJustin Spafford8-Jul-11 22:16 
AnswerRe: Easyier Way PinmemberSocarsky17-Dec-13 19:38 
GeneralMy vote of 5 PinmemberMark Farr11-May-11 0:10 
GeneralMy vote of 5 Pinmemberitsho26-Sep-10 8:22 
Generaljust a small note Pinmemberitsho26-Sep-10 8:22 
GeneralMy vote of 5 PinmemberDave Cross9-Aug-10 2:29 
Generaldo you have an update of this for VS2005 PinmemberDavidLanham19-Sep-07 3:27 
GeneralRe: do you have an update of this for VS2005 PinmemberDavidLanham19-Sep-07 3:44 
QuestionBug - Transparent Title Pinmembermetroholographix5-Jul-07 23:46 
AnswerRe: Bug - Transparent Title - solution Pinmembermetroholographix6-Jul-07 0:32 
GeneralMDI Form PinmemberDEGT18-Jun-07 3:48 
GeneralRe: MDI Form Pinmemberreaplo27-Apr-09 19:06 
NewsRe: MDI Form Pinmemberreaplo27-Apr-09 19:33 
Generalexcessive onPaintBackground Pinmemberc-a-b-20-Nov-06 10:19 
GeneralStyle PinmemberUytterhaegen Tommy (Tuy)25-Aug-05 20:29 
GeneralRe: Style Pinmembercbowl30-Aug-05 14:14 
GeneralRe: Style PinmemberUytterhaegen Tommy (Tuy)30-Aug-05 21:08 
GeneralRe: Style PinmemberMiguel Lopes31-Aug-06 5:39 
GeneralRe: Style PinsussAnonymous31-Aug-05 23:53 
GeneralSure it's easy to create gradients, but... Pinmemberrudy.net24-Aug-05 16:55 
GeneralRe: Sure it's easy to create gradients, but... PinmemberUytterhaegen Tommy (Tuy)24-Aug-05 20:23 
GeneralRe: Sure it's easy to create gradients, but... PinmemberMiguel Lopes31-Aug-06 5:40 
GeneralRe: Sure it's easy to create gradients, but... PinmemberPunCha25-Feb-07 22:09 
QuestionWhy rating 4.09??? For showing how to create a LinearGradientBrush??? PinmemberGeorgi Atanasov24-Aug-05 7:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 24 Aug 2005
Article Copyright 2005 by Uytterhaegen Tommy (Tuy)
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid