BKM for Screen Layout Design for Mac, Windows and Linux

My primary system is MacOS where I design my applications and screens. I’ve noticed that sometimes while everything fits properly on MacOS, when I build for Windows or Linux it seems that sometimes the controls aren’t quite big enough to display all the text or contents of the control. Honestly, this is quite irritating since I’m not doing anything special with the controls or in code that should make a difference. Also note that my Apps are otherwise running fine between systems.

My work around at this point is to build on each target system with Remote Debugger and size so that it looks good on that system and hope it doesn’t make it look bad on MacOS or the other Target. I end up trying to adjust so it works on all three. This can be time consuming. It seems like this is something that Xojo should be handling.

Is there something I’m missing? Any tips I can use when designing apps to prevent this issue?

Hi Steve! I think there’s two traditional ways of addressing this…

  1. Container Controls per platform as Jean-Yves Pochez has recently detailed
  2. Offset logic per platform
    a. In this scenario you use #If and TargetXYZ to give platform specific paths where you adjust control placement and sizes on a per OS level.

Of course you’ll still need to use the Remote Debugger and/or Xojo on each platform to get the details correct initially, but once done you’ll have something that will look more normal on each.

Yes, the whole idea of this being something that Xojo should handle has been discussed many times over the decades, but alas with OS specific sizing/positioning differences and a plethora of controls to manage, it’s left up to us devs.

Theoretically, if you go with option #2 above, one could setup some sizing/placement rules from one platform to another that could be reused in future projects. Heck now that I think about it, I’m surprised that an enterprising third-party plugin dev hasn’t come up with some kind of a tool to ingest the layout from one platform and output recommended changes or even final code for other platforms. It doesn’t need to be 100% either as even getting to 80% of the way there would save a ton of grunt work.

Hope this helps.

Thanks Patrick. I was afraid it wouldn’t be something that’s already been handled. From what I’ve been seeing, I’m thinking if I make the controls a bit bigger with a little extra space between other controls, edges of the windows, etc. when I design on the Mac, it might help compensate on the other systems. I’ll have to tinker with that.

There is a plugins form @Björn_Eiríksson (Einhugur) called “FlowLayout” that is designed for that purpose:

FlowLayout can help you ease the pain of platform differences when dealing with user interface that is sensitive to horizontal space. For example the space the text would have taken on Linux systems almost certainly would not be the same, but the FlowLayout handles that.

1 Like

I never really had a problem going between Mac and Windows, but historically Linux has been a problem.

There is a setting on the Linux built tab “Normalise Control Sizes”, which is supposed to address the issue for Linux. I’ve not built for Linux since that existed so I can’t say how well it works. I used to add code to the open event of the window to move top up by 2px and increase height by 4px for Linux.

How did I miss this, as I use Einhugur for all kinds of other things. Thanks for bringing this up. :slight_smile:

I never noticed this before, but on my system it appears to be on by default. So it hasn’t helped in my case.

OK, I always wondered.

My solution is to use a subclass of each control that needs adjustments, such as Beacon/ResizedPushButton.xojo_code at master · thommcgrath/Beacon · GitHub

1 Like

Same. Subclass everything. You’ll be much happier in the long run.

2 Likes

I subclass all my controls and add in lots of properties and lots of events and method to do all sort of things