Gradient Panel in C#

Gradient Panel in C# is a custom control that will allow users to add a gradient colors. In this tutorial we’ll learn how to create your own gradient panel in C# without any third party tool. This will add another cool touch to your interface. It consists of two or more colors combined together to form a gradient color.

But for this particular tutorial we’ll design a gradient panel having two colors, One for the top and other for bottom.

Tools Required:

1. Visual Studio 2010 or later version.

Steps to Follow:

1. Create a new windows forms application project.
2. Go to solution explorer, right click on project file, go to add-> New class.
3. Name it as ‘GradientPanel’ and hit enter key.
4. Our gradient panel will be a simple panel with some extra custom properties. So, Inherit it from main ‘Panel’ class.
5. Create two color properties for bottom color and top color like this:

public Color ColorTop { get; set; }
public Color ColorBottom { get; set; }

6. We’ll have to override the onPaint() method of panel class and add the following code:

 protected override void OnPaint(PaintEventArgs e)
        {
            LinearGradientBrush lgb = new 
            LinearGradientBrush(this.ClientRectangle, this.ColorTop, 
            this.ColorBottom, 90F);
            Graphics g = e.Graphics;
            g.FillRectangle(lgb, this.ClientRectangle);
            base.OnPaint(e);
        }

Now just try to rebuild your solution file or just press Ctrl+Shift+B as a shortcut.

After a successful rebuild, you’ll find Gradient panel in the toolbox. Just drag and drop it on your form to use it.

Select your gradient panel, go to properties (Shortcut F4 key) and you’ll find colorTop and color bottom properties in the toolbox.

Try to change those colors in order to change the gradient color of your panel.

See it in Action:

Source Code:

Thanks for visiting us. Please Don’t forget to subscribe our official YouTube Channel, C# Ui Academy