How can I change PictureBox size incrementally and smoothly ? ( in winforms , c# , visual studio 2013 )

Question

I have a Button in my form and a PictureBox with width 290 and height 145 that is hidden at first . I want to show the PictureBox little by little while the button's MouseEnter event happens . So I tried this code :

private void button1_MouseEnter(object sender, EventArgs e)
{
    pictureBox1.Size = new Size(0, 145);
    pictureBox1.Show();
    for (int i = 0; i < 290; i++)
        pictureBox1.Size = new Size(i, 145);
}

But it shows the PictureBox immediately with the primary size .

I found a similar question in this site ( PictureBox does not change its size ) , but actually its answers couldn't help me , too .

The code is running through so fast that you don't see the intermediate steps. — DavidG, Jul 28 '14 at 00:10

Cyral · Answer 1 · 2014-07-28T00:45:03.387

2

Your code executes all at once, so all you will see is a sudden change.

Use a timer and gradually increase the size when the timer ticks.

timer = new Timer(16); //~60 FPS
timer.Elapsed += new ElapsedEventHandler(timer_Elapsed);

...

private void button1_MouseEnter(object sender, EventArgs e)
{
    pictureBox1.Size = new Size(0, 145);
    pictureBox1.Show();

    timer.Enabled = true; // Enable it
}

...

private void timer_Elapsed(object sender, ElapsedEventArgs e)
{
    if (pictureBox1.Width < 290)
        pictureBox1.Width++; //Increment
    else
        timer.Enabled = false; //Disable
}

edited Jul 28 '14 at 00:45

answered Jul 28 '14 at 00:14

Cyral

13,999
6
50
90

Your code has a few problems . The first line has error because of wrong overload . Also Elapsed , ElapsedEventHandler and ElapsedEventArgs have error , because they couldn't be found . I just dragged a timer in my form and changed the interval by properties' box . Next I enabled the timer in button1_MouseEnter like you , and I wrote your last four lines in timer_Tick instead of timer_Elapsed . Actually there aren't any events in properties' box for timer , except Tick and I think those error were because of it . However , now the PictureBox is displayed as I want , thank you . – Reyhaneh Sharifzadeh Jul 28 '14 at 01:21
Make sure you use `using System.Timers`, and don't bother dragging a timer using the Form Creator thing, just code it in as I did. – Cyral Jul 28 '14 at 01:31
I added using System.Timers , but it didn't work again . What's the problem if I drag a timer in form ? – Reyhaneh Sharifzadeh Jul 28 '14 at 01:43
Not a problem, I find it easier just to code it in, don't usually think of a timer as a control. – Cyral Jul 28 '14 at 02:11

score 0 · Answer 2 · answered Jul 30 '14 at 20:48

You must use the Update method of your pictureBox in order to redraw it. Also a little delay will change the size more smoothly on Faster computers.

I changed your code like this:

private void button1_MouseEnter(object sender, EventArgs e)
{
    pictureBox1.Size = new Size(145, 145);            
    for (int i = 145; i < 290; i++)
    {
        pictureBox1.Size = new Size(i, i);
        pictureBox1.Update();
        System.Threading.Thread.Sleep(1);
    }
}

mohsen solhnia · Answer 3 · 2014-07-28T00:45:39.853

-1

1) define a new int as public :

public partial class Form1 : Form
    {
        int counter = 0;
.
.
.

2) use a timer :

 private void timer1_Tick(object sender, EventArgs e)
        {
            counter = counter + 10;
            timer1.Interval = 10;
            pictureBox1.Show();
            if (counter <= 290)
            { pictureBox1.Width += 1; }            
        }

3) enable the timer in mouse event:

private void button1_MouseEnter(object sender, EventArgs e)
{
    counter = 0;
    pictureBox1.Width = 0;
    timer1.Enabled = true;
}

edited Jul 28 '14 at 00:45

answered Jul 28 '14 at 00:38

mohsen solhnia

366
3
15

-1 for not disabling the timer. I edited your answer but you did not care. – Matin Lotfaliee Aug 08 '14 at 07:46
because it is tested, timer dont need to stop. – mohsen solhnia Aug 08 '14 at 08:05
Although the **if condition** inside the **timer1_Tick** event would give the questioner what she wants, But the event is called forever and calls **pictureBox1.Show()** and **2 assignments** all the time. Which leads the project to a non-optimized and non-standard direction. That is why it is better to switch the timer off after the first false condition inside the event. – Matin Lotfaliee Aug 08 '14 at 08:10
@MatinLotfaliee you cant dictate timer off time to programmers, please let them to choose themselves, you must give basic answer. for example, i purposely added timer_interval to specify picture grow speed (because it was necessary). – mohsen solhnia Aug 08 '14 at 08:33
The best basic answer is **"use a timer."**, which was mentioned in the comments. I don't call your answer a basic one, you have gone into details. Edit your answer a bit in order to get the downvote removed. – Matin Lotfaliee Aug 08 '14 at 09:28

How can I change PictureBox size incrementally and smoothly ? ( in winforms , c# , visual studio 2013 )

3 Answers3