locked
Glow effect to mouse over RRS feed

  • Question

  • Hey everyone.  I am not an advanced VB programmer as I create applications for fun at home, so am hoping someone can help me with this.  I would like to add a mouse over glow type effect to a control (doing this on a picturebox at the moment).  I did this very simplistically by creating a user control and having a picturebox within a picturebox, one of which is not visible.  On the mouse over, I just make it visible and it does look cool as it has rounded edges and all that.  But I assume this is not a good technique and really limits you.  I would like to do it so I can define the color, glow size, etc... kind of like the glow effect in Flex.  I am guessing I need to create a brush and draw it myself, but I really have no experience with that.  Can anyone give me a hand?

    Thank you in advance!
    Tuesday, December 22, 2009 7:58 PM

Answers

  • I do this all the time in my Forms apps - though I don't paint my own "glow".  It can as simple as importing two images into your project resources.  I always use an image editor to create two images - one regular and one with a circular gradient that fades to the edges (the latter I denote with the "_lit" suffix).  I save these images as PNG format when I need transparency. 

    Then set the following properties for the button through the property grid in the designer:

    FlatStyle = Flat
    FlatAppearance.BorderColor = the button's back color (same as form's is best to create a borderless effect)
    FlatAppearance.BorderSize = 0
    FlatAppearance.MouseDownBackColor = the button's back color
    FlatAppearance.MouseDownOverkColor = the button's back color
    BackgroundImageLayout = Zoom (this will resize to the button's size)
    BackgroundImage = whatever image you want to start with, though you do not have to pick one now)
    Text = <empty string>

    Now add the following code to your project -- note that this method can handle multiple buttons by using a conditional block that you just add to for each of the buttons that you want to handle.
     
        Private Sub btnOK_MouseEnter(ByVal sender As Object, ByVal e As System.EventArgs) _
        Handles btnOK.MouseEnter, btnCancel.MouseEnter
            If sender Is btnOK Then
                btnOK.BackgroundImage = My.Resources.OK_Lit
            ElseIf sender Is btnCancel Then
                btnCancel.BackgroundImage = My.Resources.Cancel_Lit
            End If
        End Sub
    
        Private Sub btnOK_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) _
        Handles btnOK.MouseLeave, btnCancel.MouseLeave
            If sender Is btnOK Then
                btnOK.BackgroundImage = My.Resources.OK
            ElseIf sender Is btnCancel Then
                btnCancel.BackgroundImage = My.Resources.Cancel
            End If
        End Sub
     

    The other way would be to override the paint event for the button and draw a gradient halo over the existing image of the button.  You would need to manually track when the mouse enters and when it leaves through a flag variable because you'll want to invalidate the painting between the MouseEnter and MouseLeave events.  I don't do it this way so someone will have to provide code if you are interested.
     
     
     
    • Marked as answer by Chao Kuo Wednesday, December 30, 2009 5:26 AM
    Wednesday, December 23, 2009 1:55 AM

All replies

  • Do you mean you want help to draw a button or create the button effect?

    If you want a WPF example of effects try this video over at WindowsClient.Net: http://windowsclient.net/learn/video.aspx?v=124419
    Tuesday, December 22, 2009 8:33 PM
  • Thanks for the reply.  Was looking for help with creating the effect on a control (button, picturebox, etc...) already created.  I had read about BitmapEffects with WPF.  The project I am toying with was started as a windows form application and not WPF application.  I guess it would be simpler for me to do this as a WPF application.  I will play with that route, but any ideas on how I could do this under a windows form application would be appreciated as well. 

    Thanks again
    Tuesday, December 22, 2009 9:25 PM
  • I do this all the time in my Forms apps - though I don't paint my own "glow".  It can as simple as importing two images into your project resources.  I always use an image editor to create two images - one regular and one with a circular gradient that fades to the edges (the latter I denote with the "_lit" suffix).  I save these images as PNG format when I need transparency. 

    Then set the following properties for the button through the property grid in the designer:

    FlatStyle = Flat
    FlatAppearance.BorderColor = the button's back color (same as form's is best to create a borderless effect)
    FlatAppearance.BorderSize = 0
    FlatAppearance.MouseDownBackColor = the button's back color
    FlatAppearance.MouseDownOverkColor = the button's back color
    BackgroundImageLayout = Zoom (this will resize to the button's size)
    BackgroundImage = whatever image you want to start with, though you do not have to pick one now)
    Text = <empty string>

    Now add the following code to your project -- note that this method can handle multiple buttons by using a conditional block that you just add to for each of the buttons that you want to handle.
     
        Private Sub btnOK_MouseEnter(ByVal sender As Object, ByVal e As System.EventArgs) _
        Handles btnOK.MouseEnter, btnCancel.MouseEnter
            If sender Is btnOK Then
                btnOK.BackgroundImage = My.Resources.OK_Lit
            ElseIf sender Is btnCancel Then
                btnCancel.BackgroundImage = My.Resources.Cancel_Lit
            End If
        End Sub
    
        Private Sub btnOK_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) _
        Handles btnOK.MouseLeave, btnCancel.MouseLeave
            If sender Is btnOK Then
                btnOK.BackgroundImage = My.Resources.OK
            ElseIf sender Is btnCancel Then
                btnCancel.BackgroundImage = My.Resources.Cancel
            End If
        End Sub
     

    The other way would be to override the paint event for the button and draw a gradient halo over the existing image of the button.  You would need to manually track when the mouse enters and when it leaves through a flag variable because you'll want to invalidate the painting between the MouseEnter and MouseLeave events.  I don't do it this way so someone will have to provide code if you are interested.
     
     
     
    • Marked as answer by Chao Kuo Wednesday, December 30, 2009 5:26 AM
    Wednesday, December 23, 2009 1:55 AM