Adding Lightbox Effect to Winform Applications

• Download source - 77.67 KB

Introduction

This article is about how to add a simple "Lightbox Effect" with few lines of code.

Definition

"<a href="http://www.lokeshdhakar.com/projects/lightbox2/" target="_blank">Lightbox</a>" can be defined as an overlay with a transparent background. It just opens the form as a modal dialog. Here the user can open a new form rather than closing the previous form. The use of the dark background which makes the form dim on which the other form is overlaid on it. With this Lightbox effect, one can smoothly animate their winform applications and give them a customized look and feel. It is fully customizable, more convenient and 100% compatible.

Background

As we have seen how to add a Light box effect in webpages earlier, using JavaScript and other third party .dll or CSS files, here we are going to see how to add that to our winforms application in a simpler way without using any third party tools or by using JavaScript. And we see the power of GDI here. Now let us see how to get that effect on our Winforms application.

Using the Code

I would like to briefly describe in a step wise manner so that it will be easy to understand.

Step 1: Create a new project and give any name to your project.

Step 2: Create two forms namely Form1 and Form2.

Step 3: As shown in the below Image, you need to set the properties for the Form2. You'll need to set the size based on the size of the Form1 (i.e., First you need to check the size of the Form1 and then set the same size to the Form2).

Step 4: Now go to Form2 and Change its border style to "None" as shown below.

Now you get the resultant Form2 as shown below:

Step 5: Now just copy and paste the below code:

Protected Overrides Sub OnPaintBackground(ByVal e As PaintEventArgs)
       Using brush As Brush = New SolidBrush(Color.FromArgb(65, Color.Black))
           e.Graphics.FillRectangle(brush, e.ClipRectangle)
       End Using
End Sub

In the above code, we are just painting the form using brush with color "black" and set its opacity to "65".

The OnPaint background method paints the background of the control which is on the Form2.

Step 6: Now just design your Form1 as however you like as for sample. I have designed my form for my convenience as shown below:

Step 7: Next, you need to go to Form1 and add the code below:

Private Sub Button1_Click(ByVal sender As System.Object, _
  ByVal e As System.EventArgs) Handles Button1.Click
      Dim Lightbox As New Form2()
      Lightbox.SetBounds(Me.Left + 8, Me.Top + 30, _
      Me.ClientRectangle.Width, Me.ClientRectangle.Height)
      Lightbox.Owner = Me
      Lightbox.ShowDialog()
  End Sub

In the above code, I have just declared to show my second Form, i.e., "Form2".

"Setbounds" is nothing but it takes into the consideration only the part below the "Toolstrip" to the part above the "StatusStrip". So you can adjust as per your requirements.

Step 8: After doing this, "Hit F5" and press "Button1" to see the output result and you can find the result as shown below.

As some of them asked me to add animation effects, I have added which you can see in the below screenshot as it resembles the original Lightbox effect which you can feel while validating records.

And similar to these, I have added two more Forms to give the same effect with different colours and transparency as you can see below:

History

• Version 1.0
• Version 1.1 (Made customized look and feel, added animation and transparency)