Click here to Skip to main content
Click here to Skip to main content

Adding Lightbox Effect to Winform Applications

, 18 Aug 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Adding Lightbox effect to Winform Applications

Introduction

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

Definition

"Lightbox" 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)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Kiran Volety
Student
India India
Basically I am techy guy and presently doing Masters in Applied computer science and engineering at VUB University(Brussels)

Comments and Discussions

 
QuestionNot able to run Pinmemberpaparao30-Jul-12 2:40 
AnswerRe: Not able to run PinmemberKiran Volety24-Sep-12 8:41 
GeneralMy vote of 3 Pinmemberstingrayweb9-May-12 0:50 
QuestionVery good post PinmemberHamlet Escaño15-Aug-11 11:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 19 Aug 2011
Article Copyright 2011 by Kiran Volety
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid