How to create animated glow effect on Button Hover

Question

I am creating a CustomButton control for my application. Now, What I want to do that when the mouse goes on the button it should show glow effect and when mouse leave it should get back to normal. But the glow effect should not displayed immediately. It should display with animation. just like Chrome Browser Tab Page. I have tried this logic in the button control.

This is my logic. But, I think this is not a proper way. please suggest proper way to get glow effect.

private void ShowGlow()
{
    for (int i = 0; i<50; i+= 5)
    {
         Sleep(100);
         Graphics g = this.CreateGraphics();
         Color color = Color.FromArgb(i, 150,150,25);
         g.FillRectangle(new SolidBrush(color), this.ClientRectangle);
    }
}

Additional Details Visual Studio 2005, Windows XP, Windows Form Controls

Answer 1

I suggest you a simpler method. Create two images, with glow effect and without. And use this code.

On MouseEnter:

private void MyButton_MouseEnter(object sender, EventArgs e)
{
    MyButton.BackgroundImage = Properties.Resources.WithGlow; 
}

On MouseLeave:

private void MyButton_MouseLeave(object sender, EventArgs e)
{
    MyButton.BackgroundImage = Properties.Resources.WithoutGlow; 
}

This is what I usually do in my projects.

Answer 2

Here is some code that uses timers and overrides the OnPaint method. It skips by 10 instead of 1 because I was afraid you wouldn't see the effect fast enough otherwise. The Timer interval is in milliseconds and was set to 100 because that was what you were using in your original example for sleep. If you need the effect to work faster, you can reduce the interval. If it should be slower, you can increase the interval, or decrease how much you increment alpha with each tick.

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

namespace LicensePlate
{
    /// <summary>
    /// The GlowButton class
    /// </summary>
    public class GlowButton : Button
    {
        #region Fields
        Timer timer;
        private int alpha;
        Color color;

        #endregion

        #region Events

        #endregion

        #region Constructor


        /// <summary>
        /// Creates a new instance of the GlowButton class.
        /// </summary>
        public GlowButton()
        {
            timer = new Timer();
            timer.Interval = 100;
            timer.Tick += timer_Tick;
        }


        #endregion

        #region Methods

        /// <summary>
        /// Only used if you need something else to trigger the glow process
        /// </summary>
        private void ShowGlow()
        {
            timer.Start();
        }

        /// <summary>
        /// Start the timer and reset glow if the mouse enters
        /// </summary>
        /// <param name="e"></param>
        protected override void OnMouseEnter(EventArgs e)
        {
            timer.Start();
            alpha = 0;
        }


        /// <summary>
        /// Reset the glow when the mouse leaves
        /// </summary>
        /// <param name="e"></param>
        protected override void OnMouseLeave(EventArgs e)
        {
            timer.Stop();
            alpha = 0;
            color = BackColor;
            Invalidate();
        }


        /// <summary>
        /// Override paint so that it uses your glow regardless of when it is instructed to draw
        /// </summary>
        /// <param name="pevent"></param>
        protected override void OnPaint(PaintEventArgs pevent)
        {
            base.OnPaint(pevent);
            if (alpha > 0)
            {
                using (Brush b = new SolidBrush(color))
                {
                    pevent.Graphics.FillRectangle(b, this.ClientRectangle);
                }
            }

            //base.OnPaint(pevent);
        }

        /// <summary>
        /// Use a timer tick to set the color and increment alpha
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        void timer_Tick(object sender, EventArgs e)
        {
            alpha+=10;
            color = Color.FromArgb(alpha, 150, 150, 25);
            if (alpha > 50) {
                timer.Stop();
            }

            Invalidate();
        }

        #endregion




    }
}