Canvas with transparent icons

Hello,
i try to make an icon to click on. I made a canvas and an icon with transparent background.
On the IDE everything is ok. On Linux it works, but on Win10 it is not transparent. What can i do?

HOW did you make the transparent Icon? with a alpha mask?

Wait a minute…
at first i have to install Gimp to check it.
Yes, the background is transparent, not an alpha mask but a “color to alpha”

that might be your issue.
If you’d like send me a private message and I’ll give you an email address… send me one of your icons and I’ll convert it
if that works I’ll give you the Xojo that makes these changes… its very fast and I use it all the time

How should i set up a transparent icon, that it is transparent at Windows?

Gimp, (2.10)
Magic Stick, (to select the transparent part)
Cmd-Del or Ctrl+Del (depends on the OS),
Save,
Drag and drop in Xojo Navigator’s pane (in a folder),
Assign the image to the Canvas.

Save

Hey Peter,
bevelbutton is easy

open:
onpic = New picture(80,20)
onpic.Graphics.DrawString(“on”,10,15)
offpic = New picture(80,20)
offpic.Graphics.DrawString(“off”,10,15)
BevelButton1.icon = offpic
scip = True
oval1.FillColor = Color.green

Action:
If scip Then
BevelButton1.icon = onpic
scip=False
oval1.FillColor = Color.red
Else
BevelButton1.icon = offpic
scip=True
oval1.FillColor = Color.green
End If

Properties:
onpic as Picture
offpic as Picture
scip as integer

and Oval1

https://www.dropbox.com/s/d8s3dwmh5hd68sd/Schalter.xojo_binary_project?dl=0

@Emile Schwarz : my icon is transparent in Win10 with Gimp, Paint, etc. but not in Xojo on runtime. If transparency is set from true to false, it is not transparent in the IDE. That works, but not on runtime. Then the transparency is always false. Why?

Can you share your image and a sample app, that is easier to check. You can zip together and share with dropbox.

I prepared an example with two transparent icons:
https://www.dropbox.com/sh/363ycgl60hntr9x/AAD19FAygjyJfV25fQ0I9GAya?dl=0

Peter, your icons are transparent, the problema with Windows is that Xojo uses a pseudo-transparent method to display some controls. The objects behind other objects are not shown in most cases, only the color from the window is shown.

You want to draw a Green square behind the canvas but with pseudo-transparent the canvas actually is taking the main window color.

This is what I understand, I may be wrong. My experience is not at a level that can write code to try to change the Canvas color to simulate the Green square behind the Canvas.

I only want a nice button with a symbol to click on. It doesn’t work with a menu bar, not with a toolbar, not with buttons and not with canvas. So what else can i do?

I think you can use canvas, but you need more code. Instead of using Backdrop to put your image there, use the Paint event. Then you change the canvas color and the transparent icon will show the green color (or any other color you select for the canvas). Again, no experience, maybe someone else can point to sample code.

Direct link for downloads:

https://www.dropbox.com/sh/363ycgl60hntr9x/AAD19FAygjyJfV25fQ0I9GAya?dl=1

Peter, note the ending 1 (instead of 0).

Works fine when running on El Capitan / Xojo 2019r1.1.
Both images are transparent (no surrounding white).

Don’t work with a Mac! Work with Win10 and you will understand. It doesn’t work. Very interesting is the fact, that it works on Linux and not on Win. Mostly Linux is worse.

What Linux flavor/version ?

Mac and Linux do have transparent controls, Windows use pseudo-transparent (pick the color from the window), change the window color and test again, you will see the icon with the window color around it but not the green box behind the canvas.

@Alberto De Poo, you are right.
I use different Linux Mint Versions and Win10

I don’t know if what I did is the right way to do it (I bet there is a better way), but I check if the mouse enter the canvas, then paint a green square and then the icon, if the mouse exit then invalidate the canvas and only paint the icon.