Question

I have C# fading out a picture box, when I click a button, and after the fade out the same picture box will fade in the next image. Currently, I have the fade out code placed both in the fade out and fade in conditions. (I still need to rewrite the code for fade in.) Once the code hits the logic for the second image, the code just loops through until the conditions turn up false and exits without changing the display. How can I correct my code to get the same effect going on the second image? Also, if anyone knows how to rewrite the fade out logic for fade in please let me know.

Variables defined at top:

int alpha = 0;
    bool backButtonClick = false;
    bool breakCheck = false;

Button’s logic snippet:

        private void storyChooser_Click(object sender, EventArgs e)
        {

            switch (userChoice)
            {
                case Choice.Son:

                    transitions();


                     if (alpha == 0)
                    {
                        pictureBox1.Image = Properties.Resources.test;
                        timer1.Start();

                    }
                break;
            }

The timer:

        private void timer1_Tick(object sender, EventArgs e)
        {
            if (backButtonClick == true)
            {
                timer1.Stop();
                alpha = 0;
                backButtonClick = false;
            }

            if (alpha++ < 40)
            {
                Image image = pictureBox1.Image;
                using (Graphics g = Graphics.FromImage(image))
                {
                    Pen pen = new Pen(Color.FromArgb(alpha, 255, 255, 255), image.Width);
                    g.DrawRectangle(pen, -1, -1, image.Width, image.Height);
                    g.Save();

                }
                pictureBox1.Image = image;
            }
            else
            {
                timer1.Stop();
            }

            if (alpha == 40 && breakCheck == false)
            {
                pictureBox1.Image = Properties.Resources.transitionTest;

                timer1.Start();

                while (alpha-- > 0)
                {
                    Image image = pictureBox1.Image;
                    using (Graphics g = Graphics.FromImage(image))
                    {
                        Pen pen = new Pen(Color.FromArgb(alpha, 255, 255, 255), image.Width);
                        g.DrawRectangle(pen, -1, -1, image.Width, image.Height);
                        g.Save();

                    }
                    pictureBox1.Image = image;
                    label1.Text = alpha.ToString();
                }
                breakCheck = true;
            }
            label1.Text = alpha.ToString();
        }

I’m running through the while loop, towards the bottom of the timer, without updating any of the graphics.

Thanks.

Answer 1

It looks like your second fadein condition has a while loop in it.

That’s going to make your control go from one side to the other before your next timer tick event.

I had to re-write your code so I could get a better feel for it, though.

Why are you using a PictureBox control if you are using Graphic to write directly to the screen?

Here is my horrible mangling of your code. I hope it doesn’t offend.

I declared all of the variables up front so VS would not complain about bad definitions.

I also did not have a transitionTest image, so I defined a Properties_Resources_transitionTest for this.

int MAX = 40;
int alpha;
bool backButtonClick;
bool breakCheck;
Label label1;
Image Properties_Resources_transitionTest;
Image image;

Initialized stuff below and kicked it off. I don’t know what your enumerated type means or that transition() method was for that you called.

private void storyChooser_Click(object sender, EventArgs e) {
  alpha = 0;
  backButtonClick = false;
  breakCheck = false;
  image = Properties_Resources_transitionTest;
  timer1.Start();
}

For the backButtonClick and breakCheck values, I put those inside a form’s click event handler like so:

private void backButton_Click(object sender, EventArgs e) {
  backButtonClick = !backButtonClick;
}

private void break_Click(object sender, EventArgs e) {
  breakCheck = true;
  // easier to just write
  // timer1.Stop();
}

This Timer Tick event handler should take care of what you are trying to do. Notice the while loop has been removed, as well.

private void timer1_Tick(object sender, EventArgs e) {
  if (!breakCheck) {
    using (Pen p = new Pen(Color.FromArgb(alpha, 255, 255, 255), image.Width)) {
      using (Graphics g = Graphics.FromImage(image)) {
        g.DrawRectangle(p, 0, 0, image.Width, image.Height);
      }
    }
    if (backButtonClick) {
      alpha--;
      if (alpha == 0) {
        timer1.Stop();
      }
    } else {
      alpha++;
      if (alpha == MAX) {
        timer1.Stop();
      }
    }
  } else {
    timer1.Stop();
  }
  label1.Text = alpha.ToString();
}

UPDATE: Per question in the comment:

If backButtonClick is true, the alpha value will decrease by 1 each time the timer ticks and stop when alpha gets to zero.

If backButtonClick is false, alpha will increase until it reaches MAX, then stop the timer.

Since alpha controls your Pen color’s Opacity, your image will appear to fade in and out, depending on what value you have backButtonClick set to.

I believe that is what you are after, but I could be wrong.