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

gGlowBox - Create a glow effect around a focused control (VB.NET)

, 16 May 2012
Rate this:
Please Sign up or sign in to vote.
A custom Panel that creates a glow effect around a child control when it receives focus.

Introduction

I really like the glow effect around a focused Textbox when inputting data on a form on a Chrome web page. It really makes it easier to track and enter data. I wanted to have this same effect on a Winform. I thought, here we go again with another big control project, but to my surprise I got the basic control working in no time with very little code.

Using the code

The gGlowBox Inherits a Panel, resizes to fit one child control (any control, not just a Textbox), and activates and deactivates the glow effect when the child control gets or loses focus.

There are only two new properties:

  • GlowColor As Color
  • Get or set the color of the glow

  • GlowOn As Boolean
  • Turn the glow effect on or off

Simple to use: Drop the gGlowBox on a Form, set the GlowColor, drop a control in the gGlowBox (the gGlowBox will resize automatically to fit the child control), and resize if needed.

In version 1.0.1, from Yogi Yang's suggestion, I added a new control that can handle a group of controls. I added the gGlowGroupBox rather than replace the original control to allow more flexibility. The main coding difference is the gGlowGroupBox has the re-sizing methods removed.

Points of interest

Design time view - gGlowBox

Design time view - gGlowGroupBox

OnPaintBackground

Using a technique explained in the gLabel[^] control, a blurred rectangle is drawn around the edge of the gGlowBox. Because the gGlowBox is slightly bigger than the child control, it creates a glowing effect around the child control.

Sizing the gGlowBox and the child control

To make sizing easier, the gGlowBox sizes itself automatically to the child control.

First if the child control is Added or Resized, the Layout event fires and resizes the gGlowBox to match up with the child control.

Private Sub gGlowBox_Layout(ByVal sender As Object, _
        ByVal e As LayoutEventArgs) Handles Me.Layout

    'Resize the gGlowBox to fit in the Child Control size
    If Controls.Count > 0 Then
        If e.AffectedControl Is Controls(0) Then
            Size = New Size(Controls(0).Width + 7, Controls(0).Height + 7)
            Controls(0).Location = New Point(4, 4)
        End If

    End If

End Sub

Second, when the gGlowBox is resized, the Resize event will size the child control to fit inside the gGlowBox. An anchored gGlowBox will not return to its original size when the Parent form is minimised unless this step is skipped, so a check is made to see what the Form’s WindoState is first.

Private Sub gGlowBox_Resize(ByVal sender As Object, 
       ByVal e As System.EventArgs) Handles Me.Resize

    'This is needed to avoid resizing an Anchored gGlowBox 
    ' when the parent Form is Minimized 
    If IsNothing(FindForm) OrElse 
       FindForm.WindowState = FormWindowState.Minimized Then Exit Sub

    'Resize the Child Control to fit the size of the gGlowBox
    If Controls.Count > 0 Then
        Controls(0).Size = New Size(Width - 7, Height - 7)
    End If

End Sub
Control focus event wire-up

The child control’s GotFocus and LostFocus events are added to the gGlowBox in the ControlAdded event and point to the ChildGotFocus and ChildLostFocus methods. These methods simply turn the glow on and off.

Private Sub gGlowBox_ControlAdded(ByVal sender As Object,_
       ByVal e As ControlEventArgs) Handles Me.ControlAdded
   ' Add handlers to let the gGlowBox know
   ' when the child control gets Focus
   AddHandler e.Control.GotFocus, AddressOf ChildGotFocus
   AddHandler e.Control.LostFocus, AddressOf ChildLostFocus
End Sub

As an extra note, I did not want the glow to turn on if the Textbox was set to ReadOnly. Simple if the child control was always going to be a Textbox, but the gGlowBox was designed to house any basic control. Some controls like the Combobox do not have this property. To deal with this, I used the GetProperty function to check if the unknown control has that property and if it does, use the CallByName method to get the value.

Private Sub ChildGotFocus()

    If Controls.Count > 0 Then
        'Check if the control has the ReadOnly 
        'property and if so, its value.
        If Not IsNothing(Controls(0).GetType().GetProperty("ReadOnly")) Then
            GlowOn = Not CallByName(Controls(0), "ReadOnly", CallType.Get)
        Else
            GlowOn = True
        End If

    End If
End Sub

Private Sub ChildLostFocus()
    GlowOn = False
End Sub

History

  • Version 1.0.0
  • Version 1.0.1
    • Added gGlowGroupBox from Yogi Yang's suggestion.

License

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

About the Author

SSDiver2112
Software Developer
United States United States
I first got hooked on programing with the TI994A. After it finally lost all support I reluctantly moved to the Apple IIe. Thank You BeagleBros for getting me through. I wrote programs for my Scuba buisness during this time. Currently I am a Database manager and software developer. I started with VBA and VB6 and now having fun with VB.NET

Comments and Discussions

 
GeneralRe: My vote of 5 PinmemberSSDiver211216-May-12 3:38 
QuestionDoesnt Work.. Pinmemberfuujinn15-May-12 21:45 
AnswerRe: Doesnt Work.. PinmemberSSDiver211216-May-12 3:18 
AnswerRe: Doesnt Work.. PinmemberSSDiver211216-May-12 3:38 
GeneralMy vote of 5 PinmemberCarstenV213-May-12 20:12 
GeneralMy vote of 5 PinmemberMonjurul Habib10-May-12 19:26 
GeneralMy vote of 3 PinmemberClark Kent1238-May-12 2:05 
GeneralRe: My vote of 3 PinmemberSSDiver21128-May-12 9:07 
GeneralRe: My vote of 3 PinmemberClark Kent1238-May-12 9:17 
Questionvery cool PinmemberCIDev7-May-12 11:01 
GeneralMy vote of 5 PinmemberGregory.Gadow7-May-12 10:48 
QuestionFive stars, of course. Pinmemberxry200630-Apr-12 3:23 
GeneralMy vote of 5 PinmemberJαved29-Apr-12 23:15 
GeneralAnother tool for the toolbox Pinmemberrspercy6526-Apr-12 0:16 
GeneralMy vote of 5 PinmemberYogi Yang25-Apr-12 17:57 
QuestionReally very Cool PinmemberYogi Yang25-Apr-12 17:55 
AnswerRe: Really very Cool PinmemberSSDiver211225-Apr-12 18:29 
GeneralRe: Really very Cool PinmemberZac Greve26-Apr-12 2:22 
GeneralRe: Really very Cool PinmemberSSDiver211226-Apr-12 8:09 
GeneralRe: Really very Cool PinmemberZac Greve28-Apr-12 6:11 
GeneralCool PinmemberZac Greve25-Apr-12 10:01 
GeneralRe: Cool PinmemberSSDiver211225-Apr-12 10:15 

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 | Mobile
Web04 | 2.8.140721.1 | Last Updated 16 May 2012
Article Copyright 2012 by SSDiver2112
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid