QuickLook - buttons

Hi all…
I’ve been trying to create a macOS Quicklook style window for my cropping app that I am working on.
For reference - here are the styles of buttons I am looking to re-create. Images below showing a button with a SF Symbol character and another button with the ‘Open with Preview’ button.

QuickLook buttons

The buttons are 22px high.

Both of these buttons react when the mouse moves onto them with an highlight colour - shown.
Note that the ‘Open with Preview’ button has a border.

I’ve managed to recreate the look and feel of the buttons when the mouse enters and exists. See here.
MyButons - enter and exit change
For this I am using;
a) DesktopButton’s - style set to textured. Height 27 (don’t ask me why but a height of 27 rendered on-screen in the running app as 22. I pushed past that for now).
b) Code to mimic the shading via the opening event as follows;

me.NSButtonMBS.showsBorderOnlyWhileMouseInside = true

works great - buttons have that minimal Sonoma look and feel and work with Dark / Light mode.

BUT - I am not quite done. you’ll notice that my ‘Open with Preview’ button doesn’t have a border like the real Quicklook window…
So now I’ve added a new test button that is basically the same as the first one (textured, 27px high)
But in the opening event I’ve put;

me.NSButtonMBS.isBordered = true
me.NSButtonMBS.bezelStyle = 11

Now I get this;
Button with border
Notice that I have a border now - but the the height has been collapsed down to 20px’s (tricky to see, but trust me they are smaller now).
I also can’t mix it with the code is used before to highlight the button on mouse enter / exit. If I do that I lose the border. :boom:

The upshot is that I can’t find a combination that;
a) doesn’t collapse the height to a 20 px button… i.e. doesn’t match the height of the other buttons
b) will allow me to use the showsBorderOnlyWhileMouseInside function
c) will show the border

I know I could put the button inside a 22px high canvas and manually match the background colour and border colour and draw this myself. I’d consider doing that if I could work out also how to use the system provided colours for the button instead of hardcoding them for both light and dark mode.

I am hoping / thinking there should be a way to do this.

Any clues?

Xojo doesn’t support QuickLook, I suspect MBS has the code for this.
Xojo doesn’t support Vibrancy, I don’t know if MBS has the options to handle this correctly.
Xojo does something funky with buttons, you’ll need to use MBS to adjust the “frame” or “size”, it’s worth noting that not all buttons styles are height adjustable either.

I wouldn’t recommend trying to fake Apple’s Vibrancy or button styles as it can very easily lead to making your app stick out like a sore thumb, especially with Vibrancy as that will pick up color from the customers desktop background.

If the source window is using buttons in the toolbar to get that style, you’ll need to use MBS to hack the Xojo framework… as Xojo doesn’t support system controls in the toolbar.

I’d also recommend looking for someone has already done this with AppKit and Swift, as this will give you hints on how to do it, and from there we can tell if its possible with Xojo.