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 chan

Answer 1

There is no built-in support for such effects, but you can implement them. I'd suggest to write a custom control that renders the image and have a method for fade-swap, fade itself can be reached with alpha-blending drawing with .NET Graphics class.

However, Graphics class isn't very fast, I don't recommend to use this technique for big images. If you need some fancy UI with hw-accelerated effects, take a look at WPF.

Answer 2

Blend effects are easy to get going by using the ColorMatrix class. There's a good example available in my answer in this thread.

A simple way to get a blur is to resize the image, making it smaller, then redraw it back, making it larger. The Graphics.InterpolationMode property affects the type of blur you'll get.

Those are quicky do-it-yourself solutions. Any decent graphics library has these kind of operations built-in. You probably want something free, check out ImageMagick.NET

Answer 3

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 Images\cf3.jpg");
        pictures[1] = new Bitmap(@"Library Images\cf4.jpg");
        pictures[2] = new Bitmap(@"Library Images\l1.JPG");
        pictures[3] = new Bitmap(@"Library Images\l2.JPG");
        pictures[4] = new Bitmap(@"Library Images\l3.JPG");
        pictures[5] = new Bitmap(@"Library Images\l4.JPG");
        pictures[6] = new Bitmap(@"Library Images\l5.JPG");
        pictures[7] = new Bitmap(@"Library Images\l6.JPG");
        pictures[8] = new Bitmap(@"Library Images\l7.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...

Answer 4

To put it simply, not without external (3rd-party) libraries.