Drawing/painting OVER controls within a Canvas

The grey box that shows the serial port and baud popup menus, is a canvas (within an outer canvas).
The red diagonal line is shown only as an example of the issue.

The reason I would like to solve this is to do with those “pesky” little white dots on each corner of the COM3 and 115200 menu boxes.
It’s not a deal breaker but annoying nonetheless. It’s those “little” visual things that can make a difference (perhaps subconsciously) which can make the software UI look unprofessional. I’m sure the issue wouldn’t be an issue on macOS.

It’s a transparency bug with Windows. The buttons (connect/disconnected) behave correctly because the underlying window has the same background colour.

So, apart from drawing little dots and placing them over (if that even works) what other more “non-dirty” methods can anyone suggest?


If I may, you could very well be inflicting pain on yourself by using kind of outdated gradient round corner buttons typical of Windows 7, which style has now become frankly antique.

Since Windows 8, and today in UWP apps, the prefered button shape is rectangular and flat.

See https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/buttons

See how a quick project based on your design renders under Windows 10 :

You really want to look at your project under Windows 10. Maybe your issue is no issue at all.

BTW it would not exist under Mac because the corner of PushButtons and PopupMenus is truly transparent there.

If you still want a better rendition under Windows 7, why not change the color of the placard under the two popupmenus to the exact one of the corners ? That would be way simpler than adding little pieces that will look awkward under Windows 10.

Very good point Michel. I’ve got a laptop running WIN8.1 which I haven’t tested my program for a while. Will do, not just for this, but general testing. I don’t have WIN10 , but my daughter does on her laptop - so I can test it later.

I want the placard to look embossed - for “visual precedence”. Using a lighter colour will not work.

FYI - generally, stacking controls like this is just asking for trouble. You may have better luck if you use a group box with no caption.

For all intents and purposes, apart from borderless windows, Windows 8.1 controls look the same as Windows 10.

Thanks Greg. It has nothing to do with the stacking of controls. I think I’m an expert in stacking controls. I’ve spent many wasted hours dealing with that, and the dreaded red border of “auto grouping”.

If you want to know how to ungroup, group, re-group and re-order controls, just ask me - happy to help.

Thanks Michel, I’ll check it out. The question wasn’t a necessity but an annoyance, and only an “aesthetic”.

But all responses and ideas much appreciated.

This is a very bad thing.

Why say ye?

Ok, almost an expert.

Besides an engineer saying so?

There are a world of other problems with stacking controls, from aesthetic, to usability, accessibility, and flickering on Windows.

I wasn’t saying it’s a bad thing to be an expert, I’m saying it’s a bad thing that you stack controls that frequently.

Maybe we are talking about different things.

My interpretation of “stacking” controls is in a somewhat physical sense. ie. canvas within canvas, buttons, popups etc within those, within others, etc. etc. I’ve worked out how to do it. I wish that the red autogroup wasn’t there and we could just group controls as we see fit.

With all due respect, an engineer doesn’t necessarily make an effective interface designer.

Do you know Windows 7 aesthetics with gradients are awfully tired ?

Are you seriously going to waste time and lose sleep over a visual interface that is now what ? 7 years old or so ?

Do you seriously think current and future users of Windows 10 give a damn ?

About pure aesthetics, creating an embossed effect around a white surface is just as easy as around a grey one. You may need to make the bevel more evident. Easy to do with a canvas.

Michel, you are right in that why bother with it. It’s just that I have these ideas that are visual and cannot be fulfilled. Perhaps that’s why I’m not married.

The code is the main thing, it’s just that sometimes after a lengthy coding session, and a few red wines, I relax and have a general “look” at the aesthetic. This is a time when I look at the overall appeal - changes that generally should not “wreck” the code.

[quote]creating an embossed effect around a white surface is just as easy as around a grey one. You may need to make the bevel more evident. Easy to do with a canvas.
No, no, no. That’s not correct Michel. You need a different shade of grey for the perception of embossed or de-bossed to work. The background needs to be different from the surface. Highlights and lowlights, that little thin outer border (top left & bottom right) make the difference to the illusion. Subtle, but it’s important.

My trade is graphic design/pre press professional.

If anyone is interested I’ll post some examples of how embossing/de-bossing is achieved by using scales of grey.

[quote=327822:@Steve Kelepouris]
My interpretation of “stacking” controls is in a somewhat physical sense. ie. canvas within canvas, buttons, popups etc within those, within others, etc. etc. I’ve worked out how to do it. [/quote]
THIS is likely to cause flickering on Windows
Thats what Greg was referring to

Thanks Norman. The unfortunate “flickering” with Windows is a given. I’ve seen it regardless of stacked controls, I accept it. Simple labels will flicker when tabbed to another control, text input box etc. - not good, but I live with it.

My original question was about overlaying controls, or a simple pixel drawn above the underlying control to get rid of some unsightly white pixels. The windows transparency issue being the cause no doubt.

I know I can draw text and other objects within a canvas via code and therefore eliminate most of the flickering , but it would be better to be able to assign a layer to objects/controls or group them as seen fit. The “red box” of auto grouping is absolute mayhem and frustration - it should be able to be turned off.

Even though I have worked out a system to group objects, it will never be a substitute for the fact that rounded corners will always be an issue.

A rounded corner canvas would be nice :slight_smile:

Thanks for your input Norman, much appreciated.


OK, Steve, I don’t have a degree in design. I know how designer types can be obsessed over it. But still, can’t you accept the idea that sometimes changing a design is the way to avoid gigantic work for 4 pixels ?

As far as stacking controls, it is indeed under Windows a true source of deep excrements. Flicker is no joke on some machines. Indeed stacking controls is not a good voodoo.

Place this in the open event of your controls, and the underlying control will no longer be parent :

me.parent = nil

Thanks Michel and all. I apologise if I’ve offended anyone. I am a bit pedantic on the layout side and need to concentrate a bit more on my code. You are indeed correct about Win8 has the square buttons, and therefore that makes my original question/problem/issue pretty much redundant.

However, wrestling with the layout of controls in the IDE has always been a source of great annoyance. The auto-group red box for the most part is fine, but when you want to adjust the layout and “ungroup” controls, that’s the hard part. We have buttons in the IDE wich allow us to move the z-order, so why not have a “group” button as well? I like to be the one in control of what objects are grouped.

There must be something basic about layering controls that I must be missing. Isn’t it used and essential in gaming type programs, ie. canvas within canvas within canvas that may include other controls? I don’t get it. How else would you design a layout? Or, do we mean “overlapping” controls?

me.parent = nil

Michel, whilst useful, it doesn’t ungroup objects in the IDE.

[EDIT] The flickering on the WIN8 pc is really really bad, much worse of an issue that 4 little dots I wanted. <gulp!!>

[quote=328140:@Steve Kelepouris]

me.parent = nil

Michel, whilst useful, it doesn’t ungroup objects in the IDE.[/quote]

You don’t understand. It is not in the IDE that it does it’s magic, it is at runtime.

The other possibility you have is to drop the control where you want it, then note left and top, and move it away from the parent. Then in the inspector, enter left and top. The control will be where you want it, but without being child of the underlying control. It will be child of the window.

About games, you must put away all the misconceptions you have about layering controls. Games don’t layer controls. Games move drawing of objects onto the screen pretty much the way you would with a canvas.

The best example of such a technique in Xojo is /Example Projects/Graphics and Multimedia/CanvasDrawDrag.xojo_binary_project