Why won't my second C# fadein condition change the pictureBox?

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

I think this might be because you are doing this all in the while loop, the ui doesn't get a chance to repaint itself before you change it.

You might want to do the subtraction part within the timer ticks too, rather than in one go.

Answer 2

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.

Answer 3

I'm assuming you mean it skips the part after:

 if (alpha == 40 && breakCheck == false)

I think that doesn't execute because you stop incrementing alpha at a value of 39 because of this line:

if (alpha++ < 40)

If you change it to a less equal it should execute:

if (alpha++ <= 40)

Answer 4

Why do people insist so much in winforms?

Look, you can do this in WPF with 20 lines of XAML and absolutely no C# code at all:

<Window x:Class="WpfApplication4.Window4"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window4" Height="300" Width="300">
    <Window.Resources>
        <Storyboard x:Key="FadeIn" TargetName="Red" Duration="00:00:05">
            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1"/>
        </Storyboard>
        <Storyboard x:Key="FadeOut" TargetName="Blue" Duration="00:00:05">
            <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0"/>
        </Storyboard>
    </Window.Resources>
    <DockPanel>
        <Button DockPanel.Dock="Top"  HorizontalAlignment="Center" Content="Fade">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard Storyboard="{StaticResource FadeIn}"/>
                        <BeginStoryboard Storyboard="{StaticResource FadeOut}"/>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <Grid Margin="30">
            <Grid Background="Red" Opacity="0" x:Name="Red"/>
            <Grid Background="Blue" x:Name="Blue"/>
        </Grid>
    </DockPanel>
</Window>

Code Behind:

using System.Windows;

namespace WpfApplication4
{
    public partial class Window4 : Window
    {
        public Window4()
        {
            InitializeComponent();
        }
    }
}

Just copy and paste my code in a file -> new project -> WPF application and see the results for yourself.

These are grids with a solid color background. You could replace the <Grid/>s by <Image/>s or anything you wish.