Click here to Skip to main content
15,867,308 members
Articles / Multimedia / GDI+
Article

Creating Glow Button

Rate me:
Please Sign up or sign in to vote.
4.86/5 (23 votes)
24 Apr 20073 min read 128.5K   5.8K   83   25
An article of how to make a button that can glow

Screenshot - Demo.jpg

Introduction

This is my very first article to any open source site. Since I've gotten a lot useful article from this site, I'll be glad if I can to contribute to this great site.

This article will explain how to make a button that has a glow feature.

Background (optional)

When I installed Windows Vista, I was amazed by it's appearance. It had a very nice user interface and so many eye candy controls. That make me think about making something just like that. I've created some fancy controls that look like Vista components since that day. Also, I've always thought about making an article or tutorial to share my knowledge. Finally, while creating this glow button control, I've decided to make an article for it too.

So why Glow Button? I've been interested in this control since I played with Vista Windows, especially with its Minimize, Maximize and Close Buttons. They have some fancy glow affects. And thanks to .NET Framework 2.0, it's easier to create them.

Using the code

Basically, to create the glow effect, you have to make a "Layer" that will create the glow with GDI+. Unfortunately, .NET Framework 2.0 doesn't allow a control that can make other controls mid-transparent. Or rather, when you place a control above another control, you can't see the control below, even you set full transparency at the upper control. The trick for this button is to request from another button that surrounds it to make a glow layer for that control.

Since we want to ask other glow controls to make glow effects, we need a layer status for the control:

VB
Public Enum LayerStatus
    None = 0
    Self = 1
    TopLeft = 2
    Top = 3
    TopRight = 4
    Left = 5
    Right = 6
    BottomLeft = 7
    Bottom = 8
    BottomRight = 9
End Enum

Now we have a status for the control to make layer as requested. If we must ask another surrounding button to make glow effect, how can we do that if the button is at the edge, side, top, bottom etc? For this problem, we need a special container for our control, so the control at edge or side can ask this container to make the glow effect. Let's name it "Grid".

Screenshot - Grid.jpg

Another feature that we will add is the ability to change themes dynamically. For this, we will use a colortable class called GlassColorTable and some defined colors for our control. Let's name it ColorSet. Also remember that a button has four default states, which is: Normal, Highlighted (Mouse Over), Pressed and Disabled. For the moment, I'm not including Disabled state, due to to the fact that I don't have enough time to experiment with it. I'll include it when I update my article.

VB
Public Interface IGlassColor
    Enum States
        Normal = 0
        Highlighted = 1
        Pressed = 2
        Disabled = 3
    End Enum

    Sub NormalState()
    Sub HighlightState()
    Sub PressedState()
    Sub DisabledState()
End Interface

Public Class ColorSet
    'Normal State
    Public BackgroundHigh As Color
    '.
    '.
    '.
    Public TextColor As Color

    'Highlight State
    Public BackgroundHighFocus As Color
    '.
    '.
    '.
    Public TextColorFocus As Color

    'Glow Set
    Public GlowCenter As Color
End Class

Public Class GlassColorTable
    Implements IGlassColor

    Protected _BackgroundHigh As Color
    Protected _BackgroundLow As Color
    Protected _ShineHigh As Color
    Protected _ShineLow As Color
    Protected _BorderLeft As Color
    Protected _BorderRight As Color
    Protected _BorderTop As Color
    Protected _BorderBottom As Color
    Protected _TextColor As Color
    Protected _GlowCenter As Color

    Private _State As IGlassColor.States
    Private _cSet As ColorSet

    Public Overridable ReadOnly Property BackgroundLow() As Color
        Get
            Return _BackgroundHigh
        End Get
    End Property
    
    '.
    '.
    '.
End Class

To change themes dynamically, we must create a property.

VB
<Browsable(False)> _
Public Property Renderer() As ColorSet
    Get
        Return _ColorTable.Renderer
    End Get
    Set(ByVal value As ColorSet)
        _ColorTable.Renderer = value
        _ColorTable.State = IGlassColor.States.Normal
        Me.Refresh()
    End Set
End Property

Since we now have the ability to change themes for the button, we must let the button know which color we want to be layered from another control.

Screenshot - Themed.jpg

VB
<Browsable(False)> _
Public Property LayerColor() As Color
    Get
        Return _ColorTable.GlowCenter
    End Get
    Set(ByVal value As Color)
        _LayerColor = value
    End Set
End Property

So, the most important part is done. It's time to use them for our application. Since we must ask help from another control to make the glow effect, we must set up in each control events which are "mouse enter" and "mouse leave" events.

VB
Private Sub GlowButton1_MouseEnter(ByVal sender As Object, 
    ByVal e As System.EventArgs) Handles GlowButton1.MouseEnter
    GlowButton2.Layer = GlowingButton.GlowButton.LayerStatus.Left
    GlowButton4.Layer = GlowingButton.GlowButton.LayerStatus.Top
    GlowButton5.Layer = GlowingButton.GlowButton.LayerStatus.TopLeft

    GlowButton2.LayerColor = GlowButton1.LayerColor
    GlowButton4.LayerColor = GlowButton1.LayerColor
    GlowButton5.LayerColor = GlowButton1.LayerColor

    Grid1.GlowColor = GlowButton1.LayerColor
    Grid1.GlowStartPoint = New Point(GlowButton1.Location.X - 7, 
        GlowButton1.Location.Y - 7)
    Grid1.GlowStyle = GlowingButton.Grid.GlowStyles.TopLeft
