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

• Download source code - 28.7 KB
• Download demo (exe, dll)

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.