Using a mouseEnter event to scale a button

Question

this is my first post here. First off, some background, I'm new to C# and am literally in my teething stages. I'm a chemical engineer and mostly have experience with languages like MATLAB and Mathematica, but i have always liked programming and have decided to learn C# to create some user friendly interfaces for some programs I have been using. Note that i am using windows forms and not WPF.

What i would like to do is have a main menu screen linking to various forms. Now to make it look nicer, what i want to do is this; when i hover over a picturebox(the picture is of a button) in the main window i would like for the button to 'grow' a little bit, and then when i leave it should 'shrink' to its original size. So far my method has been to try and load a gif of this growth animation on the mouseEnter event and then load a shrink animation on the mouseLeave, but this just loops the respective gif over and over. How can i get the gif to play once only?

i tried loading the frames sequentially with a thread sleep in between them as well but all i see when i do this is the last image i try to load. here's an example of the code used for this method, where i try to show one image, and then show another after 0.1 seconds

    private void pictureBox1_MouseEnter(object sender, EventArgs e)
    {
        pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
        ((PictureBox)sender).Image =Image.FromFile("C:/Users/michael/Desktop/131.bmp");

        Thread.Sleep(100);
        ((PictureBox)sender).Image = Image.FromFile("C:/Users/michael/Desktop/131a.bmp");
    }

Also is there a way to do this without a gif, such as by using a for loop to increase the size of the button or picturebox?

EDIT 1: where do i put the timer stop in so that when i start the second animation, the first one stops?

      private void pictureBox1_MouseEnter(object sender, EventArgs e)
       {
        pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
        Timer timeraf = new Timer();
        timeraf.Interval = 10;
        timeraf.Tick += new EventHandler(timerAfwd_Tick);
        timeraf.Start();
     }

   private void pictureBox1_MouseLeave(object sender, EventArgs e)
    {

        pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
        Timer timerab = new Timer();
        timerab.Interval = 10;
        timerab.Tick += new EventHandler(timerAbwd_Tick);
        timerab.Start();
    }

Trevor Elliott · Accepted Answer · 2012-01-21T20:50:17.840

If you make your main thread sleep, I'm pretty sure it both locks out user input and it blocks the thread that handles painting. So your image can't paint any animations. Try using a timer like this:

public partial class Animation : Form
{
    Image img1 = Properties.Resources.img1;
    Image img2 = Properties.Resources.img2;
    Image img3 = Properties.Resources.img3;

    List<Image> images = new List<Image>();
    Timer timer = new Timer();

    public Animation()
    {
        InitializeComponent();

        timer.Interval = 250;
        timer.Tick += new EventHandler(timer_Tick);

        images.Add(img1);
        images.Add(img2);
        images.Add(img3);

        animated_pbx.Image = img1;
    }

    private void timer_Tick(object sender, EventArgs e)
    {
        if (this.InvokeRequired)
        {
            this.BeginInvoke(new EventHandler(timer_Tick));
        }
        else
        {
            // Loop through the images unless we've reached the final one, in that case stop the timer
            Image currentImage = animated_pbx.Image;
            int currentIndex = images.IndexOf(currentImage);

            if (currentIndex < images.Count - 1)
            {
                currentIndex++;

                animated_pbx.Image = images[currentIndex];

                animated_pbx.Invalidate();
            }
            else
            {
                timer.Stop();
            }
        }
    }

    private void animated_pbx_MouseEnter(object sender, EventArgs e)
    {
        timer.Start();
    }

    private void animated_pbx_MouseLeave(object sender, EventArgs e)
    {
        timer.Stop();
        animated_pbx.Image = img1;
        animated_pbx.Invalidate();
    }
}

EDIT: Changed code to add a animation when you hover over the PictureBox. The animation will stay on the final frame while you stay hovered. When the mouse leaves, it resets to the 1st frame. You can use any number of frames you want. You should also handle MouseDown and MouseUp, and create 1 more image to show the depressed or "down" state.

thanks, works like a charm! don't have enough rep to give u a thumbs up yet, sry! :) — Aleksandr Albert, Jan 21 '12 at 04:02
No problem. The convention here is to choose an "Accepted" answer by clicking the little arrow to the left of the answer. :) — Trevor Elliott, Jan 21 '12 at 04:47
Updated my answer. You were creating a new timer each time you handled a mouse event. You should only need 1 timer to be created in your form constructor, you set up all your properties there and just handle starting it and stopping it at different points. — Trevor Elliott, Jan 21 '12 at 20:47

Using a mouseEnter event to scale a button

1 Answers1

Linked