Introduction
This article will show you how to create a form that will fade out when deactivated and fade in when activated.
Background
I was looking for a way to make the active form in an application stick out from the other non-active forms in a visually appealing way. I really liked the fade in/out effect used with the Start Menu of XP and 2000, but I was unable to find any help on forms that had that effect. So, I set out to create a form that would have the fade effect and allow for the user to easily distinguish the active form from the others. The result is the FaderForm and it provides a nice visual effect and makes the active form readily identifiable to the user.
Using the code
Basically, we are just going to start with a basic Windows Form, add a timer to increment/decrement the percent of Opacity, handle two Form events (Activated & Deactivate) and add some initialization code to the constructor of the FaderForm class.
First, start off with a plain form. Set the following properties to these values:
Text: FaderForm
Name: FaderForm
Second, add a Timer control to the form and set the following properties to these values:
Name: FadeTimer
Interval: 1
Enabled: False
You now have all of the components required. Now, in order to have the form fade in and out we have to handle two events, Activated and Deactivate. The actual incrementing/decrementing of the Opacity of the form is done in the FadeTimer_Tick event handler of the FadeTimer component. The Activated and Deactivated event handlers will set the Status flag and enable the FaderTimer. When the Status flag is set to FADEIN, the FadeTimer_Tick event handler will increase the Opacity, when Status is set to FADEOUT, the FadeTimer_Tick event handler will decrease the Opacity. The FadeTimer_Tick event handler increments the Opacity to 100% or decrements to 50% (depending upon the Status flag) then shuts itself off. One tick is handled every ffTransitionTime milliseconds. Let's start with the class members first.
First, we will need to create four private class members at the beginning of the FaderForm class. The members are as follows:
FadeFlag: Type Enum. An enumeration that provides the values FADEIN and FADEOUT used in the Status variable.
Status: Type FadeFlag. Used to store the status of the desired transition effect.
intTransitionStep: Type Integer. The amount to increment or decrement the Opacity.
bFadeEnabled: Type Boolean. Variable used to enable or disable the fade effect.
Public Class FaderForm
Inherits System.Windows.Forms.Form
Private Enum FadeFlag
FADEIN
FADEOUT
End Enum
Private Status As New FadeFlag()
Private intTransitionStep As New Integer()
Private bFadeEnabled As New Boolean()
Next, add three public properties (to keep the properties grouped together in the Properties List, they all have the prefix ff for faderform). The range checking can be changed to suit your needs.
ffTransitionTime: Amount of time in milliseconds that elapses before incrementing or decrementing the Opacity by intTransitionStep.
ffTransitionStep: The amount that the Opacity is incremented or decremented.
ffFadeEnabled: The variable used to enable or disable the fading effect.
The property ffTransitionTime is defined as:
Public Property ffTransitionTime() As Integer
Get
Return FadeTimer.Interval
End Get
Set(ByVal Value As Integer)
If Value <= 0 Or Value > 1000 Then
FadeTimer.Interval = 1
Else
FadeTimer.Interval = Value
End If
End Set
End Property
The property ffTransitionStep is defined as:
Public Property ffTransitionStep() As Integer
Get
Return intTransitionStep
End Get
Set(ByVal Value As Integer)
If Value < 1 Or Value > 50 Then
intTransitionStep = 5
Else
intTransitionStep = Value
End If
End Set
End Property
The property ffFadeEnabled is defined as:
Public Property ffFadeEnabled() As Boolean
Get
Return bFadeEnabled
End Get
Set(ByVal Value As Boolean)
bFadeEnabled = Value
If Value = False Then
Me.Opacity = 1.0
FadeTimer.Enabled = False
Status = FadeFlag.FADEIN
End If
End Set
End Property
Finally, write the event handlers for the following:
FadeOut : Handles the Deactivate event of the form.
FadeIn: Handles the Activated event of the form.
FadeTimer_Tick: Handles the Tick event of FadeTimer.
The event handler for FadeOut:
Private Sub FadeOut(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Deactivate
If bFadeEnabled = True Then
Status = FadeFlag.FADEOUT
FadeTimer.Enabled = True
End If
End Sub
The event handler for FadeIn:
Private Sub FadeIn(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Activated
If bFadeEnabled = True Then
Status = FadeFlag.FADEIN
FadeTimer.Enabled = True
End If
End Sub
The event handler for FadeTimer_Tick:
Private Sub FadeTimer_Tick(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles FadeTimer.Tick
If Status = FadeFlag.FADEIN Then
If Me.Opacity >= 1 Then
FadeTimer.Enabled = False
Else
Me.Opacity = Me.Opacity + intTransitionStep / 100.0
End If
Else
If Me.Opacity <= 0.5 Then
FadeTimer.Enabled = False
Else
Me.Opacity = Me.Opacity - intTransitionStep / 100.0
End If
End If
End Sub
Finally, we need to add some initialization code in the constructor of the FaderForm class.
Public Sub New()
MyBase.New()
InitializeComponent()
Status = FadeFlag.FADEIN
FadeTimer.Enabled = False
intTransitionStep = 5
bFadeEnabled = True
End Sub
Your FaderForm is now ready to go. In the example I provided the FaderForm is built into a class library within the folder MMM,
the project that implements it is contained within the folder AnotherTest. Simply click on the AnotherTest.sln file, build the example application and have fun! Suggestions and comments are always appreciated, thanks for reading my article!
History
- May 12, 2003 - Uploaded original article and code.
