Toolbar and buttons

After filing <> and learn that way is how toolbar work on macOS, I want to learn more about toolbars and buttons.

According to this page, toolbar items could be either ‘image buttons’ or ‘system controls’.

Then I read ToolButton.Style page.

Then I did some tests. Created a toolbar on mac that works just like Xojo, then I ran the project on windows and it looks different.

The project:

  • the first ToolButton uses ToolStyleDropDown
  • the second ToolButton uses ToolStylePushButton

On mac:

  • it works the same as Xojo
  • click on the text label on the first ToolButton and it does nothing
  • click on the icon on the first ToolButton and the DropDownMenu open
  • click on the icon/text on the second ToolButton activate the button (Event Handler Action)

On windows:

  • the first ToolButton icon has an arrow (small “down” icon) at the right side
  • if I click the first icon/text then the Event Handler Action is fired (activate the button)
  • if I click the right side of that icon, where the small down indicator shows, then I get the DropDownMenu
  • if I click on the second ToolButton that activate the button

A few questions:
1.- the first ToolButton (Xojo for Windows) is a custom button?
2.- the docs say “an arrow is drawn by default”, is there an option to remove that or change the arrow? (within Xojo)
3.- is there an option on Xojo Mac to create a ToolBar just like Pages/Numbers/Keynote use? (more like a ‘system controls’ toolbar)

I’m trying to create a toolbar that looks as close as possible for windows and mac, just like Xojo’s toolbar.

  1. As far as I know, using a Toolbar object in Xojo creates a system native toolbar (and controls on it)
  2. No, if you make a ToolButton with a menu on Windows it will always have the arrow to indicate there is a menu. There may be declares to change this, but not built in to Xojo.
  3. To shove system controls into a Mac toolbar you will need declares. @Sam Rowlands has written them, and you can pick up the RetinaKit library to do so.

If you’re trying to get the toolbar to look the same on both Windows and Mac you will want to avoid putting controls in the toolbar. Windows does not have FlexibleSpace and Mac does not have Separator, so you will never get the two to be exactly the same if you use either of those. I tend to put a Separator next to a FlexibleSpace when designing a toolbar. This way, the separations are the same for Mac and Windows, they just appear slightly different.

If you are trying to get the spacing like Xojo’s toolbar on Windows, you will have to write your own custom toolbar. The toolbar in the Xojo IDE is not a native toolbar, it’s faked to look like one so that it be exactly the same on both Mac and Windows, just like you’re trying to do.

Thank you Tim.

Do you think is faked just for Windows? They closed my case telling me that that’s how the toolbars work on mac (I did find a program that have the same behavior Rapidweaver 5). If they fake it on both, I think they can make the Insert button work the same on mac than on windows (clicking the text activate the button).

I don’t have a source or post to link for you, but I’m pretty sure the answer to that is yes, it’s faked on both. They may be using the actual button classes though, which would mean they can’t fix your issue.

I personally hide the toolbar, it’s a waste of space to me since everything I use is mostly keyboard or contextual menus (Right Click > Insert). The only thing I haven’t found a replacement for is Back and Forward, however those have had so many issues over the years I learned to not use them. I believe they should be working as expected now, but I’m already stuck in my habits.

Thank you Tim.

I don’t use the toolbars much but some people like the icons. Just learning in case I need to use them.