Opacity of Forms in C#

Introduction

In C#, we can access the opacity of a Windows Form using the Opacity property. This article shows you how we can change it, using a simple project.

Using the code

System.Windows.Forms.Timer

We'll try to implement a fade-in and fade-out effect on our WinForm. To do that, we use System.Windows.Forms.Timer.

We will use three Timers in our project:

TimerFadein: Shows the fade-in effect. TimerFadein runs the following method on its Tick event.

private void TimerFadein_Tick(object sender, EventArgs e)
{
    //Prevents Timers overlapping 
    if (timerHalfFadeOut.Enabled || TimerFadeout.Enabled)
    {
        TimerFadein.Enabled = false;
        return;
    }
    timerRunning = true;
    //\\
    this.Opacity += 0.05;
    if (this.Opacity >= 0.95)
    {
        this.Opacity = 1;
        timerRunning = TimerFadein.Enabled = false;
    }
    maskedTextBoxOpacity.Text = (this.Opacity * 100).ToString();
    hScrollBar1.Value = (int)(this.Opacity * 100);
}

TimerFadeout: Shows the fade-out effect. TimerFadeout runs the method below on its Tick event.

private void TimerFadeout_Tick(object sender, EventArgs e)
{
    //Prevents Timers overlapping
    if (timerHalfFadeOut.Enabled || TimerFadein.Enabled)
    {
        TimerFadeout.Enabled = false;
        return;
    }
    timerRunning = true;
    //\\
    this.Opacity -= 0.05;
    if (this.Opacity <= 0.05)
    {
        this.Opacity = 0;
        Application.ExitThread();
    }
    maskedTextBoxOpacity.Text = (this.Opacity * 100).ToString();
    hScrollBar1.Value = (int)(this.Opacity * 100);
}

timerHalfFadeOut: Shows a 0.5 opacity and a fade-out effect. timerHalfFadeOut runs the method below on its Tick event.

private void timerHalfFadeOut_Tick(object sender, EventArgs e)
{
    //Prevents Timers overlapping
    if (TimerFadeout.Enabled || TimerFadein.Enabled)
    {
        timerHalfFadeOut.Enabled = false;
        return;
    }
    timerRunning = true;
    //\\
    this.Opacity -= 0.05;
    if (this.Opacity <= 0.50)
    {
        this.Opacity = 0.5;
        timerRunning = timerHalfFadeOut.Enabled = false;
    }
    maskedTextBoxOpacity.Text = (this.Opacity * 100).ToString();
    hScrollBar1.Value = (int)(this.Opacity * 100);
}

Running the WinApp with a fade-in effect

To show our app with a fade-in effect, we must change the opacity of our Form to zero in the constructor. We must enable TimerFadein too, to show our WinApp with a fade-in effect.

public Form1()
{
    InitializeComponent();
    this.Opacity = 0;
    TimerFadein.Enabled = true;
}

Well, other things (like closing the WinApp and the fade-out effect) are very similar to the above method. We only need to enable or disable the timers. See the source code for more details.

Good luck!

You must Sign In to use this message board.


Per page

A common mistake
Scott Bruno

7:16 2 Sep '08

Changing the opacity by a hardcoded amount per tick isn't the way to do this at all. How do you plan to control "Opacity += 0.5"? Changing code to play with the timer frequency or the hardcoded step?

What you want to do instead is to take a target opacity and a total desired fade time and do a simple linear interpolation. That is, regardless of the starting opacity, regardless of the target opacity, and regardless of the fade time you pass in, the opacity will smoothy adjust itself over the specified time because it calculates the change itself from tick to tick.

--
Saving the world, one line of code at a time