How to create a fading form.






4.33/5 (24 votes)
May 13, 2003
3 min read

164558

1249
This article will walk you through the steps required to create a form that fades in upon activation and fades out upon deactivation.
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
: 1Enabled
: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
: TypeEnum
. An enumeration that provides the valuesFADEIN
andFADEOUT
used in theStatus
variable.Status
: TypeFadeFlag
. Used to store the status of the desired transition effect.intTransitionStep
: TypeInteger
. The amount to increment or decrement theOpacity
.bFadeEnabled
: TypeBoolean
. Variable used to enable or disable the fade effect.
Public Class FaderForm
Inherits System.Windows.Forms.Form
'Enumeration for the current status of the window.
Private Enum FadeFlag
FADEIN
FADEOUT
End Enum
'Var to keep track of which transition is
'going to take place (fade in or out)
Private Status As New FadeFlag()
'Var to hold the increment amount when
'increasing/decreasing the Opacity
Private intTransitionStep As New Integer()
'Var used to enable or disable the fade in/out effect
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 theOpacity
byintTransitionStep
.ffTransitionStep
: The amount that theOpacity
is incremented or decremented.ffFadeEnabled
: The variable used to enable or disable the fading effect.
The property ffTransitionTime
is defined as:
'TransitionTime: The amount of time (in milliseconds) that elapses before
'increasing or decreasing the Opacity by intTransitionStep.
Public Property ffTransitionTime() As Integer
Get
Return FadeTimer.Interval
End Get
Set(ByVal Value As Integer)
'If the value is between 1 ms and 1000ms it's valid
'If not, set the intTransitionTime to 1 (default value)
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:
'TransitionStep: The value used to increment the Opacity.
Public Property ffTransitionStep() As Integer
Get
Return intTransitionStep
End Get
Set(ByVal Value As Integer)
'If the incremented value is between 1 and 50 it's valid
'If not, set it to the default value of 2
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
'Since the fade in/out effect is being turned off, set
'the opacity to 100%, disable the timer, and even though
'it's not necessary set the Status to FADEIN.
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 theDeactivate
event of the form.FadeIn
: Handles theActivated
event of the form.FadeTimer_Tick
: Handles theTick
event ofFadeTimer
.
The event handler for FadeOut
:
'FadeOut: Fired when the form loses focus through code or by the user.
'If the bFadeIn_Out value is set to true then
'this routine will set the Status
'flag to FADEOUT, the timer will gradually decrease the opacity of the form.
Private Sub FadeOut(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Deactivate
'First check the status of the FadeIn_Out property.
If bFadeEnabled = True Then
'Set the status to FadeOut
Status = FadeFlag.FADEOUT
'Turn the timer ON
FadeTimer.Enabled = True
End If
End Sub
The event handler for FadeIn
:
'FadeIn:Fired when the form is activated through code or by the user.
' If the bFadeIn_Out value is set to true then this
'routine will set the Status
' flag to FADEIN, the timer will gradually increase the opacity of the form.
Private Sub FadeIn(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Activated
'First check the status of the FadeIn_Out property.
If bFadeEnabled = True Then
'Set the status fo FadeIn
Status = FadeFlag.FADEIN
'Turn the timer On
FadeTimer.Enabled = True
End If
End Sub
The event handler for FadeTimer_Tick
:
'FadeTimer_Tick: When the timer is enabled,
'it will check the value held in the
' Status variable. If the value is FADEIN the form's opacity is
' gradually increased or decreased by the value held in intTransitionStep
' every ffTransitionTime milliseconds.
Private Sub FadeTimer_Tick(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles FadeTimer.Tick
'Check the value of Status
If Status = FadeFlag.FADEIN Then
'We know the status is set to "fade in". Increase the Opacity
'Check the level of opacity
If Me.Opacity >= 1 Then
'Shut the timer off. Our work is done here.
FadeTimer.Enabled = False
Else
'Increase the opacity by 1%
Me.Opacity = Me.Opacity + intTransitionStep / 100.0
End If
Else
'We know the status is set to "fade out". Decrease the Opacity
'Check the level of opacity
If Me.Opacity <= 0.5 Then
'Shut off the timer. Our work is done here
FadeTimer.Enabled = False
Else
'Decrease the opacity
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()
'This call is required by the Windows Form Designer.
InitializeComponent()
'Add any initialization after the InitializeComponent() call
'Set the status of the form when it is created.
'Set the default values for the FaderForm.
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.