Automatic Fading Form

• Download demo project - 10 Kb

Introduction

Not long ago I wrote some code to randomly fade an application's main window out of view. The fading took place slowly, over the course of a few minutes. Whenever I pressed a certain key on the keyboard, the fading would undo itself, and the window would reappear on the desktop. The purpose of the exercise was to create an interesting April fool's day joke. The results were quite amusing. Hey, not everything in life needs to be serious - right?

After the joke had passed, I decided that my solution might be of some interest to others. I'll demonstrate the basics of what I did by fading a form into view, and then fading it back out again.

The Demo Application

The demonstration application consists of a form with a button on it. Here is what that form looks like:

Pressing the button creates another form, which fades into view over the course of about one second. Here is what the second form looks like:

Clicking the OK button makes the form fade away again.

The Code

As you may already suspect, the Opacity property is leveraged to perform the actual fading. The Opacity property is a standard part of the System.Windows.Forms.Form class, and enables a programmer to specify a general level of transparency for a form and its controls. I fade the form into view by first overriding the OnLoad method like this:

protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);

    // Should we start fading?
    if (!DesignMode)
    {        
        m_fadeInFlag = true;
        Opacity = 0;
        
        m_fadeInOutTimer.Enabled = true;

    } // End if we should start the fading process.
                
} // End OnLoad()

The m_fadeFlag is used to control whether the form fades into or out of view. I set it here to make the form gradually appear on the desktop. I set the Opacity value to zero in order to start with an invisible form. The m_fadeInOutTimer is used to animate the fading effect. The callback for that timer looks like this:

private void m_fadeInOutTimer_Tick(object sender, System.EventArgs e)
{
    // How should we fade?
    if (m_fadeInFlag == false)
    {    
        Opacity -= (m_fadeInOutTimer.Interval / 1000.0);

        // Should we continue to fade?
        if (this.Opacity > 0)
            m_fadeInOutTimer.Enabled = true;
        else
        {            
            m_fadeInOutTimer.Enabled = false;
            Close();
        } // End else we should close the form.

    } // End if we should fade in.
    else
    {
        Opacity += (m_fadeInOutTimer.Interval / 1000.0);
        m_fadeInOutTimer.Enabled = (Opacity < 1.0);
        m_fadeInFlag = (Opacity < 1.0);        
    } // End else we should fade out.

} // End m_fadeInOutTimer_Tick()

This method is called every 100 milliseconds or so, and continues until the timer is disabled. The value of the m_fadeInFlag flag determines whether the Opacity property gets incremented or decremented. The timer is disabled whenever the value of Opacity equals 0.0 or 1.0.

You may be wondering why the Close method is called when the form is in the process of fading out of view. The reasoning becomes clearer when you look at the OnClosing method. As you can see, when the form is still visible, the close operation needs to be canceled to prevent the dialog from simply destroying itself. The problem is that the dialog needs to continue fading until it no longer appears on the desktop, and then it needs to close normally. By canceling the close operation during OnClosing, and then calling the form's Close method again during the timer callback, the desired affect is achieved, and the form is eventually destroyed. Here is the listing for OnClosing:

protected override void OnClosing(CancelEventArgs e)
{  
    base.OnClosing(e);

    // If the user canceled then don't fade anything.
    if (e.Cancel == true)
        return;

    // Should we fade instead of closing?
    if (Opacity > 0)
    {
        m_fadeInFlag = false;
        m_fadeInOutTimer.Enabled = true;
        e.Cancel = true;
    } // End if we should fade instead of closing.

} // End OnClosing()

Conclusion

OK, this code isn't exactly rocket science. It's more like a quick, fun tip. So, what other ways can you think of, to apply this code? How about fading splash dialogs, or even fading "about boxes"?

Have Fun! :o)

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here