Label Text over Label Text in Windows

Targets
1

I program XOJO on a Mac, and this is the first time i have built a version for Windows. The resulting app has a problem with overlaying transparent text.

I am working on an app that uses an overlay of three controls:
(1) Bottom layer is a Rectangle whose fill color changes when clicked on; (2) middle layer with an array of single text characters (as Desktop Labels) in a set where individual characters may change independently under user control; and a top layer with a single text character that also can change under user control also independently. The transparency of all the text characters is set True both in the Inspector and also programatically just in case.

To demonstrate the problem I wrote a short demo program, with controls as described above: Here are two screenshots after the app is opened and the rectangle is clicked to change the fill color. The first is on MacOS(15.*) and the second on Windows (11). As you can see, the front character is not transparent in the Windows app. (In some experiments the middle layer text is not transparent, suggesting the either XOJO/Win or Windows has a limitation on text transparency.

TestText-MacOS
TestText-MacOS296×213 9.97 KB

TextText-Win11
TextText-Win11302×239 7.24 KB

No matter what I try, the Windows version can only apply transparency to one of the overlapping label text controls but not both, while the MacOS version works just fine. The user interface and program operation require transparency on both Desktop Labels. I could not find any solution in a search, and I would be most grateful if there is a way to accomplish this in Windows OS. Thanks from an old Fortran geezer (who hopes the two .pngs show up).

2

You might need to rethink your GUI. Looks like transparency on windows has been gone/broken for a long time.

If you use a Canvas you can draw text and simulate all you need to do. It will be a bit harder to do, but you will have a lot more control over what your app can do.
Drawing what you show here is simple. Set the drawing color based on clicked or not, and fill the background. then draw your two other layers on top, setting the font size / drawing color as required. Use DrawText to do that. Then set a drawing color of black and draw a rectangle around the whole thing.

You will have to capture mouse events yourself in the canvas as the labels are not there to consume the clicks.

Add a canvas and implement the paint event. Then play around using the graphics object and see what you can do. Graphics.textWidth and graphics.fontascent are useful to help align text.

1 Like
3

This is a known limitation of Xojo since 2018, maybe here you can read more about it:
https://documentation.xojo.com/topics/user_interface/windows_ui_guidelines.html

4

Thanks to Graham and Alberto. I suspected a problem with Windows and overlapping, but had not discovered the discussion pointed to by Alberto, although I did a brief search. I will convert my code to using Canvas and Graphics operations for my application. This is my first foray into building for Windows. Thanks again. -Steve K.

2 Likes