Share via

Transparent Button on a picturebox

  • Article

Question

Thursday, March 13, 2014 7:35 AM

Dear all, 

i have a program actually use webcam to capture the picture and a picturebox was created to serve as a realtime screen. I have put a button overlap the picturebox. My question now is how do i make the picture box transparent so that i only see the green colour button background image instead the following screenshot

All replies (2)

Thursday, March 13, 2014 8:28 AM ✅Answered | 1 vote

Dear all, 

i have a program actually use webcam to capture the picture and a picturebox was created to serve as a realtime screen. I have put a button overlap the picturebox. My question now is how do i make the picture box transparent so that i only see the green colour button background image instead the following screenshot

I don't really understand how making the PictureBox transparent would do anything. From the image I'm guessing that you don't want the gray areas of the Button to be visible.

Maybe this will work. Although the antialias is pretty much non-existant. And you may need to mess around with the numbers in this line

"BTN1.AddEllipse(3, 3, Button1.Width - 20, Button1.Height - 20)"

to something like this

"BTN1.AddEllipse(5, 5, Button1.Width - 22, Button1.Height - 22)"

to get it to look right.

Option Strict On

Imports System.Drawing.Drawing2D

Public Class Form1

    Dim WithEvents Button1 As New Button

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Me.CenterToScreen()
        PictureBox1.BackgroundImageLayout = ImageLayout.Stretch
        PictureBox1.BackgroundImage = Image.FromFile("C:\Users\John\Desktop\Picture Files\Crossbones BMP.Bmp")
        Dim Bmp As New Bitmap(Image.FromFile("C:\Users\John\Desktop\ButtonImage.Png"))
        Button1.Name = "Button1"
        Button1.Size = New Size(Bmp.Width + 20, Bmp.Height + 20)
        Bmp.Dispose()
        Button1.BackgroundImage = Image.FromFile("C:\Users\John\Desktop\ButtonImage.Png")
        Button1.BackgroundImageLayout = ImageLayout.None

        Me.Controls.Add(Button1)

        Dim BTN1 As New GraphicsPath
        BTN1.AddEllipse(3, 3, Button1.Width - 20, Button1.Height - 20)

        Button1.Region = New Region(BTN1)
        Button1.Location = New Point(CInt(PictureBox1.Width / 2), CInt(PictureBox1.Height / 2))
        Button1.BringToFront()
    End Sub

    Private Sub Button1Click(sender As Object, e As EventArgs) Handles Button1.Click
        MessageBox.Show("Hello")
    End Sub

End Class

Please BEWARE that I have NO EXPERIENCE and NO EXPERTISE and probably onset of DEMENTIA which may affect my answers! Also, I've been told by an expert, that when you post an image it clutters up the thread and mysteriously, over time, the link to the image will somehow become "unstable" or something to that effect. :) I can only surmise that is due to Global Warming of the threads.

Thursday, March 13, 2014 9:13 AM ✅Answered | 1 vote

This works too to make the Button transparent. The only time the border shows is when it is clicked. Although I had to make the non-green colors of the image transparent so the background image for the button has no gray color just transparent pixels. I used a free drawing program called Gimp to do that. After screen capturing the image of your post with the green button in it and saving just that part of the image to a file using Paint.

You can see the border around the Button in the image below because I clicked it and while the MessageBox is displayed its border shows. If I had something else in its click event then the border probably would not show at all.

Option Strict On

Public Class Form1

    WithEvents Button1 As New TransparentButton

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Me.CenterToScreen()
        Me.Size = New Size(500, 500)
        Dim Bmp As New Bitmap(Image.FromFile("C:\Users\John\Desktop\ButtonImage.Png"))
        Button1.Width = Bmp.Width + 2
        Button1.Height = Bmp.Height + 2
        Bmp.Dispose()
        Button1.FlatStyle = FlatStyle.Flat
        Button1.FlatAppearance.BorderSize = 0
        Button1.FlatAppearance.MouseDownBackColor = Color.FromArgb(0, 0, 0, 0)
        Button1.FlatAppearance.MouseOverBackColor = Color.FromArgb(0, 0, 0, 0)
        Button1.Location = New Point(CInt((Me.Width / 2) - (Button1.Width / 2)), CInt((Me.Height / 2) - (Button1.Height / 2)))
        Button1.BackgroundImage = Image.FromFile("C:\Users\John\Desktop\ButtonImage.Png")
        Me.Controls.Add(Button1)
        Me.BackgroundImageLayout = ImageLayout.Stretch
        Me.BackgroundImage = Image.FromFile("C:\Users\John\Desktop\Picture Files\Crossbones BMP.Bmp")
    End Sub

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        MessageBox.Show("Hello")
    End Sub

    Public Class TransparentButton
        Inherits Button

        Private Shared ReadOnly DefaultBackground As Color = Color.Transparent
        Private TransparentImage As Image

        Public Sub New()
            Me.SetStyle(ControlStyles.AllPaintingInWmPaint, True)
            Me.SetStyle(ControlStyles.Opaque, True)
            Me.SetStyle(ControlStyles.SupportsTransparentBackColor, True)
            BackColor = DefaultBackground
        End Sub

        Public Overrides Property BackColor() As System.Drawing.Color
            Get
                Return MyBase.BackColor
            End Get
            Set(ByVal value As System.Drawing.Color)
                MyBase.BackColor = value
            End Set
        End Property

        Public Property Image1() As Image
            Get
                Return TransparentImage
            End Get
            Set(ByVal value As Image)
                TransparentImage = value
                Invalidate()
            End Set
        End Property

        Protected Overrides ReadOnly Property CreateParams() As System.Windows.Forms.CreateParams
            Get
                Dim cp As CreateParams = MyBase.CreateParams
                cp.ExStyle = cp.ExStyle Or &H20
                Return cp
            End Get
        End Property

        ' Infrastructure to cause the default background to be transparent
        Public Function ShouldSerializeBackColor() As Boolean
            Return BackColor = DefaultBackground
        End Function

        ' Infrastructure to cause the default background to be transparent
        Public Sub ResetBackground()
            BackColor = DefaultBackground
        End Sub

    End Class

End Class

This is what the ButtonImage looks like on my desktop.

Note that you can see through parts of it to the wallpaper in the background.

Please BEWARE that I have NO EXPERIENCE and NO EXPERTISE and probably onset of DEMENTIA which may affect my answers! Also, I've been told by an expert, that when you post an image it clutters up the thread and mysteriously, over time, the link to the image will somehow become "unstable" or something to that effect. :) I can only surmise that is due to Global Warming of the threads.