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

Creating Glow Button

, 24 Apr 2007
Rate this:
Please Sign up or sign in to vote.
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:

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.

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.

<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

<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.

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.

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

About the Author

michaelrawi
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 Pinmembermanoj kumar choubey24-Feb-12 3:14 
GeneralIssue on button focus allowing text to be changed PinmemberMember 77736205-Jun-11 15:02 
GeneralGLOWING BUTTON IS NOT DECLARED ! Pinmemberšprici21-Feb-10 2:51 
GeneralRe: GLOWING BUTTON IS NOT DECLARED ! PinmemberMichael Rawi4-May-11 4:41 
GeneralHelp me PinmemberKhanh200727-Aug-07 4:25 
GeneralError Message PinmemberEasy MAX25-Aug-07 3:51 
GeneralRe: Error Message PinmemberMichael Rawi26-Aug-07 22:55 
GeneralWont run for mee PinmemberEasy MAX25-Aug-07 3:48 
GeneralWork´s PinmemberLuzifer6664-May-07 4:07 
GeneralDon´t run too! PinmemberLuzifer6663-May-07 23:03 
QuestionWouldn't run PinmemberDennis at ADS3-May-07 12:58 
AnswerRe: Wouldn't run PinmemberMichael Rawi3-May-07 17:37 
GeneralRe: Wouldn't run PinmemberDennis at ADS4-May-07 5:20 
AnswerRe: Wouldn't run PinmemberDennis at ADS4-May-07 5:35 
GeneralError while executing demo PinmemberIreshPatel3-May-07 3:28 
GeneralRe: Error while executing demo PinmemberMichael Rawi3-May-07 17:31 
GeneralThat's awesome. Pinmember--=A J E E S H=--2-May-07 17:23 
GeneralDemo program and Tab PinmemberNchantim1-May-07 2:53 
GeneralRe: Demo program and Tab PinmemberMichael Rawi1-May-07 15:51 
GeneralRe: Demo program and Tab PinmemberNchantim1-May-07 19:20 
GeneralRe: Demo program and Tab PinmemberMichael Rawi1-May-07 19:38 
GeneralGrateful for interesting code in VB Pinmemberserbach30-Apr-07 4:46 
GeneralRe: Grateful for interesting code in VB PinmemberMichael Rawi1-May-07 15:59 
Generalthanks Pinmember-tusk-25-Apr-07 15:53 
GeneralRe: thanks PinmemberMichael Rawi25-Apr-07 17:26 

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 24 Apr 2007
Article Copyright 2007 by michaelrawi
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid