使用mouseEnter事件缩放按钮 [英] Using a mouseEnter event to scale a button

问题描述

这是我在这里的第一篇文章.首先，有一些背景知识，我是C#的新手，实际上我正处于初期阶段.我是一名化学工程师，并且大多数人都具有MATLAB和Mathematica等语言的经验，但是我一直很喜欢编程，因此决定学习C#为我一直在使用的某些程序创建一些用户友好的界面.请注意，我使用的是Windows窗体，而不是WPF.

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.

我想做的是有一个链接到各种表格的主菜单屏幕.现在让它看起来更好，我想要做的是这个；当我将鼠标悬停在主窗口中的图片框(图片是按钮的图片)上时，我希望按钮增长"一点，然后当我离开时，按钮应缩小"至其原始大小.到目前为止，我的方法一直是尝试在mouseEnter事件上加载此增长动画的gif，然后在mouseLeave上加载收缩动画，但这只会循环遍历各个gif.我怎样才能让gif只播放一次?

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?

我尝试依次加载帧，并且它们之间也有线程睡眠，但是当我这样做时，我所看到的是我尝试加载的最后一张图像.这是用于此方法的代码示例，我尝试显示一个图像，然后在0.1秒后显示另一个图像

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");
    }

还有没有gif格式的方法吗，例如使用for循环来增加按钮或图片框的大小?

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();
    }

推荐答案

如果使主线程处于睡眠状态，我可以肯定它既锁定了用户输入，又阻塞了处理绘画的线程.因此，您的图像无法绘制任何动画.尝试使用这样的计时器:

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();
    }
}

更改代码以将鼠标悬停在PictureBox上时添加动画.当您悬停时，动画将停留在最后一帧.鼠标离开时，它将重置为第一帧.您可以使用任意数量的帧.您还应该处理MouseDown和MouseUp，并再创建1张图像以显示按下或按下"状态.

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.

这篇关于使用mouseEnter事件缩放按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！