Question

I am trying to learn .NET programming. As a part of my learning, I tried to make some effects on buttons. It is working… but not as smooth as I imagined! Is there any better way to do this? Thank you in advance!

My need:

There are 3 buttons.
When you hover the mouse over one of them, it expands and when you mouse out from that button, it returns to its initial size.

private void button1_MouseHover(object sender, EventArgs e)
    {
        button1.BackColor = Color.White;
        button1.Width = 130;
        button1.BringToFront();            
    }

    private void button1_MouseLeave(object sender, EventArgs e)
    {
        button1.BackColor = Color.Red;
        button1.Width = 75;         
    }

    private void button2_MouseHover(object sender, EventArgs e)
    {
        button2.BackColor = Color.Gray;
        button2.Width = 130;
        button2.BringToFront();            
    }

    private void Form1_MouseLeave(object sender, EventArgs e)
    {
        button2.BackColor = Color.Red;
        button2.Width = 75;

    }

    private void button3_MouseHover(object sender, EventArgs e)
    {
        button3.BackColor = Color.DimGray;
        button3.Width = 130;
        button3.BringToFront();
    }

    private void button3_MouseLeave(object sender, EventArgs e)
    {
        button3.BackColor = Color.Red;
        button3.Width = 75;

    }

Answer 1

So first off, you don’t want to do the exact same thing 3 times. Create a single method to add the appropriate handlers for a button, and then just write the code once to handle any given button.

Note that you can go into the expand/contract tick handlers and use the percentComplete value to set the height as well, to move the color along a spectrum (this would involve some mathematics of colors to do though) or to alter any other aspect of the button. If you’re really motivated to generalize it you could add a parameter to the method of Action<double> that does something to the object based on the given percent progress.

public void AddAnimation(Button button)
{
    var expandTimer = new System.Windows.Forms.Timer();
    var contractTimer = new System.Windows.Forms.Timer();

    expandTimer.Interval = 10;//can adjust to determine the refresh rate
    contractTimer.Interval = 10;

    DateTime animationStarted = DateTime.Now;

    //TODO update as appropriate or make it a parameter
    TimeSpan animationDuration = TimeSpan.FromMilliseconds(250);
    int initialWidth = 75;
    int endWidth = 130;

    button.MouseHover += (_, args) =>
    {
        contractTimer.Stop();
        expandTimer.Start();
        animationStarted = DateTime.Now;
        button.BackColor = Color.DimGray;
    };

    button.MouseLeave += (_, args) =>
    {
        expandTimer.Stop();
        contractTimer.Start();
        animationStarted = DateTime.Now;
        button.BackColor = Color.Red;
    };

    expandTimer.Tick += (_, args) =>
    {
        double percentComplete = (DateTime.Now - animationStarted).Ticks
            / (double)animationDuration.Ticks;

        if (percentComplete >= 1)
        {
            expandTimer.Stop();
        }
        else
        {
            button.Width = (int)(initialWidth +
                (endWidth - initialWidth) * percentComplete);
        }
    };

    contractTimer.Tick += (_, args) =>
    {
        double percentComplete = (DateTime.Now - animationStarted).Ticks
            / (double)animationDuration.Ticks;

        if (percentComplete >= 1)
        {
            contractTimer.Stop();
        }
        else
        {
            button.Width = (int)(endWidth -
                (endWidth - initialWidth) * percentComplete);
        }
    };
}