Fading Forms in VB.NET

[Xav]

Hey there, it's me, Xav! I thought this would be interesting to show, as it looks really cool as long as you have a relatively fast machine. Opacity can be CPU-draining at times, but hopefully all modern computers should cope fine.

So, let's begin! Start a new .NET project called Fading Form or something. We only need a single form, and the default size should be fine. However, change the form's Text property to something like The Magical Disappearing Form, using the Properties window.

Now, add a button to the form. Set the following properties, again using the Properties window (you may need to open it from the View menu):

• Name - cmdFadeForm
• Location - 105, 113
• Size - 75, 23
• Text - Fade Form

This should put the button in the centre of the form (assuming you kept the default square size), and change the text as necessary to suit you.

Now, double click on the button in the designer. This should create a new event handler for the button. The default event for a System.Windows.Forms.Button is the Click event - this is what we want in this case. Note that buttons can handle many other types of events, such as moving the mouse over it and so on.

Place the cursor after the 'Private Sub cmdFadeForm ' bit, and before the 'End Sub'. Everything we type here will run when the button is clicked.

Now, we need the code to fade the form. Forms have an Opacity value - it is of type Single, and must be set to a value between 0 and 1. In the designer the IDE allows you to enter percentages, but in code it must be between 0 and 1 - where 1 is opaque, 0 is transparent and 0.5 is somewhere inbetween (OK, translucent).

So, to fade our form, we need to set the Opacity to all the values between 0 and 1. Obviously, we need to use a loop - otherwise, things are extremely impractical and difficult to write and maintain.

By default, forms are set to 100%, or 1, or opaque. Therefore, we need to start our loop at 1 and work our way down to 0. The thing we need to decide on is how gradual to fade it. I have used 0.05 here, so it fades down in 20 steps (because 1 / 0.05 = 20). If you want it to be more gradual, then choose a lower number. If you want it to be more 'jaggy', then use a higher number. We can alter the speed of the fade in a different place, so do not change this value based on this.

As I mentioned afore, the Opacity property is of type Single, so we need a suitable variable to decrement in the loop:

[HIGHLIGHT=vb]
Dim sngOpac As Single
[/HIGHLIGHT]

This variable will be lowered within the loop, which we will now declare:

[HIGHLIGHT=vb]
For sngOpac = 1 To 0 Step -0.05
[/HIGHLIGHT]

We use Step to specify how much to increment/decrement by. Using a negative number makes the variable lower, which is what we want.

Now we have to make the form more transparent than before, depending on the value of sngOpac:

[HIGHLIGHT=vb]
Me.Opacity = sngOpac
[/HIGHLIGHT]

Note that Me is the VB way of referencing the current form. If you are doing this in C#, replace 'Me' with 'this'.

You may be wondering why we are using a Single instead of an Integer. The answer is simple - integers don't support decimals!

If we just do this, it will be so quick that Windows might not even be fast enough to paint the form every time, so we won't see the fade. Therefore, we need to include this:

[HIGHLIGHT=vb]
'Allow the form to repaint itself.
Me.Refresh()
[/HIGHLIGHT]

One last thing to do. The fade will still be pretty quick now, so we want to slow it down a bit. The best way to do this is to create a delay between each loop iteration. There are two ways to do this:

@ Use another for loop inside, with a large iteration count.
@ Pause the thread.

The disadvantage of the first one is that different computers will slow it down by different amounts. Therefore, we use the second option. Luckily, .NET makes it easy for us as usual:

[HIGHLIGHT=vb]
System.Threading.Thread.Sleep(200)
[/HIGHLIGHT]

This nifty little function tells the program to pause for a certain number of milliseconds, which is specified in a parameter. Again, you can change the value to suit you.

Now, we want to bring code execution back up to the top of the loop, where sngOpac will be decremented and the form transparentised (new word?) a little bit more - 5% more, to be accurate:

[HIGHLIGHT=vb]
Next sngOpac
[/HIGHLIGHT]

One last thing. After the loop has finished, the value of Me.Opacity will finish at 0. In other words, the form will be invisible at the end of the fade. This is what we wanted, but we still want to show the form again at the end:

[HIGHLIGHT=vb]
Me.Opacity = 1
[/HIGHLIGHT]

This should make the form 100% opaque again, ready for the user to click the button again and start the fade again!

Save the project and press F5 to run. Try it and see!

Test yourself: Write a similar program that starts transparent and fades in when you load it. Make it fade out again when you exit. Hint: Use the form's Shown and FormClosing events.

[Xav]

Bah...

[Jordan]

Another nice tutorial! +rep.

[Xav]

How comes your Rep Power ıs only 20 now, not 50?

[Jordan]

I changed all admins to only have +20. Now I can +rep someone without giving them 1/4th of the requirement for GuRu.

[Xav]

I see. Yeah, that was stupıd - but now ıt means ıt's gonna be so hard to get to Code Slınger.

[Jordan]

You will just need to impress me more often! Plus, you gotta wait for your mug anyway.

[Xav]

That's OK. I don't drınk tea anyway.

[Jordan]

They are for coffee and you are British. How can you not drink tea?

[Xav]

Um, ıt doesn't taste nıce.