Button images, transparency, MouseOver colors

Question

I have a button that I have made Flat, with no border so when there is an image in it, it is seamless looking.

The image I want to add to this button is basically just an unfilled rectangle (png from a file).

When I mouse over this button, I have the backcolor change to red. When it does, the rectangle that is the image obviously does not change to red..it stays whatever color it is from the image.

I wanted to know if there is a way to add an image, who's actual backcolor is transparent (I suppose?).

The image is a blue rectangle with a very very light brown background. When I mouse over I would like the ENTIRE button's backcolor to be red, but only maintain the blue rectangle. Right now when you mouseover you can clearly see the size of the image itself.

I'd rather not draw graphics to the button. (In actuality this image is an outline of a computer monitor...but it's essentially a rectangle for this case)

Is there a way to do this with the Image or BackgroundImage properties?

Solution

Put Your image in Resources (Project/Properties/Resources/Images/Add Resource and from dropdown menu choose Add Existing File...).

Then use this code :

    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
      With Button1
        .Text = ""
        .UseVisualStyleBackColor = False
        .BackColor = Color.Transparent
        .FlatStyle = FlatStyle.Flat
        .FlatAppearance.BorderSize = 0
        .FlatAppearance.MouseOverBackColor = Color.Red
        .BackgroundImageLayout = ImageLayout.Center
        .BackgroundImage = My.Resources.XXX 'image name from Resources
      End With
    End Sub

    Private Sub Button1_MouseHover(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.MouseHover
            With Button1
                .BackgroundImage = Nothing
                .FlatAppearance.BorderColor = Color.Blue
                .FlatAppearance.BorderSize = 2  'or what is size of Your border in px (take from Your image)
            End With
    End Sub

    Private Sub Button1_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.MouseLeave
            With Button1
                .BackColor = Color.Transparent
                .BackgroundImage = My.Resources.XXX 'image name from Resources
                .FlatAppearance.BorderSize = 0
            End With
    End Sub

Of course, You can create Your own button (class) and import into Your project, where You can avoid this MouseHover and MouseLeave for every button.

btw. All this You can do without image if Your picture have only border and background of image isn't gradient. Then You can avoid MouseHover and MouseLeave.

Edit : There is code if You don't need image (border of button is always blue of 2px, background color is some kind of light brown, and on hover background color is red but border stay blue with 2px).

With Button2
  .UseVisualStyleBackColor = False
  .BackColor = Color.FromArgb(217, 195, 154)
  .FlatStyle = FlatStyle.Flat
  .FlatAppearance.BorderSize = 2
  .FlatAppearance.BorderColor = Color.Blue
  .FlatAppearance.MouseOverBackColor = Color.Red
 End With