How to fade in and fade out (Fading transition ) i

Question

I'm sending to my method different images and I want insert some effect to this change.

How can I fade in and fade out images?

 private void ShowImage(Image image, ImageLayout imageLayout, int numberOfSeconds)
    {
        try
        {
            if (this.image_timer != null)
                this.KillImageTimer();

            this.customer_form.DisplayImage(image, imageLayout);

            this.image_timer = new Timer();
            this.image_timer.Tick += (object s, EventArgs a) => NextImage();
            this.image_timer.Interval = numberOfSeconds* 1000;
            this.image_timer.Start();
        }
        catch
        {
            //Do nothing
        }


public void DisplayImage(Image image, ImageLayout imageLayout)
    {
        panel1.BackgroundImage = image;
        panel1.BackgroundImageLayout = imageLayout;
    }

Answer 1

There are no built-in fading transitions in Winforms.

So you will need to write one yourself.

The simplest one I can think of uses a second Panel, that is layered upon the first one and in fact needs to be inside the first Panel or else the transparency effect won't work..

Here is the setup, using two Panels:

public Form1()
{
    InitializeComponent();

    pan_image.BackgroundImage = someImage;

    pan_layer.Parent = pan_image;
    pan_layer.BackColor = pan_image.BackColor;
    pan_layer.Size = pan_image.Size;
    pan_layer.Location = Point.Empty;
}

For the fading animation I use a Timer. This is a quick code example:

Timer timer1 = new Timer();
int counter = 0;
int dir = 1;               // direction 1 = fade-in..
int secondsToWait = 5;
int speed1 = 25;           // tick speed ms
int speed2 = 4;            // alpha (0-255) change speed

void timer1_Tick(object sender, EventArgs e)
{
    // we have just waited and now we fade-out:
    if (dir == 0)
    {
        timer1.Stop(); 
        dir = -speed2;
        counter = 254;
        timer1.Interval = speed2;
        timer1.Start();
    }

    // the next alpha value:
    int alpha =  Math.Min(Math.Max(0, counter+= dir), 255);

    button1.Text = dir > 0 ? "Fade In" : "Fade Out";

    // fully faded-in: set up the long wait:
    if (counter >= 255)
    { 
        timer1.Stop(); 
        button1.Text = "Wait";
        timer1.Interval = secondsToWait * 1000;
        dir = 0;
        timer1.Start();


    }
    // fully faded-out: try to load a new image and set direction to fade-in or stop
    else if (counter <= 0)
    {
        if ( !changeImage() ) 
           {
             timer1.Stop(); 
             button1.Text = "Done";
           }
        dir = speed2;
    }

    // create the new, semi-transparent color:
    Color col = Color.FromArgb(255 - alpha, pan_image.BackColor);
    // display the layer:
    pan_layer.BackColor = col;
    pan_layer.Refresh();

}

I start it in a Button, on which I also show the current state:

private void button1_Click(object sender, EventArgs e)
{

    dir = speed2;
    timer1.Tick += timer1_Tick;
    timer1.Interval = speed1;
    timer1.Start();
}

As you can see I use two speeds you can set: One to control the speed of the Timer and one to control the steps by which the transparency changes on each Tick.

The effect is created by simply changing the Color from the BackgroundColor of the image Panel to fully transparent and back, waiting in between for a specified number of seconds.

And the end of the effect I call a function changeImage() to change the images. If this function returns false the Timer is stopped for good..

I'm pretty sure this could be written in a cleaner and more elegant way, but as it is it seems to work..

Update

• for flicker-free display use a double-buffered control, like this Panel subclass:

---

class DrawPanel : Panel
{
    public DrawPanel()      { DoubleBuffered = true;  }
}

Here is a sample implementation for changeImage:

bool changeImage()
{
    if (pan_image.BackgroundImage != null)
    {
        var img = pan_image.BackgroundImage;
        pan_image.BackgroundImage = null;
        img.Dispose();
    }
    pan_image.BackgroundImage = Image.FromFile(imageFiles[index++]);
    return index < imageFiles.Count;
}

It assumes two class level variables: a List<string> imageFiles filled with file names of images for a slide-show and an int index = 0.