AdvancedHMI Software

General Category => Support Questions => Topic started by: chunt on April 23, 2014, 02:24:33 PM

Title: Transparant Button over an Image
Post by: chunt on April 23, 2014, 02:24:33 PM

I am sure there is a simple solution to this but I can't seem to get it. I have an image of a machine and I want a transparent button overlaid on the machine. I want a button on the machine but I don't want to see the button. I have tried changing the properties of a basic button but can't seem to get it. Thanks.

Title: Re: Transparant Button over an Image
Post by: dmroeder on April 23, 2014, 04:02:26 PM

You could try changing the button property FlatStyle to Flat, then change the BackColor property to Transparent (on the web tab).  Sounds good in my head at least...

Title: Re: Transparant Button over an Image
Post by: Archie on April 23, 2014, 07:39:21 PM

You could also possibly do this in code. I am assuming your machine is a PictureBox. for example, Just double click on the PictureBox to get back to the click event handler, then put in this code:

EthernetIPForCLXCom1.Write("MyTag",1)

This is assuming you are using the ControlLogix driver

Title: Re: Transparant Button over an Image
Post by: chunt on April 24, 2014, 01:12:22 PM

Thanks for the replies. I will try both suggestions and let you know. Thanks again.

Title: Transparent Buttons over an Image
Post by: bachphi on July 09, 2022, 06:42:10 PM

OP did not get back to us and Archie's solution is for one button over an image. It will not work if there is more than one button over an image as each button will have different click events.

Most solutions are to change button.FlatStyle to Flat, then change its BackColor property to Transparent and tie the parent to PictureBox, doing so will make the button(s) transparent, but the click action become inactive.

Title: Re: Transparent Buttons over an Image
Post by: bachphi on July 10, 2022, 12:55:20 PM

I see what the problem was: the button location relative to the PictureBox location.

One approach is to first add a Panel, then insert a PictureBox inside the Panel and dock in parent container.
In the form load tie button.Parent to PictureBox.

Code: [Select]

    Private Sub Form3_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Button1.Parent = PictureBox1
        Button2.Parent = PictureBox1
    End Sub

    Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        MessageBox.Show("Form #3")
    End Sub
    Private Sub Button2_Click_1(sender As Object, e As EventArgs) Handles Button2.Click
        MessageBox.Show("Form #3 butn 2")
    End Sub

The other approach without the Panel, only PictureBox and buttons:  directly control the buttons location relative the picture location:

Code: [Select]

    Private Sub Form4_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Button1.Parent = PictureBox1
        Button2.Parent = PictureBox1

        Button1.Location = PictureBox1.PointToClient(Me.PointToScreen(Button1.Location))
        Button2.Location = PictureBox1.PointToClient(Me.PointToScreen(Button2.Location))
    End Sub

and button control appearance:

Code: [Select]

        Button2.FlatStyle = FlatStyle.Flat
        'Button2.FlatAppearance.BorderSize = 0
        Button2.FlatAppearance.MouseDownBackColor = Color.FromArgb(0, 255, 255, 255)
        Button2.FlatAppearance.MouseOverBackColor = Color.FromArgb(0, 255, 255, 255)
        'Button2.FlatAppearance.BorderColor = Color.FromArgb(0, 255, 255, 255)
        Button2.BackColor = Color.FromArgb(0, 255, 255, 255)