I am trying to create a native looking macOS preferences toolbar in Xojo, like the one used in Safari, for example (let’s ignore the lack of Retina just now):
I am using PNG files as icons (for now), overlaying the current accent color on them, setting the NSWindowMBS.toolbarStyle to 2 and calling Pressed to force the toolbar buttons to work as radio buttons.
Here is the sample project (API 2, because why not ), and while it works more or less fine, it still does not have the native look & feel. For example, when I hoover the pointer over a selected icon, the caption changes color, but the icon itself does not. This is how it looks in Safari (and Xojo IDE, so it is possible to achieve):
How can I change the icon color under the pointer? And how can I know what color should be used? Is there some declare magic (or MBS call) to make the icon change color automatically? If not, how can I detect when the pointer is over a toolbar icon?
Also, what should I do about the dark mode? The accent color I am overlaying on the icons, that is, ColorGroup.NamedColor(“controlAccentColor”), seems to be the same regardless of dark/light mode setting, but in the dark mode the preferences icons should have a different color. How can I get the correct dark accent color to overlay?
Dim ActionGearTemplate as string // content of PDF file
Dim Image as New NSImageMBS( ActionGearTemplate )
Image.setSize( 14,14 )
Image.IsTemplate = true
var icon1 As NSImageMBS = NSImageMBS.imageWithSystemSymbolName("gearshape")
var icon2 As NSImageMBS = NSImageMBS.imageWithSystemSymbolName("heart.text.square")
if icon1<>nil and icon2<>nil then
icon1.setSize(50,50) // BTW how can I know the proper size of each icon?
icon2.setSize(50,40)
icon1.isTemplate=true
icon2.isTemplate=true
var myButton1 As New DesktopToolbarButton
var myButton2 As New DesktopToolbarButton
myButton1.Caption = "General"
myButton1.Icon = icon1.CopyPictureWithAlpha
myButton1.ButtonStyle=DesktopToolbarButton.ButtonStyles.ToggleButton
myButton1.Tag=1
myButton2.Caption = "Test"
myButton2.Icon = icon2.CopyPictureWithAlpha
myButton2.ButtonStyle=DesktopToolbarButton.ButtonStyles.ToggleButton
myButton2.Tag=2
me.AddButton myButton1
me.AddButton myButton2
end if
But I still have to overlay the accent color myself (in myToolbarPREF.Pressed), so that the icon changes color when clicked. Without that, only the caption color changes.
I guess I am assigning the icon improperly? CopyPictureWithAlpha generates a simple Picture from NSImage, so it isn’t really different from using a picture from Xojo imageset, right?
Because you are getting to the very last step and then converting the NSImage to a Xojo Picture. When you do this it loses the template property as Xojo pictures have no concept “template”.
You also shouldn’t need to set the image size as the NSToolbarItem should auto resize the icon.
Perhaps a Feedback request to be able to set template when Xojo sets your images to controls is in order.
Lastly; I’d recommend getting a copy of Aqua Swatch from the Mac App Store. This will allow you to browse a list of known NSImage constants, which are auto mapped to SF Symbols on Big Sur and above, yet still work on older versions of the macOS.
It would also be good if Xojo themselves could share how they made the preferences window. If it was made in a different tool, it should be re-written in Xojo and for Xojo to expose the functions that they needed to make it platform consistent.
It would not only improve the Xojo framework, but help Xojo’s customers to create better x-plat apps.
var n1 As NSImageMBS = NSImageMBS.imageWithSystemSymbolName("gearshape")
var n2 As NSImageMBS = NSImageMBS.imageWithSystemSymbolName("heart.text.square")
if n1<>nil and n2<>nil then
n1.isTemplate=true
n2.isTemplate=true
var its() as NSToolbarItemMBS
its=self.NSToolbarMBS.items
its(0).Image=n1
its(1).Image=n2
end if
I’m putting a sample project to download here in case anyone finds it useful (API 2, MBS plugins required).
Thank you for sharing this information @Greg_O_Lone
I think it would be really be helpful to the community and to Xojo as a x-plat tool, if the steps that are required, are digested and then integrated into Xojo.
While I could log Feedback cases for this particular process, I am sure that there are others areas where Xojo has already put in the work to do a process correctly and Xojo’s customers are left to figure it out for themselves, often stumbling along the way, like @Grzegorz_Pawlik, who tried so hard that they ended up colorizing the icons themselves, when it totally wasn’t needed.
For instance:
Add a option to the toolbar class that allows for specification of “Toolbar” style.
Add a options property to the Xojo picture class, that would allow for the value of “Template” to be set (potentially others, down the road, i.e. meta data).
Allow the IDE to accept SVG files as pictures, on application build, do what is needed to make it “work” on each platform.
Then create a blog article or include with the language reference on how to get a platform consistent “Preferences” toolbar, by simply…
I realize that this means more work for the existing team, perhaps it really is time to hire a few more peeps in the engineering team.
var n1 As NSImageMBS = NSImageMBS.imageWithSystemSymbolName(“gearshape”) doesn’t work on Catalina but ok I assume on Monterey. What would the issue be?
I tried a few options including “heart.text.square” which seems to work on the second line?? Where do I get a list of acceptable names?
var n1 As NSImageMBS = NSImageMBS.imageWithSystemSymbolName(“multiply.circle.fill”)
var n2 As NSImageMBS = NSImageMBS.imageWithSystemSymbolName(“heart.text.square”)
You can use Aqua Swatch to browse system images that are available from 10.0 to 12.0
Alternatively, you can use App Wrapper to rasterize SF Symbols (has to be done on Big Sur or newer), to which are then included in the resources of your application, when wrapped.
), and while it works more or less fine, it still does not have the native look & feel. For example, when I hoover the pointer over a selected icon, the caption changes color, but the icon itself does not. This is how it looks in Safari (and Xojo IDE, so it is possible to achieve):
