Unable to draw proper gradient buttons on Windows Form

Question

I have the following simple code that should draw a gradient button, added as gradbtn.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using System.Drawing.Drawing2D;

namespace CustomControls.GradientControls
{
    public class Gradbtns : Button
     {
        protected override void OnPaint(PaintEventArgs pevent)
        { 
           
            base.OnPaint(pevent);

            pevent.Graphics.FillRectangle(new LinearGradientBrush(
              new PointF(0, this.Height / 2), new PointF(this.Width, this.Height / 2),
              Color.AliceBlue, Color.BurlyWood), this.ClientRectangle);
        }
    }
}

The problem drawing with the above code is that it does not enable the "Button" click action on the Form rather it appears jus as if its drawn on the form. But using the "OnPaintBackground" event does enable the button but the Colors aren't seen, See Below image

Answer 1

You need to use the OnClick method to implement the function of clicking the button, the following is a validated code example, which has made some optimization of the implementation of gradient background and settings of the control appearance, it should meet your need:

using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

namespace CustomControlsLibrary
{
    public class GradientButton : Button
    {
        public Color GradientColor1 { get; set; } = Color.AliceBlue;
        public Color GradientColor2 { get; set; } = Color.BurlyWood;
        public Color TextColor { get; set; } = Color.DarkBlue;

        protected override void OnPaint(PaintEventArgs pevent)
        {
            base.OnPaint(pevent);

            // Get the graphical object of the control
            Graphics graphics = pevent.Graphics;
            // Create brush for the background gradient
            using (LinearGradientBrush brush = new LinearGradientBrush(this.ClientRectangle, GradientColor1, GradientColor2, LinearGradientMode.Horizontal))
            {
                graphics.FillRectangle(brush, this.ClientRectangle);
            }

            // Draw text
            using (SolidBrush textBrush = new SolidBrush(TextColor))
            {
                SizeF textSize = graphics.MeasureString(this.Text, this.Font);
                PointF locationToDraw = new PointF();
                locationToDraw.X = (this.Width / 2) - (textSize.Width / 2);
                locationToDraw.Y = (this.Height / 2) - (textSize.Height / 2);
                graphics.DrawString(this.Text, this.Font, textBrush, locationToDraw);
            }

            // Process control border
            ControlPaint.DrawBorder(graphics, this.ClientRectangle, Color.Black, ButtonBorderStyle.Solid);
        }
        protected override void OnClick(EventArgs e)
        {
            base.OnClick(e);
            MessageBox.Show("Gradient Button Clicked!");
        }
    }
}

Add code like this to enable the click animation:

protected override void OnMouseEnter(EventArgs e)
{
    base.OnMouseEnter(e);
    this.GradientColor1 = Color.DarkBlue;
    this.GradientColor2 = Color.LightBlue;
    this.TextColor = Color.White;
}
protected override void OnMouseLeave(EventArgs e)
{
    base.OnMouseLeave(e);
    this.GradientColor1 = Color.LightBlue;
    this.GradientColor2 = Color.DarkBlue;
    this.TextColor = Color.DarkBlue;
}