Control Observations

General
1

I am creating an app the will work for both macOS and Windows, and noticed some differences in how controls are displayed that affected how I designed the app (it would look great on macOS, but all odd on Win10). So I experimented and thought I’d share my observations in the event it might help some one, or if someone had some tricks to make it “better”

PUSHBUTTON
macOS - height is 20px, if you increase the height, the control floats to the center
Win10 - height is 22px, if you increase the height, the height increases, but it seems to take a larger height for the same fontsize on macOS

UPDOWN
size is fixed at 13x23px on both macOS and Win10, but if you change the bounds, it floats to center on macOS, and top/right on Win10

SLIDER
macOS - height is 23px, if you increase the height, the control floats to the bottom
Win10 - height is 24px, if you increase the height, the control floats to the top

Checkbox/RadioButton
height is 20px on both macOS/Win10, and floats to center if bounds are increased

SegmentedControl
macOS - height is 24px and floats to top if bounds are increased
Win10 - default height is 24px, if you increase the height, the height increases

PopupMenu
macOS - height is 20px and floats to bottom if height increases
Win10 - default height is 22px, but runtime size is based on FONT SIZE, and doesn’t seem to be any way to get the actual displayed size

I have seen this for Popup, but haven’t played with it to see if it will do what is needed to force a specific height regardless of fontsize

#If TargetWindows
  Const CB_SETITEMHEIGHT = &h0153
  Declare Function SendMessageW Lib "User32" (hWnd As Integer, Msg As UInt32, wParam As UInteger, lParam As Integer) As Integer
  Call SendMessageW(temp.Handle, CB_SETITEMHEIGHT, -1, Height)
#EndIf

This is not an analysis of ALL the Xojo controls (textfield and labels act the same it seems)… and all was based on 2019r1.1 running native on a macOS and Win10 machine.

If you have any insight, tricks or treats… :slight_smile:

2

[quote=458479:@Dave S]
I am creating an app the will work for both macOS and Windows, and noticed some differences in how controls are displayed that affected how I designed the app (it would look great on macOS, but all odd on Win10). So I experimented and thought I’d share my observations in the event it might help some one, or if someone had some tricks to make it “better”[/quote]

I’ve run into the same thing, how did you find out what the actual height of the controls are at runtime? I’m willing to let the OS resize them, but their up/down position may need to change so they align properly with other controls.

3

lots of experimenting and screenshots :slight_smile:

I created a new version of my Property Inspector, and it HAD to have precise values or it looked like cr*p
as it is some things are off by 1px

4

I was hoping there was a way to find the heights in real time, so that no matter what version of macOS or what point size was set in Windows, I could make things look right. 1 pixel really can make a difference - a chopped-off top is really obvious.

5

No… seems the running app returns the bounds that you set the control to, not the bounds that it actually drew in

On macOS, if you set a popup to 100px tall, it will say its 100px tall, even though it draws only 20px
conversely on windows, if you set it to 20px, but make the font 30pt, it will report 20px tall even though it will draw much taller.

6

Not exactly what you’re hoping for, but I find a tool called “Raster” very helpful for aligning and sizing things. It provides a couple of user-configurable grid overlays on the Mac screen.

7

Sounds pretty cool, thanks for the link!