End Sub

Private Sub GlowButton1_MouseLeave(ByVal sender As Object, 
    ByVal e As System.EventArgs) Handles GlowButton1.MouseLeave
    GlowButton2.Layer = GlowingButton.GlowButton.LayerStatus.None
    GlowButton4.Layer = GlowingButton.GlowButton.LayerStatus.None
    GlowButton5.Layer = GlowingButton.GlowButton.LayerStatus.None

    Grid1.GlowStyle = GlowingButton.Grid.GlowStyles.None
End Sub

To change themes dynamically, use the Renderer property.

VB
For Each g As GlowingButton.GlowButton In Grid1.Controls
    g.Renderer = New GlowingButton.DiamondRed
Next

Points of Interest

Since we need to ask other controls to apply effects, we have to setup every control we have in the application. It will take time to setup everything, especially when we work with many buttons. To solve this problem, I suggest you make a class that inherits Grid control, place all glow buttons in the grid, and perform the required setup automatically with AddHandler methods. When I have more spare time, I'll explain in separate articles about this.

Additional notes about the demo: did some of you notice my other reason for creating this control? Yes, it's a Sudoku puzzle! My original motive with this control was for creating a Sudoku Puzzle Solver that can apply customized regions (that's why it needed themes or colorsets). The solver itself is still a long way to go because I've include it with many useful features.

That's all.

History

April 20th, 2007: Original Article.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Team Leader Component Crafts
Indonesia Indonesia
Got his BA in Information and Technology from University of Surabaya, Indonesia in 2004. Finished his post graduate at Magistrate and Management Institute of Technology, Surabaya in 2009.

He has developed several middle to large scale enterprise application, mostly on windows based architecture.

Currently working as IT Manager on a company based on Sidoarjo.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey24-Feb-12 3:14
professionalManoj Kumar Choubey24-Feb-12 3:14 
GeneralIssue on button focus allowing text to be changed Pin
Member 77736205-Jun-11 15:02
Member 77736205-Jun-11 15:02 
Hi,
I am currently using your Glow Buttons to improve the GUI of a calculator of mine. I notice though that while the button has focus, if you click escape the text of the button is erased. And also while you have focus, you can click any key and it will replace the text with the corresponding key.

In short, after clicking and bringing focus to the button, any key pressed will replace the text with the key text.

How can I fix this?

Thanks,

Jordan from Meta's Development - metasdevelopment.com
GeneralGLOWING BUTTON IS NOT DECLARED ! Pin
šprici21-Feb-10 2:51
šprici21-Feb-10 2:51 
GeneralRe: GLOWING BUTTON IS NOT DECLARED ! Pin
Michael Rawi4-May-11 4:41
Michael Rawi4-May-11 4:41 
GeneralHelp me Pin
Khanh D. Nguyen27-Aug-07 4:25
Khanh D. Nguyen27-Aug-07 4:25 
GeneralError Message Pin
Easy MAX25-Aug-07 3:51
Easy MAX25-Aug-07 3:51 
GeneralRe: Error Message Pin
Michael Rawi26-Aug-07 22:55
Michael Rawi26-Aug-07 22:55 
GeneralWont run for mee Pin
Easy MAX25-Aug-07 3:48
Easy MAX25-Aug-07 3:48 
GeneralWork´s Pin
Luzifer6664-May-07 4:07
Luzifer6664-May-07 4:07 
GeneralDon´t run too! Pin
Luzifer6663-May-07 23:03
Luzifer6663-May-07 23:03 
QuestionWouldn't run Pin
Dennis at ADS3-May-07 12:58
Dennis at ADS3-May-07 12:58 
AnswerRe: Wouldn't run Pin
Michael Rawi3-May-07 17:37
Michael Rawi3-May-07 17:37 
GeneralRe: Wouldn't run Pin
Dennis at ADS4-May-07 5:20
Dennis at ADS4-May-07 5:20 
AnswerRe: Wouldn't run Pin
Dennis at ADS4-May-07 5:35
Dennis at ADS4-May-07 5:35 
GeneralError while executing demo Pin
IreshPatel3-May-07 3:28
IreshPatel3-May-07 3:28 
GeneralRe: Error while executing demo Pin
Michael Rawi3-May-07 17:31
Michael Rawi3-May-07 17:31 
GeneralThat's awesome. Pin
--=A J E E S H=--2-May-07 17:23
--=A J E E S H=--2-May-07 17:23 
GeneralDemo program and Tab Pin
Nchantim1-May-07 2:53
Nchantim1-May-07 2:53 
GeneralRe: Demo program and Tab Pin
Michael Rawi1-May-07 15:51
Michael Rawi1-May-07 15:51 
GeneralRe: Demo program and Tab Pin
Nchantim1-May-07 19:20
Nchantim1-May-07 19:20 
GeneralRe: Demo program and Tab Pin
Michael Rawi1-May-07 19:38
Michael Rawi1-May-07 19:38 
GeneralGrateful for interesting code in VB Pin
Steve Erbach30-Apr-07 4:46
Steve Erbach30-Apr-07 4:46 
GeneralRe: Grateful for interesting code in VB Pin
Michael Rawi1-May-07 15:59
Michael Rawi1-May-07 15:59 
Generalthanks Pin
-tusk-25-Apr-07 15:53
-tusk-25-Apr-07 15:53 
GeneralRe: thanks Pin
Michael Rawi25-Apr-07 17:26
Michael Rawi25-Apr-07 17:26 

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

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