C# Using Others Code

Fade a panel- Windows forms

This is quite do-able in Winforms, it only has to look like a fade. One technique is to use Control.DrawToBitmap() to create a bitmap of the control. And then blend from a background bitmap to the foreground bitmap with a timer.

I'll use a UserControl instead of a Panel so you can design the control with the Winforms designer. The code will however work in any kind of control. Add a new class to your project and paste the code shown below. Compile. Create your own UserControl from this one with Project + Add New Item, Windows Forms node, "Inherited User Control" template and pick FadeControl from the popup list. Design the user control as normal.

As written, the control will automatically fade from the parent's BackColor to the control content as soon as you add the control to the parent. Call FadeOut() to make it blend back to the background. Pass true if you want to automatically dispose the control when it is done fading. You can use FadeIn() and the Faded property for manual control of the fading. You can adjust the numbers in the lines commented with // tweakable to adjust the animation. Additional work is needed if the parent has a non-opaque background.

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

class FadeControl : UserControl {

    public FadeControl() {
        pbox = new PictureBox();
        pbox.BorderStyle = BorderStyle.None;
        pbox.Paint += new PaintEventHandler(pbox_Paint);
        fadeTimer = new Timer();
        fadeTimer.Interval = 15;   // tweakable
        fadeTimer.Tick += new EventHandler(fadeTimer_Tick);
    }

    public bool Faded {
        get { return blend < 0.5f; }
    }
    public void FadeIn() {
        stopFade(false);
        createBitmaps();
        startFade(1);
    }
    public void FadeOut(bool disposeWhenDone) {
        stopFade(false);
        createBitmaps();
        disposeOnComplete = disposeWhenDone;
        startFade(-1);
    }

    private void createBitmaps() {
        bmpBack = new Bitmap(this.ClientSize.Width, this.ClientSize.Height);
        using (var gr = Graphics.FromImage(bmpBack)) gr.Clear(this.Parent.BackColor);
        bmpFore = new Bitmap(bmpBack.Width, bmpBack.Height);
        this.DrawToBitmap(bmpFore, this.ClientRectangle);
    }
    void fadeTimer_Tick(object sender, EventArgs e) {
        blend += blendDir * 0.02F;   // tweakable
        bool done = false;
        if (blend < 0) { done = true; blend = 0; }
        if (blend > 1) { done = true; blend = 1; }
        if (done) stopFade(true); 
        else pbox.Invalidate();
    }
    void pbox_Paint(object sender, PaintEventArgs e) {
        Rectangle rc = new Rectangle(0, 0, pbox.Width, pbox.Height);
        ColorMatrix cm = new ColorMatrix();
        ImageAttributes ia = new ImageAttributes();
        cm.Matrix33 = blend;
        ia.SetColorMatrix(cm);
        e.Graphics.DrawImage(bmpFore, rc, 0, 0, bmpFore.Width, bmpFore.Height, GraphicsUnit.Pixel, ia);
        cm.Matrix33 = 1F - blend;
        ia.SetColorMatrix(cm);
        e.Graphics.DrawImage(bmpBack, rc, 0, 0, bmpBack.Width, bmpBack.Height, GraphicsUnit.Pixel, ia);
    }

    private void stopFade(bool complete) {
        fadeTimer.Enabled = false;
        if (complete) {
           if (!Faded) this.Controls.Remove(pbox);
           else if (disposeOnComplete) this.Dispose();
        }
        if (bmpBack != null) { bmpBack.Dispose(); bmpBack = null; }
        if (bmpFore != null) { bmpFore.Dispose(); bmpFore = null; }
    }
    private void startFade(int dir) {
        this.Controls.Add(pbox);
        this.Controls.SetChildIndex(pbox, 0);
        blendDir = dir;
        fadeTimer.Enabled = true;
        fadeTimer_Tick(this, EventArgs.Empty);
    }

    protected override void OnCreateControl() {
        base.OnCreateControl();
        if (!DesignMode) FadeIn();
    }
    protected override void OnResize(EventArgs eventargs) {
        pbox.Size = this.ClientSize;
        base.OnResize(eventargs);
    }
    protected override void Dispose(bool disposing) {
        if (disposing) {
            stopFade(false);
            pbox.Dispose();
            fadeTimer.Dispose();
        }
        base.Dispose(disposing);
    }

    private PictureBox pbox;
    private Timer fadeTimer;
    private Bitmap bmpBack, bmpFore;
    private float blend;
    private int blendDir = 1;
    private bool disposeOnComplete;
}

How to fade in and fade out (Fading transition ) image on panel(backgroud image)?

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.

How to fade in/out a panel with content within using c#

I don't believe you can set the opacity of individual controls. The form itself has an opacity, but I don't think you want to fade out the whole control.

You can create custom controls that support opacity...here's an example:
http://www.slimee.com/2009/02/net-transparent-forms-and-controls-with.html

I believe this implementation would apply to child controls within the panel (because it is working on the rectangular area that the control takes up). If I'm wrong, you'd have to handle all of the child control's as part of your over-ridden behavior.

As others have said, getting this to look 'smooth' might be a lot of work. Hopefully someone will have a better answer.

C# button visible fade

In windows forms you can fade forms changing opacity with thread sleep
but forms button doesn't have that property. In addition Windows forms
is not very well designed for animations and stunning visuals so I guess
you will prefer WPF to perform that tasks

Check this:

Fade-in forms using .NET and C#

---

Related Topics