winforms - Transition of images in Windows Forms Picture box

Question

I'm new to Windows Forms, in my project, i need to change the image in the picture box at runtime. I'm able to do that with the help of a timer. The picture just gets changed. Is it possible to do some transitions when image changes, for example fade in, fade out, blur etc.. If possible could some one please let me know how to do it. I searched in net but in vain.Thanks in advance.

Varun

Answer 1

Simply take new code file and paste below code in it

an original answer for the similar question, answer taken from another question

Answer

using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.Windows.Forms;

public class BlendPanel : Panel
{
private Image mImg1;
private Image mImg2;
private float mBlend;
public BlendPanel()
{
    SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer, true);
}
public Image Image1
{
    get { return mImg1; }
    set { mImg1 = value; Invalidate(); }
}
public Image Image2
{
    get { return mImg2; }
    set { mImg2 = value; Invalidate(); }
}
public float Blend
{
    get { return mBlend; }
    set { mBlend = value; Invalidate(); }
}
protected override void OnPaint(PaintEventArgs e)
{
    if (mImg1 == null || mImg2 == null)
        e.Graphics.FillRectangle(new SolidBrush(this.BackColor), new Rectangle(0, 0, this.Width, this.Height));
    else
    {
        Rectangle rc = new Rectangle(0, 0, this.Width, this.Height);
        ColorMatrix cm = new ColorMatrix();
        ImageAttributes ia = new ImageAttributes();
        cm.Matrix33 = mBlend;
        ia.SetColorMatrix(cm);
        e.Graphics.DrawImage(mImg2, rc, 0, 0, mImg2.Width, mImg2.Height, GraphicsUnit.Pixel, ia);
        cm.Matrix33 = 1F - mBlend;
        ia.SetColorMatrix(cm);
        e.Graphics.DrawImage(mImg1, rc, 0, 0, mImg1.Width, mImg1.Height, GraphicsUnit.Pixel, ia);
    }
    base.OnPaint(e);
}
}

Build your project. You can now drop a BlendPanel from the top of the toolbox onto your form. Here's a sample program that uses it:

    private float mBlend;
    private int mDir = 1;
    public int count = 0;
    public Bitmap[] pictures;

    public void myPhoto()
    {
        pictures = new Bitmap[9];
        pictures[0] = new Bitmap(@"Library Imagescf3.jpg");
        pictures[1] = new Bitmap(@"Library Imagescf4.jpg");
        pictures[2] = new Bitmap(@"Library Imagesl1.JPG");
        pictures[3] = new Bitmap(@"Library Imagesl2.JPG");
        pictures[4] = new Bitmap(@"Library Imagesl3.JPG");
        pictures[5] = new Bitmap(@"Library Imagesl4.JPG");
        pictures[6] = new Bitmap(@"Library Imagesl5.JPG");
        pictures[7] = new Bitmap(@"Library Imagesl6.JPG");
        pictures[8] = new Bitmap(@"Library Imagesl7.JPG");

        timer1.Interval = 50; //time of transition
        timer1.Tick += BlendTick;
        try
        {
            blendPanel1.Image1 = pictures[count];
            blendPanel1.Image2 = pictures[++count];
        }
        catch
        {

        }
        timer1.Enabled = true;
    }
    private void BlendTick(object sender, EventArgs e)
    {
        mBlend += mDir * 0.02F;
        if (mBlend > 1)
        {
            mBlend = 0.0F;
            if ((count + 1) < pictures.Length)
            {
                blendPanel1.Image1 = pictures[count];
                blendPanel1.Image2 = pictures[++count];
            }
            else
            {
                blendPanel1.Image1 = pictures[count];
                blendPanel1.Image2 = pictures[0];
                count = 0;
            }
        }
        blendPanel1.Blend = mBlend;
    }

You'll need to modify the new Bitmap(@"yourimagePath"); calls. Build and run. You should see the displayed image smoothly morph from your first image to your second image without any flickering.

I hope it helps for other...