I built a nice interface with some buttons (which are rounded rectangles) with transparency “on” and double buffer “on” or “off”… works fine on the Mac (not to say perfect).
Windows shows me this here:
And yes, I had a look into the forum entries here. But I did not get the special Windows code running. My question: Is this a bug? What is the transparency flag good for if ignored in the Windows App?
Is there any (easy) workaround? Or didn’t I find the right point? Drives me crazy to spend time with flags flipping back and forth beween Mac and Windows.
Thanks for any tips, I think I am not alone with that … !
Thank you for your comment, Michael. Here I used the rounded rectangle as a kind of button you can move around for sorting. I wondered why there is no plugin for that - even not at Graffitisuite. Now I know
I tried listboxes, rectangles, canvas, buttons, placards - nothing works when it comes to rounded assets where the corners should be transparent - even above a picture. Canvas always gives white background like shown in the screencopy above.
So do I have to accept this as a glitch - or do I have to take exact rectangles as assets to be sorted, like you can do in the listbox? I expected more. Here a sample with corner radius 10 - you do not see it if you do not know. May be I’ll take this litte cheat until I get something better:
User interface is a hassle with Xojo - at least on Windows. Any other ideas out there?
maybe at drag & drop set the corner to 0 that it appear as rectangle this moment.
i guess in sequence you will have space between that it looks good with round corner.
that native ui is very inflexible in compare with html pages.
its somehow 50% OOP, not full-value. its all attended by exceptions at use. especially this container controls.
mainly if we need to handle/create/remove controls at runtime.
Canvas gives you a white background because its parent has a white background (most probably the window). It is not a glitch, Windows unfortunately works like that.
Another option would be to use a listbox, and to draw the buttons in the CellBackgroundPaint event. You can paint whatever background color with fillrectangle, before you draw the rounded rectangle button image.
Don’t feel bad. I mainly develop on Mac. I have an app called Watermark. The Mac source produced a very nice app I was able to put on the MAS.
When I tried to compile the same source for Windows, it was purely unusable. I had to write everything into a canvas, which meant refactoring the entire UI. Today, I have two source codes: Mac on one side, Windows on the other.
It is a limitation of the present Xojo for Windows. That is why I still use 2016R3, so I have full transparency, like I enjoy on Mac. Note that the current, pseudo transparent Windows version is like so after Xojo implemented Direct2D, supposedly to alleviate flicker.
I tried this out - but did not get it to work. It works with any same color background, but if the background is a picture or other controls, the effect is the same as above. Anyway - thanks a lot for this idea.
DrawInto works with a graphic - this would mean to create an image of the control, make i.e. the white color transparent and place this somewhere. Big effort.
I am using container controls at the moment and the control which is dragged stays inside the container now. This will cause additional effort.
So even if this may work - it will get a kind of image procesing then. How do the Graffitti-People say: UI should not be hard. In fact it is. Thanks for the idea.
And what always will be an issue here: What will newbies think about that?
make the front thing a container control, in the paint event draw the background control into the container control then embed your rectangle into the container control.
I’m not sure you understood. I start with a ContainerControl. I then put a Rectangle Control on that. Then on the Rectangle Control I put all my buttons. Each is a Canvas. Each button itself is drawn/painted by the Canvas’ Paint Event.
One may also use Drag/Drop to re-order the buttons.
thank you for your additional explanation. I created a new container control now exactly as you described it. Using double-buffer on (or also not). Having a rectangle with one canvas inside. Everything has the transparent flag switched on. Strange: In the Z-Axis Editor the canvas does not appear INSIDE the rectangle what ever I try. They are always “side by side”.
And I did not get ANY transparency - which should show up in the rectangle, right? Not even on the Mac any more.
You mention the Paint event - did you place the buttons into the canvas programmatically or did you use the backdrop (what I did)? May be I should create a small test project?
And: I am working with the latest version 2020:2.1 - possibly something was changed? Thank you so much for your patience with me !
I could complain about xojo’s transparency in windows, the fact that controls still paint in the wrong order to allow me to work around this issue and offer “true transparency” as is done in .Net but I talked about this at great length years ago and this is what we were given. /shrug
Let me know if you have any more questions and I’ll do my best to explain, provide pictures or demos. If you can’t do something, post up a little demo project and I’ll take a look.
An idea, which I fully expect to have shot down, leans away from GUI and into ‘interface defined by code’
Have an array/ dictionary of objects as property of the window
They need to have the same kind of properties as a button/rect… ie top, left, width, height, and caption
In the window paint event, draw them, using fillovalRect, then drawstring, at the correct locations.
In the Window mouse down/up events, check to see if the x,y positions match one of you buttons, and react accordingly.
You get your rounded edges, they dont obliterate what is below, but you have to do more work than you might want.
I took your nice test project and simply moved the rounded rectangle up. This is what my dragged control would look like - and see what the result is - looks like a devil with green horns:
And this is not what I would understand as transparency. OK, I understood that Windows is a bit back with that. My simple question is: Is there ANY way to get around that and to get a draggable control which can be moved above anything else, with transparent corners?
Any suggestions are welcome - even if it may cause some additional work. Thanks again for the great sample, Julian!
Realbasic & Xojo have had a very chequered past relating to transparency and flickering.
The current solution is very primitive and in some ways a step backwards compared to older versions of Xojo.
I would say your best solution is to draw everything directly into a canvas via its paint event or draw everything into a picture which you then display via a canvas and its paint event.
Yes, I tried that. The canvas is also not transparent then. This is what Tim suggested above - but this did not work DRAGGING things around. It stays with the background color then. At least with my 2020 version. Or did I miss something? Thank you …
How do the Graffitti-People say: UI should not be hard. In fact it is. Thanks for the idea.
