Fade from one Panel to the other

[Robert Skidmore]

I am building an application that will fade one panel to another
panel. Both panels will have picture boxes in them (thumbnails).

This is what I have tried:

private void fade(System.Windows.Forms.Panel fP){
for (int i = 255; i >= 0;i--){
System.Threading.Thread.Sleep(10);
fP.BackColor = System.Drawing.Color.FromArgb(i, 255,255,255);
System.Windows.Forms.Application.DoEvents();
}
}

There is another Panel under the one being passed in to the function.

It has two problems. One it flickers like crazy, and two (now this I
don't get at all) it does not become transparent at all. It just fades
the form color. (At the time of testing the top panel had no images in
it, but the bottom one did)

Am I doing something wrong? (Well of course you are idiot) But what?

I don't know much about GDI, but is it possible to take a image of my
control that is fading out and replace the control with that image and
fade the image out? Would that be any better. (Thinking out loud).

If you could, please point me in the right direction. If you had
sample code to do this I would erect a large alter in your name and
sacrifice many chipmunks in for you. (OK, for those of you with no
sense of humor, I'm joking).


keywords: dotnet c# fade panel control

 

[Bob Powell [MVP]]

Doing this using a panels is a bad isea because Panel paints it's background
and that will cause terrible flicker.

It's so simple to create a control that holds a couple of images and fades
between them.

After my signature here is code that creates a simple fade-panel control.
The image draw modes could be made a wee bit more sophisticated but you'll
get the idea. There is also a test form that drives it.

Enjoy..

Oh. I have no sense of humour. You can sacrifice the chipmunks immediately.

--
Bob Powell [MVP]
C#, System.Drawing

The November edition of Well Formed is now available.
Learn how to create Shell Extensions in managed code.
http://www.bobpowell.net/currentissue.htm

Answer those GDI+ questions with the GDI+ FAQ
http://www.bobpowell.net/gdiplus_faq.htm

Read my Blog at http://bobpowelldotnet.blogspot.com

--------------------- fade panel ------------------------
using System;

using System.ComponentModel;

using System.Drawing;

using System.Drawing.Drawing2D;

using System.Drawing.Imaging;

using System.Windows.Forms;



namespace BobsControls

{

public class FadePanel : Control

{

Image _imageA;

public Image ImageA

{

get{return _imageA;}

set{_imageA=value;}

}

Image _imageB;

public Image ImageB

{

get{return _imageB;}

set{_imageB=value;}

}



int _fade=0;

float _fadeTime;

public float FadeTime

{

get{return _fadeTime;}

set{_fadeTime=value;}

}



Timer t=new Timer();

public FadePanel()

{

SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.UserPaint |
ControlStyles.DoubleBuffer, true);

t.Tick+=new EventHandler(t_Tick);

}

protected override void OnPaint(PaintEventArgs e)

{

if(_imageA==null)

return;

e.Graphics.DrawImage(_imageA,this.ClientRectangle,0,0,_imageA.Width,_imageA.
Height,GraphicsUnit.Pixel);

if(_imageB==null)

return;

ImageAttributes ia=new ImageAttributes();

ColorMatrix cm=new ColorMatrix();

cm.Matrix33=1.0f/255*_fade;

ia.SetColorMatrix(cm);

e.Graphics.DrawImage(_imageB,this.ClientRectangle,0,0,_imageA.Width,_imageA.
Height,GraphicsUnit.Pixel,ia);

base.OnPaint (e);

}

public void Fade()

{

_fade=1;

this.t.Interval=(int)(1000f*_fadeTime/32);

this.t.Enabled=true;

}

private void t_Tick(object sender, EventArgs e)

{

_fade+=8;

if(_fade>=255)

{

_fade=255;

t.Enabled=false;

}

Invalidate();

}

}

}

-------------------- test form ------------------

using System;

using System.Drawing;

using System.Collections;

using System.ComponentModel;

using System.Windows.Forms;

using System.Data;

namespace testfadepanel

{

/// <summary>

/// Summary description for Form1.

/// </summary>

public class Form1 : System.Windows.Forms.Form

{

private BobsControls.FadePanel fadePanel1;

private System.Windows.Forms.Button button1;

private System.Windows.Forms.Button button2;

private System.Windows.Forms.Button button3;

private System.Windows.Forms.TextBox textBox1;

private System.Windows.Forms.Label label1;

/// <summary>

/// Required designer variable.

/// </summary>

private System.ComponentModel.Container components = null;

public Form1()

{

//

// Required for Windows Form Designer support

//

InitializeComponent();

//

// TODO: Add any constructor code after InitializeComponent call

//

}

/// <summary>

/// Clean up any resources being used.

/// </summary>

protected override void Dispose( bool disposing )

{

if( disposing )

{

if (components != null)

{

components.Dispose();

}

}

base.Dispose( disposing );

}

#region Windows Form Designer generated code

/// <summary>

/// Required method for Designer support - do not modify

/// the contents of this method with the code editor.

/// </summary>

private void InitializeComponent()

{

this.fadePanel1 = new BobsControls.FadePanel();

this.button1 = new System.Windows.Forms.Button();

this.button2 = new System.Windows.Forms.Button();

this.button3 = new System.Windows.Forms.Button();

this.textBox1 = new System.Windows.Forms.TextBox();

this.label1 = new System.Windows.Forms.Label();

this.SuspendLayout();

//

// fadePanel1

//

this.fadePanel1.FadeTime = 0F;

this.fadePanel1.ImageA = null;

this.fadePanel1.ImageB = null;

this.fadePanel1.Location = new System.Drawing.Point(8, 32);

this.fadePanel1.Name = "fadePanel1";

this.fadePanel1.Size = new System.Drawing.Size(216, 192);

this.fadePanel1.TabIndex = 0;

this.fadePanel1.Text = "fadePanel1";

//

// button1

//

this.button1.Location = new System.Drawing.Point(264, 32);

this.button1.Name = "button1";

this.button1.TabIndex = 1;

this.button1.Text = "Image1";

this.button1.Click += new System.EventHandler(this.button1_Click);

//

// button2

//

this.button2.Location = new System.Drawing.Point(264, 64);

this.button2.Name = "button2";

this.button2.TabIndex = 2;

this.button2.Text = "Image2";

this.button2.Click += new System.EventHandler(this.button2_Click);

//

// button3

//

this.button3.Location = new System.Drawing.Point(264, 192);

this.button3.Name = "button3";

this.button3.TabIndex = 3;

this.button3.Text = "Fade";

this.button3.Click += new System.EventHandler(this.button3_Click);

//

// textBox1

//

this.textBox1.Location = new System.Drawing.Point(288, 136);

this.textBox1.Name = "textBox1";

this.textBox1.Size = new System.Drawing.Size(88, 20);

this.textBox1.TabIndex = 4;

this.textBox1.Text = "2";

//

// label1

//

this.label1.Location = new System.Drawing.Point(224, 136);

this.label1.Name = "label1";

this.label1.Size = new System.Drawing.Size(56, 23);

this.label1.TabIndex = 5;

this.label1.Text = "Time";

//

// Form1

//

this.AutoScaleBaseSize = new System.Drawing.Size(5, 13);

this.ClientSize = new System.Drawing.Size(384, 266);

this.Controls.Add(this.label1);

this.Controls.Add(this.textBox1);

this.Controls.Add(this.button3);

this.Controls.Add(this.button2);

this.Controls.Add(this.button1);

this.Controls.Add(this.fadePanel1);

this.Name = "Form1";

this.Text = "Form1";

this.ResumeLayout(false);

}

#endregion

/// <summary>

/// The main entry point for the application.

/// </summary>

[STAThread]

static void Main()

{

Application.Run(new Form1());

}

private void button1_Click(object sender, System.EventArgs e)

{

OpenFileDialog dlg=new OpenFileDialog();

dlg.Filter="Image files|*.bmp;*.jpg;*.gif";

if(dlg.ShowDialog()==DialogResult.OK)

{

this.fadePanel1.ImageA=Image.FromFile(dlg.FileName);

this.fadePanel1.Invalidate();

}

}

private void button2_Click(object sender, System.EventArgs e)

{

OpenFileDialog dlg=new OpenFileDialog();

dlg.Filter="Image files|*.bmp;*.jpg;*.gif";

if(dlg.ShowDialog()==DialogResult.OK)

{

this.fadePanel1.ImageB=Image.FromFile(dlg.FileName);

this.fadePanel1.Invalidate();

}

}

private void button3_Click(object sender, System.EventArgs e)

{

try

{

this.fadePanel1.FadeTime=float.Parse(this.textBox1.Text);

this.fadePanel1.Fade();

}

catch(Exception ex)

{

MessageBox.Show(ex.Message);

}

}

}

}

----------------------------