Switching Images in Windows Forms

I have 3 pictures, each one has a colored circle in it. The 3 pictures are red, green and yellow.

I'm putting it in a PictureBox in a windows form. I want to switch these images from green to yelow to red or otherwise.

Is there anything I can make them fade to each oth开发者_运维知识库er instead of switching them the normal way?

I know this could be done using flash/j-query easily, but I was wondering how far I can achieve .

Something similar in windows forms using normal windows forms functionality.

Note: I'm using .net framework 4 and windows forms.

See Transition of images in Windows Forms Picture box. There is a solution that transitions the images using a timer on this page.

Code from site:

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:

namespace WindowsApplication1 
{
   public partial class Form1 : Form
   {
      private float mBlend;
      private int mDir = 1;
      public Form1()
      {
         InitializeComponent();
         timer1.Interval = 30;
         timer1.Tick += BlendTick;
         blendPanel1.Image1 = Bitmap.FromFile(@"c:\temp\test1.bmp");
         blendPanel1.Image2 = Bitmap.FromFile(@"c:\temp\test2.bmp");
         timer1.Enabled = true;
      }

      private void BlendTick(object sender, EventArgs e)
      {
         mBlend += mDir * 0.02F;
         if (mBlend < 0) { mBlend = 0; mDir = 1; }
         if (mBlend > 1) { mBlend = 1; mDir = -1; }
         blendPanel1.Blend = mBlend;
      }
   }
}

You'll need to modify the Bitmap.FromFile() calls. Build and run. You should see the displayed image smoothly morph from your first image to your second image without any flickering. Lots of ways to tweak the code, have fun.

I don't know if it is a good idea, but i would go for 2 image boxes, one to fade in, other to fade out, and change alpha when time passes.

Like what @Igoris suggested, You need to use two controls overlap each other, and you should define a timer so when you want to fade in or out, start the timer and in its tick decrease the Transparent of the first control and increase it on the second one... , the problem is that the ordinary controls does not support transparent by default. so you have to inherit it and apply transparent here is a custom TransparentPictureBox that inherited from PictureBox:

public class TransparentPictureBox : System.Windows.Forms.PictureBox
{
    /// <summary>
    /// Initialize new instance of this class.
    /// </summary>
    public TransparentPictureBox()
        : base()
    {
        DoubleBuffered = true;
        this.SetStyle(ControlStyles.SupportsTransparentBackColor, true);
        this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);
        this.SetStyle(ControlStyles.UserPaint, true);

        this.BackColor = Color.Transparent;
    }

}